:root{color-scheme:dark;--bg:#10191c;--panel:#162226;--text:#ecf0e9;--muted:#8faaa9;--mint:#b6efcf;--line:#2b3a3c}
*{box-sizing:border-box}
html{touch-action:manipulation;overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;overscroll-behavior-y:none}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.app{max-width:1200px;margin:auto;padding:0 30px}
header{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0;text-decoration:none;color:var(--text);font-size:18px;font-weight:700;letter-spacing:2px;white-space:nowrap}
.brand-mark{display:inline-flex;color:var(--mint)}
.brand-cn{color:var(--muted);font-size:13px;font-weight:400;letter-spacing:1px;margin-left:8px;padding-left:18px;border-left:1px solid var(--line)}
.header-actions{display:flex;gap:7px;flex-shrink:0}
.icon-button{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:transparent;color:#b9c8c4}
.icon-button:hover{border-color:var(--mint);color:var(--mint)}
.icon{display:inline-block;flex-shrink:0;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;pointer-events:none}
.brand-mark .icon{width:25px;height:25px}.icon-button .icon{width:19px;height:19px}
main{display:grid;grid-template-columns:minmax(180px,1fr) minmax(360px,480px) minmax(160px,190px);gap:30px;align-items:start;justify-content:center;padding:18px 0}
main>*{min-width:0}
.intro{padding-top:55px}
.eyebrow{color:var(--mint);font-size:10px;letter-spacing:1.1px;line-height:1.8}
.eyebrow span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:6px}
h1{font-size:32px;line-height:1.6;font-weight:500;letter-spacing:1px;margin:18px 0 14px}h1>span{color:var(--mint)}
.intro-copy{color:var(--muted);font-size:14px;line-height:1.9}
.rule{margin-top:32px;max-width:220px}.rule-number{font-size:12px;letter-spacing:1px;color:var(--muted)}
.rule-line{display:flex;align-items:center;gap:5px;width:150px;height:36px;margin-top:10px}.rule-line i{height:18px;width:2px;background:#668a80}.rule-line span{flex:1;height:8px;background:var(--mint);border-radius:2px}
.rule p{font-size:13px;line-height:1.9;color:var(--muted);margin-top:3px}.rule strong{font-weight:400;color:#d5dfda}
.color-dots{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:30px}.color-dots i{width:7px;height:7px;background:#eb897a;border-radius:50%}.color-dots i:nth-child(2){background:#e9ca72}.color-dots i:nth-child(3){background:#9adbbb}.color-dots i:nth-child(4){background:#93bcee}.color-dots span{font-size:11px;color:var(--muted);margin-left:3px}
.play-column{width:100%;max-width:480px;justify-self:center}
.play-column,.board-wrap{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.board-top,.board-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);height:24px;letter-spacing:.4px;white-space:nowrap}
.board-top>span:first-child{display:flex;align-items:center;gap:6px}.board-top i{width:5px;height:5px;border-radius:50%;background:var(--mint)}
.board-wrap{width:100%;aspect-ratio:2/3;position:relative;border:1px solid #40504e;border-radius:7px;background:#0b1215;box-shadow:0 18px 55px #0003;overflow:hidden}
#board{width:100%;height:100%;display:block;image-rendering:pixelated;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}#board:active{cursor:grabbing}
.board-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 35px #0002}
.board-bottom{height:22px;font-size:11px}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0b12154a;backdrop-filter:blur(1.5px);overflow-y:auto;touch-action:pan-y}
.overlay.hidden{display:none}
.overlay-content{text-align:center;min-width:0;width:min(100%,350px);padding:24px}
.tiny{font-size:11px;letter-spacing:3px;color:var(--mint)}
h2{font-size:26px;font-weight:500;letter-spacing:1px;margin:14px 0}
.overlay-content>p{font-size:14px;line-height:1.7;color:#afc2be;margin:0 0 20px;overflow-wrap:anywhere}
.start{border:0;border-radius:5px;background:var(--mint);color:#14372b;font-size:15px;font-weight:600;padding:13px 17px;width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:1.5;box-shadow:0 4px 25px #a2eac718;transition:background .2s}
.start:hover{background:#cef9df}
.overlay-tip{display:block;margin-top:14px;font-size:11px;color:#93aba6;line-height:1.7}
.difficulty-picker{border:0;min-width:0;margin:0 0 17px;padding:0;text-align:left}
.difficulty-picker legend{font-size:12px;color:var(--muted);margin-bottom:8px}
.difficulty-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:8px}
.difficulty-options label{position:relative;display:flex;min-width:0;cursor:pointer}
.difficulty-options input{position:absolute;opacity:0;width:1px;height:1px}
.difficulty-options label>span{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:5px;padding:11px;border:1px solid #395049;background:#13211fea;border-radius:5px;line-height:1.5}
.difficulty-options b{font-size:14px;font-weight:500;color:#c0cec9;white-space:nowrap}
.difficulty-options small{font-size:12px;color:var(--muted);line-height:1.5;white-space:nowrap}
.difficulty-options input:checked+span{border-color:var(--mint);background:#243e33}.difficulty-options input:checked+span b{color:var(--mint)}.difficulty-options input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}
.overlay .difficulty-picker p{font-size:12px;color:var(--muted);margin:9px 0 0;line-height:1.6;overflow-wrap:anywhere}
aside{padding-top:24px;min-width:0}
.score-panel{padding:18px 14px;background:var(--panel);border:1px solid var(--line);border-radius:7px;min-width:0}
.label{font-size:12px;letter-spacing:.3px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;line-height:1.5}.label>span{font-size:10px;letter-spacing:1px}
#score{--score-digits:5;font-size:clamp(15px,calc(190px / var(--score-digits)),34px);font-weight:400;color:var(--mint);font-family:monospace;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;margin:12px 0 17px;line-height:1.2}
.best{display:flex;justify-content:space-between;gap:5px;font-size:11px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);min-width:0;align-items:center}.best>span{white-space:nowrap}.best b{color:#dce6dd;font-family:monospace;font-variant-numeric:tabular-nums;font-weight:400;font-size:12px;min-width:0;overflow-wrap:anywhere;text-align:right}
.next-panel{padding:20px 12px 5px;min-width:0}.next-panel canvas{display:block;width:100%;height:90px;object-fit:contain;image-rendering:pixelated}.next-divider{height:1px;background:var(--line);margin-bottom:16px}
.stat-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:16px;font-size:12px;color:var(--muted)}.stat-row b{color:var(--text);font-family:monospace;font-size:14px;font-weight:400;overflow-wrap:anywhere}
.keyboard{border-top:1px solid var(--line);padding:19px 0 0;margin:5px 12px 0}.keyboard .label{margin-bottom:14px}.keyboard>div:not(.label){display:flex;justify-content:space-between;gap:5px;align-items:center;font-size:11px;color:var(--muted);margin-bottom:9px}
kbd{display:inline-flex;justify-content:center;align-items:center;border:1px solid #344446;border-bottom-width:2px;border-radius:4px;min-width:22px;height:22px;font:11px monospace;color:#c2d0c9}kbd .icon{width:14px;height:14px}.space{padding:0 5px;font-size:9px}
.aside-note{text-align:center;color:#718783;font-size:11px;line-height:1.7;margin-top:18px}
.gesture-hint{font-size:11px;color:var(--muted);text-align:center;margin:0 0 7px;letter-spacing:.2px;line-height:1.5}


.toast{position:absolute;top:35%;left:0;right:0;text-align:center;font-size:28px;letter-spacing:2px;font-weight:700;color:var(--mint);text-shadow:0 3px 20px #000;pointer-events:none;opacity:0;transition:opacity .2s,transform .3s;transform:translateY(10px)}.toast.show{opacity:1;transform:translateY(0)}
footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;padding:16px 0;font-size:10px;letter-spacing:1px;color:#738c87}
dialog{max-width:440px;width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;border:1px solid #435a51;border-radius:12px;background:#172528;color:var(--text);padding:28px}dialog::backdrop{background:#030b0dc9;backdrop-filter:blur(5px)}dialog h2{font-size:23px}dialog p{font-size:15px;line-height:1.8;color:#adc1ba}dialog strong{color:var(--mint);font-weight:500}.close{position:absolute;right:10px;top:7px;display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--muted)}dialog .start{margin-top:20px;justify-content:center}.help-mobile{font-size:13px}
@media(min-width:901px){.play-column{max-width:min(480px,calc(max(540px,100svh - 116px)*.666667))}.gesture-hint{display:none}}
@media(max-width:1050px) and (min-width:901px){.app{padding:0 22px}main{grid-template-columns:minmax(150px,1fr) minmax(340px,430px) 160px;gap:22px}.intro{padding-top:42px}h1{font-size:28px}.eyebrow{font-size:9px}.color-dots span{width:100%;margin:4px 0 0}.best{flex-wrap:wrap}.best b{margin-left:auto}}
@media(max-width:900px) and (min-width:601px){.app{max-width:790px;padding:0 22px}header{height:56px}.intro{display:none}main{grid-template-columns:minmax(0,480px) 155px;gap:22px;padding:14px 0}.play-column{max-width:480px}.score-panel{padding:16px 12px}.best{flex-direction:column;align-items:flex-start;gap:6px}.best b{text-align:left}.keyboard{margin:0 6px}.next-panel{padding:18px 7px 5px}.brand-cn{font-size:12px}}
@media(max-width:600px){
 .app{max-width:460px;padding:0 9px;padding-bottom:env(safe-area-inset-bottom,0px)}
 header{height:44px;gap:8px}.brand{font-size:15px;gap:8px;letter-spacing:1.7px}.brand-cn{display:none}.brand-mark .icon{width:22px;height:22px}.header-actions{gap:3px}.icon-button{width:36px;height:36px;border-color:transparent}.icon-button .icon{width:18px;height:18px}
 main{display:flex;flex-direction:column;padding:4px 0 6px;gap:4px}.intro{display:none}
 aside{order:1;width:100%;height:40px;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 74px;gap:12px;align-items:center}
 .score-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1px 12px;align-items:center;padding:0;background:none;border:0;border-radius:0}
 .score-panel .label{grid-column:1;font-size:11px;line-height:1.2;letter-spacing:0}
 #score{grid-column:1;font-size:clamp(15px,calc(140px / var(--score-digits)),24px);line-height:1.1;margin:2px 0 0}
 .best{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:0;border:0;font-size:10px;line-height:1.2;letter-spacing:0}.best b{font-size:clamp(11px,calc(115px / var(--best-digits,5)),17px);white-space:nowrap;line-height:1.1}
 .next-panel{position:relative;width:74px;height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:0 0 0 10px;border-left:1px solid var(--line)}
 .next-panel .label{font-size:10px;white-space:nowrap;writing-mode:horizontal-tb;line-height:1;letter-spacing:0}.next-panel .label span{display:none}.next-panel canvas{width:58px;height:27px;object-fit:contain}
 .next-divider,.stat-row,.keyboard,.aside-note,footer{display:none}
 .play-column{order:2;width:100%;max-width:none}
 .board-top{font-size:10px;height:18px;letter-spacing:0}
 .board-wrap{--play-height:max(320px,calc(100svh - 122px - env(safe-area-inset-bottom,0px)));width:min(100%,calc(var(--play-height)*.666667));margin:0 auto;border-radius:6px}
 .board-bottom,.gesture-hint{display:none}
 
 .overlay-content{width:min(100%,324px);padding:20px}.overlay-content>.tiny{display:none}.overlay h2{font-size:23px;margin:0 0 10px}.overlay-content>p{font-size:12px;line-height:1.6;margin-bottom:16px}
 .difficulty-picker{margin-bottom:14px}.difficulty-picker legend{font-size:11px;margin-bottom:7px}.difficulty-options{gap:8px}.difficulty-options label>span{padding:10px;min-height:65px}.difficulty-options b{font-size:14px}.difficulty-options small{font-size:12px;letter-spacing:0}.overlay .difficulty-picker p{font-size:11px;margin-top:9px;line-height:1.6}
 .start{font-size:14px;min-height:44px;padding:11px 14px}.overlay-tip{font-size:10px;margin-top:12px;line-height:1.6;letter-spacing:0}
}
@media(max-width:350px){.app{padding-inline:7px}.brand{font-size:14px;letter-spacing:1px}.overlay-content{padding:16px}.difficulty-options label>span{padding:8px}.difficulty-options small{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}