:root{--bg:#242136;--ink:#30263f;--shell:#b7a0dc;--paper:#fbf8ef;--line:#4d3b63;--accent:#f6ab7f;--mint:#c8e6c3;font-family:ui-rounded,"PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--bg);background-image:linear-gradient(90deg,#ffffff03 1px,transparent 1px),linear-gradient(#ffffff03 1px,transparent 1px);background-size:40px 40px}button,input{font:inherit}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;transition:transform .1s,background .15s}button:disabled{cursor:default;opacity:.45}button:not(:disabled):active{transform:translate(1px,3px);box-shadow:none}button:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #f7ae7b;outline-offset:4px}[hidden]{display:none!important}.app{max-width:496px;margin:0 auto;padding:25px 20px 40px}.app-header{display:flex;justify-content:space-between;align-items:center;margin:0 0 20px;padding:0 3px;gap:14px}h1{font-size:23px;line-height:1.25;letter-spacing:1px;color:#eee6f8;font-weight:800;margin:0;white-space:nowrap}h1 span{color:#c6afe7;margin-left:5px}.header-buttons{display:flex;gap:8px}.square-button{width:35px;height:35px;border:2px solid #8e79aa;background:#3b304f;border-radius:8px;color:#e4d6f5;font-size:17px;font-weight:700;display:grid;place-items:center;box-shadow:0 3px 0 #0f0c19}.square-button svg{height:17px;width:17px}.console{background:var(--shell);border:3px solid #0f0c19;border-radius:22px 22px 45px 22px;padding:13px 15px 17px;box-shadow:7px 8px 0 #100d1d,0 0 0 1px #76618c inset}.console-top{display:flex;align-items:center;gap:11px;padding:0 1px 11px}.screw{height:8px;width:8px;border:1.5px solid #665178;border-radius:50%;position:relative;opacity:.8}.screw:before{content:'';position:absolute;left:1px;right:1px;top:2px;height:1px;background:#665178;transform:rotate(-35deg)}.power-indicator{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:1px;flex:1}.power-indicator i{width:6px;height:6px;border-radius:50%;background:#e9f2ad;box-shadow:0 0 5px #e9f2ad80}.sound-toggle{display:flex;align-items:center;gap:5px;border:0;background:transparent;padding:2px;font-size:9px;font-weight:650}.sound-toggle svg{height:14px;width:14px}.dashboard{display:grid;grid-template-columns:1fr 1fr 65px;background:#3b304e;border:2px solid #30263f;border-radius:11px;padding:10px 13px;gap:10px;margin-bottom:12px;box-shadow:0 2px 0 #d0bce9}.display{min-width:0;display:flex;flex-direction:column;justify-content:center}.display>span{color:#b8a2cf;font-size:9px;margin-bottom:4px;letter-spacing:.7px}.display strong{color:#ecf7c9;font:700 27px/1.15 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;font-variant-numeric:tabular-nums}.display:nth-child(2){padding-left:12px;border-left:1px solid #61516e}.display:nth-child(2) strong{color:#f5c7a9;font-size:23px}.next-display{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;border-left:1px solid #61516e;padding-left:9px}.next-display>span{font-size:9px;color:#c9b2de}.next-display img{height:32px;width:32px;object-fit:cover;border-radius:50%;image-rendering:pixelated}.board-frame{position:relative;border:3px solid #392d49;border-radius:7px;background:var(--paper);overflow:hidden;isolation:isolate;box-shadow:0 3px 0 #d2bfea}canvas{display:block;width:100%;height:auto;aspect-ratio:390/570;touch-action:none;cursor:crosshair}.board-overlay{position:absolute;inset:0;background:#fbf8eff5;display:grid;place-items:center;padding:20px}.welcome,.result{text-align:center;width:100%;max-width:310px}.target-label{display:inline-flex;align-items:center;gap:5px;border:1.5px solid #c0a6d6;background:#efe4f6;border-radius:5px;padding:4px 9px;font-size:10px;font-weight:650}.target-label b{font:800 14px ui-monospace,monospace}.target-portrait{width:126px;height:126px;margin:16px auto 18px;position:relative;border:3px solid #5e4377;box-shadow:4px 4px 0 #d4c2e0;background:#dec8f2;border-radius:13px;overflow:hidden;transform:rotate(-3deg)}.welcome-hero{width:108%;height:108%;margin:-4%;object-fit:cover;image-rendering:pixelated;display:block}.welcome h2,.result h2{font-size:22px;font-weight:800;margin:0 0 10px;letter-spacing:1px}.welcome p,.result p{font-size:11px;line-height:1.8;color:#887891;margin:0 0 21px}.primary{background:var(--accent);color:#432d35;border:2px solid #67483f;border-radius:9px;padding:12px 28px;box-shadow:0 4px 0 #8c675b;font-size:14px;font-weight:750;min-width:165px}.primary:hover{background:#ffba8e}.first-merge{display:flex;align-items:center;justify-content:center;gap:9px;margin:23px 0 10px}.first-merge img{height:31px;width:31px;border-radius:50%;image-rendering:pixelated}.first-merge span{font:700 13px ui-monospace,monospace;color:#a58db8}.welcome-note{font-size:9px;color:#a28cae}.console-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:14px 1px 13px}.console-controls p{font-size:9px;color:#5f4b76;margin:0;text-align:center;line-height:1.5;max-width:170px;font-weight:550}.control-button{background:#3f3152;color:#f3e8ff;border:2px solid #2b203a;box-shadow:0 3px 0 #665080;border-radius:9px;padding:9px 11px;font-size:10px;white-space:nowrap;font-weight:600;min-width:68px}.control-button span{margin-right:3px}.restart-button{background:#d3bfe8;color:#4d375e;border-color:#71568a;box-shadow:0 3px 0 #8f70ad}.console-bottom{display:flex;align-items:center;gap:10px;padding:3px 2px 0}.console-bottom>span{font-size:8px;color:#604a75;white-space:nowrap}.console-bottom b{font-weight:750;font-family:ui-monospace,monospace;margin-left:3px}.speaker{display:flex;gap:3px;transform:rotate(-24deg);margin-left:auto;margin-right:8px}.speaker i{height:19px;width:3px;background:#806297;border-radius:2px;box-shadow:1px 0 0 #cfbde2}#progress-dots{display:flex;gap:4px}.progress-dot{height:6px;width:6px;border:1px solid #83659e;background:#cdb6e6;border-radius:1px}.progress-dot.unlocked{background:#f1f3bb;border-color:#f1f3bb}.details{margin-top:25px}.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:0 5px}.tab{border:2px solid #69547e;border-bottom:0;background:#342b44;border-radius:9px 9px 0 0;color:#ae9bc1;font-size:11px;font-weight:650;padding:11px 5px;position:relative;top:2px}.tab.active{background:#ebe1f5;border-color:#0f0c19;color:#503663;z-index:1;top:2px}.detail-panel{padding:18px;background:#ebe1f5;border:2px solid #0f0c19;border-radius:9px;box-shadow:4px 4px 0 #100d1d}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:17px}.panel-heading h2{margin:0;font-size:12px;font-weight:750;letter-spacing:.5px}.panel-heading>span{font-size:9px;color:#977da8}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 9px}.gallery-item{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}.gallery-image{height:58px;width:58px;border:2px solid #c3a8d6;border-radius:10px;overflow:hidden;background:#d9bff1;box-shadow:2px 2px 0 #c9b3da}.gallery-image img{width:106%;height:106%;margin:-3%;display:block;image-rendering:pixelated}.gallery-item>span{font-size:9px;color:#745a86;margin-top:7px;white-space:nowrap}.gallery-item small{position:absolute;top:-5px;left:5px;font:bold 9px/16px ui-monospace,monospace;background:#fcf8ec;border:1px solid #a98dc0;border-radius:4px;min-width:18px;padding:0 2px;color:#62417a}.gallery-item.unlocked .gallery-image{border-color:#867442}.gallery-item.unlocked:after{content:'✓';position:absolute;right:6px;top:43px;background:#d5e8b9;color:#47683e;border:1px solid #91ae72;border-radius:50%;height:15px;width:15px;font:bold 10px/13px system-ui}.rank-table-head{display:flex;justify-content:space-between;color:#9b83ae;font-size:9px;border-bottom:1px solid #d4c3e0;padding-bottom:8px}.rank-row{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #d9cae5}.rank-number{color:#9c7bad;font:700 12px ui-monospace,monospace;width:17px;text-align:center}.rank-row:first-child .rank-number{color:#ac7148}.rank-meta{flex:1}.rank-meta strong{font-size:11px;display:block;font-weight:650}.rank-meta small{font-size:9px;color:#a38caf;display:block;margin-top:3px}.rank-score{font:700 16px ui-monospace,monospace;color:#78558f}.empty-rank{display:grid;place-content:center;text-align:center;min-height:135px;font-size:12px;color:#9a80a9;gap:7px}.empty-rank small{font-size:10px;color:#ac98ba}.local-note{font-size:10px;color:#9b85a8;line-height:1.7;margin:14px 0 0}.volume-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#7c5f8e}.volume-label output{font-family:ui-monospace,monospace}input[type=range]{width:100%;margin:14px 0 19px;accent-color:#8057a2;cursor:pointer}.sound-tests{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.sound-tests button{background:#fcf7ec;border:1.5px solid #a98bbd;border-radius:6px;font-size:10px;padding:10px 4px;box-shadow:0 2px 0 #c3abd2}.board-toast{display:none;position:absolute;top:34%;left:20px;right:20px;border:2px solid #5c4276;border-radius:9px;background:#f2e1f5ef;box-shadow:4px 4px 0 #553a6b22;padding:20px 12px;text-align:center;font-size:17px;font-weight:750;pointer-events:none}.board-toast.visible{display:block}.board-toast small{font-size:11px;display:block;margin-top:8px;font-weight:400;color:#8a6d99}.result img{width:90px;height:90px;border:2px solid #b99dcb;border-radius:13px;margin-bottom:17px;image-rendering:pixelated}.result .result-score{font:800 43px ui-monospace,monospace;color:#78518e;margin:13px 0 10px}.result-badge{font-size:10px;color:#986d43;background:#f5e4c6;padding:5px 10px;border:1px solid #ddc09a;border-radius:4px;display:inline-block;margin-bottom:18px}.result .secondary{background:transparent;border:none;border-bottom:1px solid #b49bc3;color:#9275a3;padding:4px;display:block;font-size:11px;margin:20px auto 0}.danger-hint{color:#8c2346!important}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,12px);max-width:90vw;background:#f4eaf9;color:#584168;border:2px solid #281b38;border-radius:8px;box-shadow:3px 3px 0 #0f0c19;padding:11px 16px;font-size:12px;z-index:100;opacity:0;transition:opacity .15s,transform .15s;pointer-events:none;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{position:fixed;width:min(370px,calc(100vw - 36px));padding:27px;background:#f4edf9;color:var(--ink);border:3px solid #2b203a;border-radius:13px;box-shadow:7px 7px 0 #161022}dialog::backdrop{background:#100b20b3;backdrop-filter:blur(3px)}dialog h2{font-size:20px;margin:0 0 14px}dialog p,dialog li{font-size:12px;line-height:1.9;color:#8a709c}dialog ol{padding-left:19px}dialog .primary{min-width:0;padding:10px 17px;font-size:12px}.modal-close{position:absolute;top:7px;right:10px;font-size:23px;line-height:1;background:none;border:none;color:#9a7cb1}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.soft-button{border:1.5px solid #b399c5;background:#e7d9f0;padding:10px 15px;border-radius:8px;color:#86679a;font-size:12px}.copy-field{width:100%;border:1px solid #bda3cc;background:#fffdf8;color:#826391;border-radius:7px;padding:10px;font-size:12px}@media(max-width:520px){.app{padding:17px 13px 28px}.app-header{margin-bottom:15px;padding:0 4px}h1{font-size:21px;letter-spacing:.4px}.square-button{width:32px;height:32px}.header-buttons{gap:6px}.console{padding:11px 11px 15px;border-radius:18px 18px 36px 18px;box-shadow:5px 6px 0 #100d1d}.console-top{padding-bottom:9px;gap:8px}.dashboard{padding:8px 10px;gap:8px;margin-bottom:10px}.display strong{font-size:25px}.display:nth-child(2) strong{font-size:21px}.display:nth-child(2){padding-left:9px}.board-overlay{padding:17px}.target-portrait{width:108px;height:108px;margin:14px auto 17px}.welcome h2,.result h2{font-size:21px}.welcome p,.result p{font-size:11px;margin-bottom:18px}.first-merge{margin-top:20px}.console-controls{padding:13px 0}.control-button{padding:8px 9px;min-width:64px}.console-controls p{font-size:8px;max-width:142px}.console-bottom{gap:9px}.console-bottom>span{font-size:8px}#progress-dots{gap:3px}.speaker{gap:3px;margin-right:6px}.speaker i{height:15px;width:2px}.gallery{gap:16px 8px}.gallery-image{height:55px;width:55px}.gallery-item small{left:3px}.details{margin-top:23px}.detail-panel{padding:16px}.sound-tests{gap:5px}}@media(max-width:350px){h1{font-size:18px}.app{padding:14px 10px 25px}.console{padding:10px 8px 12px}.console-bottom{gap:6px}.progress-dot{height:5px;width:5px}.console-controls p{max-width:120px;font-size:7px}.control-button{font-size:9px;min-width:57px}.gallery-image{height:48px;width:48px}.gallery-item>span{font-size:8px}.target-portrait{width:86px;height:86px;margin:12px auto}.welcome h2{font-size:19px}.welcome p{font-size:10px;line-height:1.6;margin-bottom:16px}.primary{padding:10px 24px;min-width:145px}.first-merge{margin:17px 0 7px}.first-merge img{height:25px;width:25px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

#name-form{max-width:230px;margin:0 auto;text-align:left}#name-form label{display:block;font-size:11px;font-weight:700;color:#775b89;margin-bottom:6px}#nickname{display:block;width:100%;height:41px;background:#fffcf8;border:2px solid #b499c6;border-radius:7px;padding:9px 10px;color:#4d375f;font-size:16px;outline-offset:2px}#nickname::placeholder{font-size:12px;color:#b29cc1}#name-form small{display:block;font-size:8px;color:#a18aad;margin:6px 0 13px;line-height:1.5}#name-form .primary{width:100%;min-width:0}.welcome .target-portrait{width:102px;height:102px;margin:12px auto 14px}.welcome h2{font-size:20px}.welcome p{font-size:10px;margin-bottom:16px}.first-merge{margin-top:16px}.small-button,.rank-pagination button{border:1px solid #b199c6;background:#f7effb;color:#816293;border-radius:5px;padding:5px 9px;font-size:9px}.global-note{font-size:10px;color:#9a80a9;line-height:1.6;margin:-5px 0 12px}.global-status{font-size:10px;line-height:1.6;color:#9676aa;margin:8px 0 11px;min-height:16px}.rank-pagination{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px;font-size:9px;color:#a087af}.rank-pagination button{min-width:65px}.my-global-rank{background:#f9edda;border:1px solid #d4b893;border-radius:6px;padding:9px;margin:9px 0;font-size:10px;color:#916742}.rank-row.is-mine{background:#d9cbe9;border-radius:5px;padding-left:5px;padding-right:5px}.rank-meta strong{overflow-wrap:anywhere}.retry-upload{display:block;width:100%;margin-top:12px;border:1px solid #bda2cc;background:#f4eaf8;border-radius:5px;padding:8px;color:#88639b;font-size:11px}#cloud-result{font-size:10px;line-height:1.6;margin:0 0 16px;color:#9473a6}.result .result-badge{margin-bottom:12px}.welcome-note{display:none}@media(max-width:520px){.welcome .target-portrait{width:78px;height:78px;margin:9px auto 11px}.welcome h2{font-size:18px;margin-bottom:7px}.welcome p{font-size:9px;line-height:1.6;margin-bottom:11px}.target-label{padding:3px 7px;font-size:9px}.target-label b{font-size:12px}.first-merge{margin:13px 0 0}.first-merge img{height:24px;width:24px}#name-form{max-width:220px}#name-form small{margin:4px 0 10px}#name-form .primary{padding:10px 20px}.tab{font-size:10px;padding:10px 2px}.tabs{gap:4px}}@media(max-width:350px){.welcome .target-portrait{height:60px;width:60px;margin:6px auto 8px}.welcome h2{font-size:17px;margin-bottom:5px}.welcome p{margin-bottom:7px;font-size:8px}.first-merge{display:none}#nickname{height:36px}.target-label{font-size:8px}.board-overlay{padding:10px}}

/* Keep end-of-round actions inside the board at every supported width. */
.board-overlay.is-result{display:flex;align-items:center;justify-content:center;padding:12px;background:#fbf8ef;overflow:hidden}
.is-result .result{display:flex;flex-direction:column;gap:10px;min-height:0;max-height:100%;height:100%;max-width:310px}
.result-summary{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;justify-content:safe center;gap:9px;padding:3px 8px}
.is-result .result-summary img{display:block;flex-shrink:0;width:68px;height:68px;margin:0;border-radius:11px}
.is-result .result h2{font-size:21px;line-height:1.25;margin:0;flex-shrink:0}
.is-result .result p{font-size:11px;line-height:1.5;margin:0;max-width:100%;overflow-wrap:anywhere;flex-shrink:0}
.is-result .result .result-player{color:#80668e;font-size:12px;max-width:100%}
.is-result .result .result-score{font-size:clamp(30px,8vw,43px);line-height:1.2;margin:2px 0;letter-spacing:-.5px;flex-shrink:0;max-width:100%}
.is-result .result .result-badge{font-size:10px;line-height:1.4;padding:4px 10px;margin:0;flex-shrink:0}
.is-result #cloud-result{margin:0;min-height:16px}
.result-actions{flex:0 0 auto;display:grid;gap:8px;padding:0 8px 5px;background:#fbf8ef}
.is-result .result-actions .primary{width:100%;min-width:0;padding:11px 14px;font-size:13px;line-height:1.25}
.is-result .result-actions .secondary{justify-self:center;min-height:28px;margin:0;padding:4px 8px;font-size:11px;line-height:1.5}
.rank-meta{min-width:0}.rank-number,.rank-score{flex-shrink:0}.rank-meta small{line-height:1.55}
@media(max-width:520px){.board-overlay.is-result{padding:10px}.is-result .result{gap:8px}.result-summary{gap:7px;padding:2px 6px}.is-result .result-summary img{width:52px;height:52px}.is-result .result h2{font-size:20px}.is-result .result p{font-size:10px}.is-result .result .result-player{font-size:11px}.is-result .result .result-score{font-size:36px;margin:1px 0}.is-result .result-actions .primary{padding:10px 12px}.result-actions{gap:6px;padding:0 6px 4px}}
@media(max-width:350px){.board-overlay.is-result{padding:8px}.result-summary{gap:6px;padding:1px 4px}.is-result .result-summary img{width:44px;height:44px}.is-result .result h2{font-size:18px}.is-result .result .result-score{font-size:31px}.is-result .result-actions .primary{padding:9px 10px;font-size:12px}.is-result .result .result-badge{font-size:9px}}

.dashboard .display{container-type:inline-size}.dashboard .display strong{font-size:clamp(10px,calc(100cqw / var(--digits,6) / .63),27px);letter-spacing:0}.dashboard .display:nth-child(2) strong{font-size:clamp(10px,calc(100cqw / var(--digits,6) / .63),23px)}

.traffic-note{text-align:center;font-size:9px;line-height:1.6;color:#a58fb8;margin:23px 0 0}

/* Back to the shared game collection. */
.app-header .game-back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border:2px solid #8e79aa;border-radius:8px;background:#3b304f;color:#e4d6f5;box-shadow:0 3px 0 #0f0c19;text-decoration:none;touch-action:manipulation}
.game-back svg{width:21px;height:21px}.game-back:hover{background:#514066}.game-back:active{transform:translateY(2px);box-shadow:none}.game-back:focus-visible{outline:3px solid #f6ab7f;outline-offset:3px}.app-header h1{margin-right:auto}
@media(max-width:350px){.app-header{gap:8px}.app-header .game-back{flex-basis:36px;width:36px;height:36px}}