@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#171e23;--panel:#1d252b;--line:#333d42;--cream:#ede9dc;--muted:#828d91;--orange:#f3a35e;--mono:'IBM Plex Mono',monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--cream);font-family:'Noto Sans KR',sans-serif;font-size:13px;background-image:radial-gradient(#56616a15 1px,transparent 1px);background-size:5px 5px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--orange);outline-offset:5px}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5.6%;background:#171e23}.brand{color:var(--cream);text-decoration:none;display:flex;align-items:center;font-family:var(--mono);font-weight:700;font-size:23px;letter-spacing:-1px;gap:13px}.brand-icon{display:grid;grid-template-columns:repeat(3,7px);grid-template-rows:repeat(2,7px);gap:2px;width:25px}.brand-icon i{background:var(--orange)}.brand-icon i:first-child{grid-column:2}.brand-icon i:nth-child(2){grid-row:2}.brand-icon i:nth-child(3){grid-row:2}.brand-icon i:nth-child(4){grid-row:2}.brand-badge{font-size:9px;font-weight:500;letter-spacing:1px;border:1px solid #665144;color:var(--orange);padding:4px 6px;margin-left:2px}.top-right{display:flex;align-items:center;gap:10px;font:10px var(--mono);color:#a2aaad;letter-spacing:.5px}.online-dot{width:5px;height:5px;background:#a7c2a7;border-radius:50%}.icon-button{margin-left:23px;width:36px;height:36px;background:transparent;border:1px solid var(--line);color:#b5bebf;border-radius:4px}.icon-button svg{width:19px;height:19px;vertical-align:middle}main{max-width:1060px;padding:0 28px;margin:auto}.intro{padding:46px 0 32px;display:flex;align-items:center;justify-content:space-between}.eyebrow{font:10px var(--mono);letter-spacing:2px;color:var(--orange);display:flex;align-items:center;gap:9px;margin:0 0 14px}.eyebrow span{width:6px;height:6px;background:var(--orange)}h1{font-size:33px;letter-spacing:-1.7px;line-height:1.4;margin:0;font-weight:800}h1 em{font-style:normal;color:var(--orange)}.subtitle{font-size:12px;color:#a1a8aa;margin:10px 0 0}.edition{text-align:right;font:11px/1.9 var(--mono);color:#a5acab;letter-spacing:1px}.edition b{font-size:9px;color:#646e73;font-weight:400}.arcade-layout{display:grid;grid-template-columns:240px 342px 240px;gap:28px;justify-content:center;align-items:start}.panel{border:1px solid var(--line);background:var(--panel);border-radius:5px;overflow:hidden}.panel-heading{padding:18px 19px;display:flex;align-items:center;justify-content:space-between;font:11px var(--mono);letter-spacing:1.5px;color:#c9cfca}.panel-heading>span{font-size:10px;color:#6b777c}.stat-main{padding:8px 20px 25px}.stats label{font:10px var(--mono);letter-spacing:1.5px;color:var(--muted)}#score{font:38px var(--mono);letter-spacing:-1px;color:var(--orange);margin-top:8px}.stat-row{display:flex;padding:0 20px}.stat-row>div{width:50%}.stat-row>div+div{border-left:1px solid var(--line);padding-left:23px}.stat-row strong{display:block;font:29px var(--mono);margin-top:7px}.level-progress{height:4px;background:#343d41;margin:21px 20px 0}.level-progress div{height:100%;width:0;background:var(--orange);transition:width .2s}.stats>p{color:#7e8a8e;font-size:10px;margin:9px 20px 20px}.best{background:#202a2f;border-top:1px solid var(--line);padding:17px 19px;display:flex;justify-content:space-between;align-items:center}.best span{font:9px var(--mono);color:#acb5ae}.best b{font:14px var(--mono);color:#d8ddcf}.hold-panel{margin-top:18px}.hold-panel .panel-heading{padding-bottom:6px}.key,kbd{font:10px var(--mono);padding:3px 6px;border:1px solid #455056;border-bottom-width:2px;border-radius:3px;background:#273138;color:#c1c8c7}.panel-heading .key{color:#adb7b9}.hold-panel canvas{display:block;margin:auto;width:210px;height:96px}.hold-panel p{text-align:center;color:#7e8a8e;font-size:10px;margin:0 0 19px}.tip{display:flex;gap:13px;padding:22px 10px;color:#8b9699;align-items:center}.tip>span{color:var(--orange);font-size:22px}.tip p{font-size:11px;line-height:1.9;margin:0}.tip b{color:#bac1be;font-weight:500}.game-machine{border:1px solid #566067;border-radius:7px;background:#222b31;padding:0 19px;box-shadow:0 12px 28px #0003,inset 0 0 0 4px #283238}.machine-top{height:40px;display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;color:#8c9a9d}.machine-top>span:first-child{display:flex;align-items:center;gap:6px;color:#bdc9b8}.machine-top i{width:5px;height:5px;background:#a6bfa0;border-radius:50%;box-shadow:0 0 7px #a6bfa04d}.board-wrap{position:relative;border:1px solid #070e12;background:#10171d;box-shadow:0 0 0 3px #1a2227}.board-wrap>canvas{display:block;width:300px;height:600px;max-width:100%}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(#10171dba,#10171def);text-align:center}.overlay.hidden{display:none}.mini-block{display:grid;grid-template-columns:repeat(3,19px);grid-template-rows:repeat(2,19px);gap:3px;margin-bottom:30px;transform:rotate(-9deg)}.mini-block i{background:var(--orange);border:2px solid #ffc285;box-shadow:inset -3px -3px #b56938}.mini-block i:first-child{grid-column:2}.mini-block i:nth-child(n+2){grid-row:2}.overlay-eyebrow{font:8px var(--mono);letter-spacing:1.5px;color:#a5afab;margin:0 0 15px}.overlay h2{font:700 34px/1.25 var(--mono);letter-spacing:-1px;margin:0;text-shadow:3px 3px #404a45}.overlay>p:not(.overlay-eyebrow){font-size:11px;color:#919e9f;line-height:1.9;margin:22px 0 29px}.primary-button{background:var(--orange);color:#27231d;border:1px solid #ffc38a;border-bottom:4px solid #b77640;border-radius:3px;width:214px;padding:13px 18px;font-size:13px;font-weight:700;display:flex;justify-content:space-between;box-shadow:0 4px 15px #f3a35e10}.primary-button:hover{background:#ffb77a}.primary-button:active{transform:translateY(2px);border-bottom-width:2px}.primary-button span{font-size:17px}.overlay-hint{font-size:9px;color:#737f83;margin-top:15px}.machine-bottom{display:flex;justify-content:space-between;align-items:center;height:33px;font:7px var(--mono);letter-spacing:.7px;color:#7d898e}.machine-bottom>span:first-child{display:flex;gap:5px;align-items:center}.machine-bottom i{width:5px;height:5px;background:var(--orange)}.next-panel .panel-heading{padding-bottom:0}.next-block{position:relative}.next-block canvas{display:block;margin:auto}.next-block>span{position:absolute;bottom:13px;right:18px;font:8px var(--mono);color:#707e85}.next-small{display:flex;justify-content:center;border-top:1px solid var(--line);background:#1a2228;padding:5px}.next-small canvas+canvas{border-left:1px solid var(--line)}.controls{margin-top:18px;padding-bottom:10px}.controls .panel-heading{padding-bottom:14px}.controls>div:not(.panel-heading){display:flex;justify-content:space-between;align-items:center;margin:0 19px;padding:9px 0;font-size:11px;color:#a5afb1}.keys{display:flex;gap:4px}kbd{min-width:24px;text-align:center;height:24px;line-height:16px}.wide{font-size:8px;letter-spacing:1px;padding:3px 9px}.secondary-button{margin-top:18px;background:#273138;border:1px solid #47535a;border-bottom:3px solid #111a20;border-radius:4px;color:#cbd1cb;width:100%;display:flex;align-items:center;justify-content:center;gap:11px;padding:12px;font-size:12px}.secondary-button:disabled{opacity:.5;cursor:default}.secondary-button kbd{margin-left:auto;height:20px;font-size:9px;line-height:12px}.secondary-button>span{margin-right:auto;color:var(--orange)}.reset-button{display:block;margin:14px auto 0;background:none;border:0;color:#849196;font-size:11px;padding:6px}.reset-button:hover{color:var(--cream)}.below-game{display:flex;align-items:center;justify-content:space-between;margin:29px 0 35px;color:#717e83;font:8px var(--mono);letter-spacing:1px}.below-game>span:first-child{display:flex;align-items:center;gap:7px}.below-game i{width:4px;height:4px;border-radius:50%;background:#98ac96}.below-game p{font-family:'Noto Sans KR',sans-serif;font-size:11px;letter-spacing:0;color:#8a9598}footer{border-top:1px solid var(--line);max-width:calc(100% - 11.2%);margin:auto;display:flex;justify-content:space-between;padding:24px 0;color:#707b80;font:9px var(--mono);letter-spacing:.2px}.footer-divider{padding:0 10px;color:#47545c}.footer-block{color:var(--orange);font-size:15px;margin-left:14px}.touch-controls{display:none}@media(min-width:1500px){main{padding-top:10px}.intro{padding-top:55px;padding-bottom:40px}}@media(max-width:960px){.arcade-layout{grid-template-columns:200px 342px 200px;gap:16px}main{padding:0 20px}.topbar{padding:0 25px}.top-right>span:not(.online-dot){display:none}#score{font-size:32px}.controls>div:not(.panel-heading){margin:0 14px}.panel-heading{padding-left:14px;padding-right:14px}.hold-panel canvas,.next-block canvas{max-width:100%}.next-small canvas{width:50%}}@media(max-width:790px){.arcade-layout{grid-template-columns:180px 342px}.right-column{grid-column:1;grid-row:2}.left-column{grid-column:1;grid-row:1}.game-machine{grid-column:2;grid-row:1 / span 2}.controls{display:none}.right-column .next-panel{margin-top:-32px}.next-block canvas{height:85px}.next-small{display:none}.tip{display:none}.hold-panel{margin-top:14px}.below-game>span:last-child{display:none}.intro h1{font-size:28px}.touch-controls{display:flex;gap:8px;justify-content:center;margin-top:20px}.touch-controls button{background:#273138;color:var(--cream);border:1px solid #47535a;border-bottom-width:3px;border-radius:4px;min-width:50px;padding:12px;touch-action:none}.below-game{margin-bottom:20px}.edition{display:none}footer>span:last-child{display:none}}@media(max-width:570px){.topbar{height:65px;padding:0 19px}.brand{font-size:19px;gap:10px}.brand-badge{font-size:8px}.top-right{gap:0}.online-dot{display:none}.icon-button{margin-left:0}.intro{padding:28px 0 25px}.eyebrow{font-size:8px;letter-spacing:1.5px}.intro h1{font-size:26px}.subtitle{font-size:11px}main{padding:0 17px;max-width:410px}.arcade-layout{display:flex;flex-wrap:wrap;gap:14px}.left-column{width:100%;display:flex;gap:12px}.stats{flex:1}.panel-heading{font-size:9px;padding:12px}.stats .panel-heading{display:none}.stat-main{padding:12px 12px 9px}.stats label{font-size:8px}#score{font-size:25px;margin-top:2px}.stat-row{padding:0 12px 12px}.stat-row strong{font-size:20px;margin-top:3px}.stat-row>div+div{padding-left:17px}.level-progress,.stats>p{display:none}.best{padding:9px 12px}.best span{font-size:8px}.best b{font-size:11px}.hold-panel{margin-top:0;width:115px;display:flex;flex-direction:column}.hold-panel canvas{width:100%;height:auto;margin:auto}.hold-panel p{display:none}.game-machine{order:2;flex:none;width:342px;max-width:100%;margin:auto}.right-column{display:flex;width:100%;gap:10px;order:3;align-items:center}.right-column .next-panel{margin:0;width:120px}.next-panel .panel-heading{padding:9px;font-size:8px}.next-block canvas{height:55px;width:105px}.next-block>span{display:none}.secondary-button{margin:0;flex:1;padding:11px 8px;gap:5px}.reset-button{margin:0;font-size:10px}.secondary-button kbd{display:none}.touch-controls{gap:5px;margin-top:14px}.touch-controls button{min-width:0;flex:1;padding:12px 4px;font-size:12px}.below-game{margin:18px 0}.below-game>span{font-size:7px;letter-spacing:0}.below-game p{font-size:10px}footer{max-width:calc(100% - 34px);padding:20px 0;font-size:8px}.board-wrap>canvas{height:auto;width:100%;aspect-ratio:1/2}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}