:root{--teal:#009688;--case:#efcc19;--lcd:#9ead86;--pixel:#879372;--ink:#000;--blue:#5a65f1;--green:#2dc421;--red:#dd1a1a;--console-scale:1;--console-extra:0px}
*{box-sizing:border-box}body{margin:0;background:var(--teal);color:var(--ink);font:20px/1 "HanHei SC",PingHei,"PingFang SC",STHeitiSC-Light,"Helvetica Neue",Helvetica,Arial,sans-serif}button,a,select,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,#matrix:focus-visible{outline:3px solid #fff;outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:12px;z-index:5;padding:12px 18px;border-radius:6px;background:#fff;color:#004f48;transform:translateY(-160%)}.skip-link:focus{transform:none}
#game-stage{position:relative;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100svh;min-height:320px;overflow:hidden}
#console-wrap{position:relative;flex:none;width:640px;height:100%}
#console{position:relative;width:640px;height:calc(960px + var(--console-extra));padding-top:calc(42px + var(--console-extra)/3);background:var(--case);border-radius:20px;box-shadow:inset 0 0 10px #fff;transform:scale(var(--console-scale));transform-origin:top left;user-select:none;-webkit-user-select:none}
.console-frame{position:relative;width:480px;height:568px;margin:0 80px;padding:45px 0 35px;border:solid #000;border-width:0 10px 10px}
.console-title{position:absolute;left:0;top:-8px;width:100%;margin:0;font-size:24px;line-height:24px;font-weight:400;text-align:center}
.top-bars{position:absolute;top:0;left:0;display:flex;justify-content:space-between;width:100%;height:10px;overflow:hidden}.bar-cluster{display:flex;gap:10px}.bar-cluster i{display:block;width:10px;height:10px;background:#000}.bar-cluster:first-child i:first-child,.bar-cluster:last-child i:last-child{width:40px}
.ornament{position:absolute;top:20px;width:44px;height:506px}.ornament-right{right:-70px}.ornament-left{left:-70px;transform:scaleX(-1)}.ornament-shape{display:grid;grid-template-columns:repeat(2,22px);grid-auto-rows:22px;width:44px;height:66px;margin-bottom:22px}.ornament-shape i{display:block;width:20px;height:20px;border:2px solid #000;padding:2px}.ornament-shape i:after{content:"";display:block;width:12px;height:12px;background:#000}.ornament-shape i:nth-child(1){grid-column:1;grid-row:1}.ornament-shape i:nth-child(2){grid-column:1;grid-row:2}.ornament-shape i:nth-child(3){grid-column:2;grid-row:2}.ornament-shape i:nth-child(4){grid-column:2;grid-row:3}
.shape-t i:nth-child(1){grid-column:2}.shape-t-reverse i:nth-child(4){grid-column:1}.shape-o{height:44px}.shape-o i:nth-child(2){grid-column:2;grid-row:1}.shape-o i:nth-child(3){grid-column:1}.shape-o i:nth-child(4){grid-column:2;grid-row:2}.shape-l i:nth-child(2){grid-column:2;grid-row:1}.shape-l i:nth-child(3){grid-column:1;grid-row:2}.shape-l i:nth-child(4){grid-column:1;grid-row:3}.shape-i{height:88px;margin-bottom:0}.shape-i i:nth-child(n){grid-column:2}.shape-i i:nth-child(2){grid-row:2}.shape-i i:nth-child(3){grid-row:3}.shape-i i:nth-child(4){grid-row:4}
.lcd-outer{position:relative;width:390px;height:478px;margin:0 auto;border:5px solid;border-color:#987f0f #fae36c #fae36c #987f0f}.lcd-inner{width:380px;height:468px;padding:8px;border:2px solid #494536;background:var(--lcd)}
.board-stack{position:relative;width:228px;height:448px}#matrix{display:grid;grid-template-columns:repeat(10,22px);grid-template-rows:repeat(20,22px);width:228px;height:448px;padding:3px 1px 1px 3px;border:2px solid #000;outline-offset:4px}
.cell{display:block;width:20px;height:20px;margin:0 2px 2px 0;padding:2px;border:2px solid var(--pixel)}.cell:after{content:"";display:block;width:12px;height:12px;background:var(--pixel)}.cell.on,.cell.active{border-color:#000}.cell.on:after,.cell.active:after{background:#000}.cell.danger{border-color:#560000}.cell.danger:after{background:#560000}.cell.clearing{animation:clear-border 200ms steps(1,end) 3}.cell.clearing:after{animation:clear-center 200ms steps(1,end) 3}
@keyframes clear-border{0%,100%{border-color:var(--pixel)}50%{border-color:#000}}@keyframes clear-center{0%,100%{background:var(--pixel)}50%{background:#000}}
.hud{position:absolute;top:0;left:257px;width:108px;height:344px}.hud p{height:57px;margin:0;padding:10px 0 0;font-size:20px;line-height:47px;white-space:nowrap}.stat{height:81px}.stat>.digital-display{float:right}.digital-display{display:flex;height:24px}.digit{position:relative;display:inline-block;flex:none;width:14px;height:24px}.segment{position:absolute;display:block;background:var(--pixel)}.segment.lit{background:#000}.seg-a,.seg-d,.seg-g{left:2px;width:10px;height:3px;clip-path:polygon(15% 0,85% 0,100% 50%,85% 100%,15% 100%,0 50%)}.seg-a{top:1px}.seg-g{top:10.5px}.seg-d{bottom:1px}.seg-b,.seg-c,.seg-e,.seg-f{width:3px;height:9px;clip-path:polygon(0 15%,50% 0,100% 15%,100% 85%,50% 100%,0 85%)}.seg-b,.seg-c{right:1px}.seg-e,.seg-f{left:1px}.seg-b,.seg-f{top:2px}.seg-c,.seg-e{bottom:2px}
#next-matrix{display:grid;grid-template-columns:repeat(4,22px);grid-template-rows:repeat(2,22px);float:right;width:88px;height:44px}.lcd-status{position:absolute;top:426px;left:0;width:114px;height:24px}#sound-indicator{position:absolute;top:2px;left:-12px;width:25px;height:21px;overflow:visible}.speaker{fill:#000}.sound-waves,.sound-mute{fill:none;stroke:#000;stroke-width:2;stroke-linecap:square}.sound-mute{display:none}#sound-indicator.muted .speaker{fill:var(--pixel)}#sound-indicator.muted .sound-waves{display:none}#sound-indicator.muted .sound-mute{display:block;stroke:var(--pixel)}#pause-indicator{position:absolute;top:3px;left:18px;display:flex;gap:4px;width:20px;height:18px;padding:1px 3px;animation:pause-blink 1000ms steps(1,end) infinite}#pause-indicator i{display:block;width:5px;height:16px;background:#000}.clock{position:absolute;top:0;right:0;display:flex;height:24px}.clock-colon{position:relative;display:block;width:14px;height:24px;animation:pause-blink 2000ms steps(1,end) infinite}.clock-colon:before,.clock-colon:after{content:"";position:absolute;left:6px;width:3px;height:3px;background:#000}.clock-colon:before{top:6px}.clock-colon:after{top:15px}@keyframes pause-blink{0%,100%{opacity:1}50%{opacity:.16}}
#ready-overlay{position:absolute;top:90px;left:2px;width:224px;height:200px;text-align:center;pointer-events:none;overflow:hidden}.ready-mark{display:block;width:80px;height:86px;margin:0 auto;color:#000}#ready-overlay p{position:absolute;top:100px;left:0;width:100%;margin:0;font:20px/28px "Times New Roman",serif;letter-spacing:6px;text-shadow:1px 1px 1px #ffffff59}
.control-panel{position:relative;width:580px;height:330px;margin:calc(20px + var(--console-extra)/3) 30px 0}.action-button{position:absolute;display:block;margin:0;padding:0;border:0;background:transparent;color:#111;font-size:20px;line-height:32px;text-align:center;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:none}.key-face{position:relative;display:block;width:100px;height:100px;border:1px solid #000;border-radius:50%;box-shadow:0 3px 3px #0003}.key-face:before,.key-face:after{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;border-radius:50%;pointer-events:none}.key-face:before{box-shadow:inset 0 5px 10px #fffc}.key-face:after{box-shadow:inset 0 -5px 10px #000c}.key-label{display:block}.key-blue .key-face{background:var(--blue)}.key-green .key-face{background:var(--green)}.key-red .key-face{background:var(--red)}.pressed .key-face:before{box-shadow:inset 0 -3px 6px #fff9}.pressed .key-face:after{box-shadow:inset 0 5px 5px #0009}.action-button:disabled{cursor:default}
.key-rotate{left:374px;top:0;width:100px;height:100px}.key-rotate .key-label{position:absolute;top:5px;left:102px}.key-down{left:374px;top:180px}.key-left{left:284px;top:90px}.key-right{left:464px;top:90px}.key-drop{left:52px;top:100px}.key-drop .key-face{width:160px;height:160px}.small-button{font-size:16px;line-height:25.6px}.small-button .key-face{width:52px;height:52px;box-shadow:1px 1px 1px #0003}.small-button .key-face:before{box-shadow:inset 0 3px 6px #fffc}.small-button .key-face:after{box-shadow:inset 0 -3px 6px #000c}.small-button.pressed .key-face:before{box-shadow:inset 0 -1px 2px #fff9}.small-button.pressed .key-face:after{box-shadow:inset 0 3px 3px rgba(0,0,0,.7)}.key-reset{left:196px;top:0}.key-sound{left:106px;top:0}.key-pause{left:16px;top:0}
.direction-rose{position:absolute;top:0;left:0;width:580px;height:330px;pointer-events:none}.direction-rose i{position:absolute;display:block;width:0;height:0;border:8px solid transparent}.direction-rose .arrow-up{top:101px;left:416px;border-bottom-color:#111;transform:scaleY(2)}.direction-rose .arrow-down{top:163px;left:416px;border-top-color:#111;transform:scaleY(2)}.direction-rose .arrow-left{top:132px;left:386px;border-right-color:#111;transform:scaleX(2)}.direction-rose .arrow-right{top:132px;left:446px;border-left-color:#111;transform:scaleX(2)}
.stage-copy{position:absolute;top:48px;left:32px;width:260px;color:#003d37}.stage-copy h2{margin:0 0 22px;font-size:26px;line-height:1.3;color:#000}.stage-copy p{margin:0 0 22px;font-size:16px;line-height:1.8}.stage-copy a{color:#004f48;font-size:16px;line-height:1.6;text-underline-offset:4px}.desktop-keys{position:absolute;inset:auto 24px 5%;pointer-events:none}.desktop-keys button{position:relative;border:0;border-radius:4px;background:#364d4b;color:#acc3c1;box-shadow:inset 0 5px 10px #ffffff26,inset 0 -5px 10px #00000026;font-size:16px;pointer-events:auto;-webkit-tap-highlight-color:transparent;touch-action:none}.desktop-keys button.pressed{box-shadow:inset 0 4px 10px #0004}.desktop-drop{position:absolute!important;bottom:0;left:0;width:260px;height:80px;letter-spacing:2px}.desktop-directions{display:grid;grid-template-columns:repeat(3,72px);grid-template-rows:60px 54px;gap:4px 8px;width:232px;margin-left:auto}.desktop-up{grid-column:2;grid-row:1}.desktop-directions button:nth-child(2){grid-column:1;grid-row:2}.desktop-directions button:nth-child(3){grid-column:2;grid-row:2}.desktop-directions button:nth-child(4){grid-column:3;grid-row:2}
.game-information,.document{width:min(100% - 40px,800px);margin:0 auto;padding:52px 0;color:#063e39;line-height:1.85}.game-information h1,.document h1{margin:0 0 24px;color:#001f1c;font-size:36px;line-height:1.35}.game-information h2,.document h2{margin:30px 0 10px;color:#002d28;font-size:23px;line-height:1.45}.game-information p,.document p,.document li{font-size:17px}.game-information p{margin:10px 0}.game-information .lead{font-size:19px}.game-information a,.document a,.site-footer a{color:#003e38;text-underline-offset:4px}.information-links{display:flex;flex-wrap:wrap;gap:12px 24px}.site-footer{width:min(100% - 40px,960px);margin:0 auto;padding:24px 0 36px;border-top:1px solid #005e5540;color:#003d37;font-size:14px;line-height:1.8}.footer-brand{font-size:18px;font-weight:700;text-decoration:none}.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin:14px 0}.site-footer p{margin:12px 0 0}.noscript-notice{width:min(100% - 40px,800px);margin:0 auto 24px;font-size:16px;line-height:1.8;color:#002d28}.noscript-notice a{color:inherit}
@media(max-width:1199px){.stage-copy,.desktop-keys{display:none}}@media(max-width:600px){.game-information,.document{padding:36px 0}.game-information h1,.document h1{font-size:28px}.game-information h2,.document h2{font-size:21px}.game-information p,.document p,.document li{font-size:16px}.game-information .lead{font-size:17px}.site-footer nav{gap:8px 18px}}
@media(prefers-reduced-motion:reduce){#pause-indicator,.clock-colon{animation:none}}
.landscape-utilities{display:none}
@media(orientation:landscape) and (max-height:500px){.desktop-keys{--helper-width:calc((100vw - 100svh*2/3)/2 - 32px);display:block;inset:auto 16px 16px}.desktop-drop{width:var(--helper-width)}.desktop-directions{width:var(--helper-width);grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.landscape-utilities{position:absolute;left:0;bottom:96px;display:grid;width:var(--helper-width);grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.landscape-utilities button{min-height:48px;font-size:14px}}
@media(orientation:landscape) and (max-height:500px) and (max-width:559px){.desktop-drop{width:104px;height:48px}.desktop-directions{width:104px;grid-template-columns:repeat(2,50px);grid-template-rows:44px 44px}.desktop-up{grid-column:1;grid-row:1}.desktop-directions button:nth-child(2){grid-column:1;grid-row:2}.desktop-directions button:nth-child(3){grid-column:2;grid-row:2}.desktop-directions button:nth-child(4){grid-column:2;grid-row:1}.landscape-utilities{bottom:64px;width:104px;grid-template-columns:1fr}.landscape-utilities button{min-height:44px}}