: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(3,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}.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}.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}.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)}

/* 2048 uses the same handheld shell and color system as the merge game. */
.tabs{grid-template-columns:repeat(3,1fr)}
#board{width:100%;aspect-ratio:1;position:relative;background:var(--paper);touch-action:none;outline-offset:-4px;user-select:none;-webkit-user-select:none}
#cells,#tiles{position:absolute;inset:10px;--gap:8px}
#cells{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cell{background:#e9deef;border:1px solid #dacbe2;border-radius:8px;box-shadow:0 2px 0 #d6c5e0 inset}
.tile{position:absolute;left:0;top:0;width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);transform:translate(calc(var(--x) * (100% + var(--gap))),calc(var(--y) * (100% + var(--gap))));transition:transform .13s ease;z-index:2;will-change:transform}
.tile-inner{position:relative;width:100%;height:100%;background:#efe6f6;border:1.5px solid #b699cd;border-radius:8px;overflow:hidden;box-shadow:0 2px 0 #b89dce;display:grid;place-items:center}
.tile img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;pointer-events:none}
.tile .tile-value{position:absolute;bottom:2px;right:3px;min-width:20px;text-align:center;background:#fffcf4eb;border:1px solid #ad91c0;border-radius:4px;padding:1px 4px;font:800 clamp(9px,2.7vw,12px)/1.2 ui-monospace,monospace;color:#5f3b78}
.tile[data-level="11"] .tile-inner,.tile[data-level="12"] .tile-inner{border-color:#b78a4b;box-shadow:0 0 0 2px #edcb97 inset,0 2px 0 #b78a4b}
.tile.spawn .tile-inner{animation:appear .16s ease both}.tile.merged .tile-inner{animation:pop .19s ease both}
@keyframes appear{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes pop{0%{transform:scale(.85)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.board-instructions{text-align:center;font-size:10px;line-height:1.5;color:#614d78;margin:12px 0 9px;letter-spacing:.5px}
.round-info{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#624b78;border-bottom:1px solid #9276ad55;padding:0 2px 9px}.round-info #player-name{overflow-wrap:anywhere;min-width:0}.round-info>span:last-child{white-space:nowrap}.round-info b{font:700 11px ui-monospace,monospace}
.console-controls{gap:9px;padding:12px 0 15px}.direction-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.direction-pad button{width:31px;height:32px;border:1.5px solid #806095;border-radius:5px;background:#e6d6f2;box-shadow:0 2px 0 #8f70ad;font-size:17px;font-weight:700;color:#604674;touch-action:manipulation}
.welcome .target-portrait{width:66px;height:66px;margin:10px auto}.welcome h2{font-size:19px;margin-bottom:7px}.welcome p{font-size:10px;margin-bottom:10px}.target-label{padding:3px 8px}#name-form{max-width:220px}#name-form small{font-size:9px;margin:5px 0 10px}#name-form .primary{padding:10px 16px}
.board-overlay{padding:14px;background:#fbf8eff5}.board-overlay.is-result{padding:14px}.is-result .result{gap:8px}.is-result .result-summary img{width:55px;height:55px}.is-result .result-summary{gap:6px}.is-result .result .result-score{font-size:34px}.is-result .result h2{font-size:20px}.is-result .result .result-player{font-size:12px}.result-actions{padding:0 6px 4px}.result-actions .primary{min-width:0}.sound-tests{grid-template-columns:repeat(3,1fr)}
.display:first-child{position:relative}#score-gain{position:absolute;right:0;top:5px;color:#f7c9a8;font:700 12px ui-monospace,monospace;opacity:0;pointer-events:none}#score-gain.visible{animation:gain .65s ease both}@keyframes gain{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-25px)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:350px){#cells,#tiles{inset:7px;--gap:5px}.cell,.tile-inner{border-radius:6px}.board-overlay{padding:9px}.welcome .target-portrait{width:44px;height:44px;margin:5px auto}.welcome h2{font-size:16px;margin-bottom:4px}.welcome p{font-size:8px;margin-bottom:5px}.target-label{font-size:8px;padding:2px 6px}.target-label b{font-size:11px}#nickname{height:34px}#name-form label{margin-bottom:4px;font-size:10px}#name-form small{font-size:8px;margin:3px 0 6px}#name-form .primary{padding:8px 12px;font-size:12px}.direction-pad{gap:3px}.direction-pad button{height:29px;width:25px;font-size:15px}.console-controls{gap:5px}.control-button{padding:8px 6px;min-width:52px}.is-result .result-summary img{width:34px;height:34px}.is-result .result h2{font-size:17px}.is-result .result .result-score{font-size:27px}.is-result .result p{font-size:9px}.is-result .result-summary{gap:4px}.is-result .result{gap:5px}.result-actions{gap:4px}.is-result .result-actions .primary{padding:8px 10px}.is-result .result-actions .secondary{min-height:24px;padding:2px 6px}.board-overlay.is-result{padding:8px}}

.is-result #cloud-result{font-size:9px;line-height:1.4;min-height:0;margin:0}.rank-meta small{overflow-wrap:anywhere}

/* Keep transformed board tiles below every start and result overlay. */
.board-frame > #board{z-index:0}
.board-frame > .board-overlay{z-index:5}

/* Group round actions separately from a larger, tactile direction pad. */
.console-controls{align-items:center;gap:16px;padding:14px 2px 17px}
.round-actions{display:flex;align-items:center;gap:10px;min-width:0}
.round-actions .control-button{min-height:40px;min-width:64px;padding:10px 9px}
.direction-pad{flex:none;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:5px}
.direction-pad button{width:100%;height:100%;border-radius:8px;font-size:21px;line-height:1;font-weight:700;box-shadow:0 3px 0 #8f70ad}
.direction-pad [data-direction="up"]{grid-column:2;grid-row:1}
.direction-pad [data-direction="left"]{grid-column:1;grid-row:2}
.direction-pad [data-direction="down"]{grid-column:2;grid-row:2}
.direction-pad [data-direction="right"]{grid-column:3;grid-row:2}
@media(max-width:350px){.console-controls{gap:10px;padding:12px 0 15px}.round-actions{gap:8px}.round-actions .control-button{min-width:50px;min-height:38px;padding:9px 6px;font-size:9px}.direction-pad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px)}.direction-pad button{font-size:19px}}
@media(max-width:300px){.console-controls{flex-wrap:wrap;justify-content:center;gap:14px}.round-actions{width:100%;justify-content:center}}

/* Fast taps operate controls without triggering the browser's double-tap zoom. */
.app,dialog,button{touch-action:manipulation}
.result-summary{touch-action:pan-y pinch-zoom}

.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}}