:root{--ink: #1d1d1f;--paper: #f6f1e3;--card: #fffdf6;--gold: #ffcc00;--blue: #6fb1ff;--font: "Jua", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:#2b2a33;overflow:hidden;font-family:var(--font);color:var(--ink);user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}#game{touch-action:none;position:fixed;inset:0;width:100vw;height:100vh;display:block}#ui{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;pointer-events:none;transition:background .2s}#ui.dim{background:#1d1d1f59}#ui>*{pointer-events:auto}@keyframes pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.04);opacity:1}to{transform:scale(1)}}.panel{position:relative;background:var(--card);border:5px solid var(--ink);border-radius:24px;box-shadow:0 10px 0 var(--ink);padding:40px 26px 22px;max-height:calc(100vh - 40px);max-width:calc(100vw - 32px);overflow:auto;animation:pop .25s cubic-bezier(.2,1.4,.4,1)}.ribbon{position:sticky;top:-40px;margin:-58px auto 16px;width:max-content;background:var(--gold);border:5px solid var(--ink);border-radius:14px;padding:4px 28px;font-size:30px;box-shadow:0 5px 0 var(--ink);z-index:2}.btn{font-family:var(--font);font-size:22px;color:var(--ink);padding:10px 24px;border:4px solid var(--ink);border-radius:16px;background:#fff;box-shadow:0 6px 0 var(--ink);cursor:pointer;transition:transform .06s,box-shadow .06s}.btn:hover{filter:brightness(1.04)}.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}.btn.primary{background:var(--gold)}.btn.blue{background:var(--blue)}.btn.big{font-size:30px;padding:12px 34px}.btn.small{font-size:18px;padding:6px 16px;box-shadow:0 4px 0 var(--ink)}.title-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}.logo{margin:0;font-size:clamp(56px,11vw,120px);font-weight:400;color:#fff;-webkit-text-stroke:12px var(--ink);paint-order:stroke fill;letter-spacing:2px;transform:rotate(-3deg);text-shadow:0 8px 0 var(--ink)}.subtitle{font-size:24px;background:#fff;border:4px solid var(--ink);border-radius:12px;padding:4px 16px;transform:rotate(2deg)}.menu-col{display:flex;flex-direction:column;gap:14px;align-items:stretch;min-width:280px;margin-top:8px}.menu-row{display:flex;gap:12px;margin-top:6px}.select-panel{width:min(900px,100%)}.sel-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px}.sel-left{display:flex;flex-direction:column;align-items:center;gap:8px;border:4px solid var(--ink);border-radius:18px;padding:10px;background:color-mix(in srgb,var(--pc) 14%,#fffdf6)}.portrait-box{width:150px;height:150px;border:4px solid var(--ink);border-radius:50%;background:#fffdf6;overflow:hidden;box-shadow:inset 0 -10px #1d1d1f14}.portrait{width:150px;height:150px;display:block}.sel-name{font-size:28px;color:var(--pc);-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;line-height:1}.chips{display:flex;flex-direction:column;gap:4px;align-items:center;font-size:16px}.chip{white-space:nowrap}.mask-tag{display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:0 6px;margin-right:6px;font-size:13px}.swatches{display:flex;gap:6px}.swatch{width:26px;height:26px;border-radius:50%;border:4px solid var(--ink);cursor:pointer;padding:0}.swatch.on{outline:4px solid var(--gold);outline-offset:2px}.hands{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}.hand{display:flex;align-items:center;gap:4px;font-family:var(--font);text-align:left;border:4px solid var(--ink);border-radius:12px;background:#fff;padding:3px 6px;cursor:pointer;box-shadow:0 4px 0 var(--ink);min-width:0}.hand.active{background:#fff3b8;outline:4px dashed var(--pc);outline-offset:2px}.hand-text{min-width:0}.hand-label{font-size:12px;opacity:.7}.hand-name{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sel-right{display:flex;flex-direction:column;gap:10px;min-width:0}.tabs{display:flex;gap:8px;align-items:center}.tab{font-family:var(--font);font-size:20px;padding:6px 18px;border:4px solid var(--ink);border-radius:14px 14px 6px 6px;background:#ece4cf;cursor:pointer}.tab.on{background:var(--gold);box-shadow:0 4px 0 var(--ink)}.tabs .btn.small{margin-left:auto}.face-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.face,.gear{font-family:var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid var(--ink);border-radius:16px;background:#fff;cursor:pointer;box-shadow:0 4px 0 var(--ink);padding:4px;transition:transform .06s}.face:active,.gear:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}.face.on,.gear.on{background:#fff3b8;outline:4px solid var(--pc);outline-offset:2px}.gear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.gear{font-size:14px;gap:2px;padding:6px 2px}.sel-info{font-size:15px;line-height:1.35;background:#fff;border:3px dashed var(--ink);border-radius:12px;padding:6px 10px;min-height:52px}.sel-info b{font-weight:400;color:var(--pc);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;margin-right:2px}.select-foot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.btn.cycle{display:inline-flex;gap:6px;align-items:center}.cycle-label{font-size:13px;opacity:.7}.cycle-arrow{font-size:11px;opacity:.6}.foot-label{font-size:18px}.foot-actions{display:flex;gap:12px;margin-left:auto;align-items:center;justify-content:flex-end}.controls-panel{width:min(1000px,100%)}.controls-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.controls-grid h3{margin:0 0 8px;font-weight:400;font-size:24px}.keys{border-collapse:separate;border-spacing:6px;font-size:18px}.keys th{font-weight:400;font-size:20px}.key{text-align:center;background:#fff;border:3px solid var(--ink);border-radius:10px;box-shadow:0 3px 0 var(--ink);padding:4px 10px;min-width:70px}.k-label{padding-right:8px}.note{font-size:16px;margin:8px 0 0;opacity:.8}.tips{margin:0;padding-left:20px;font-size:18px;line-height:1.45}.tips li{margin-bottom:8px}.small-panel{width:min(460px,100%);display:flex;flex-direction:column;align-items:center}.winner{font-size:52px;-webkit-text-stroke:8px var(--ink);paint-order:stroke fill;margin:4px 0 14px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-bottom:14px}.stat{border:4px solid var(--ink);border-radius:14px;padding:8px 12px;background:color-mix(in srgb,var(--pc) 15%,#fff);font-size:18px}.stat-name{font-size:24px;color:var(--pc);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}.stat-wins{color:#e0a800;font-size:22px}@media(max-width:760px)and (min-height:521px){.controls-grid,.sel-body{grid-template-columns:1fr}}.foot-note{font-size:14px;opacity:.75}.lobby{gap:12px;min-width:min(420px,100%)}.lobby-wait{font-size:26px;padding:18px 0;animation:blink 1.2s ease-in-out infinite}.lobby-wait.small{font-size:18px;padding:4px 0}@keyframes blink{50%{opacity:.45}}.lobby-error{background:#ffe0e0;border:3px solid var(--ink);border-radius:12px;padding:6px 14px;font-size:18px}.room-code{font-size:64px;letter-spacing:10px;color:#fff;-webkit-text-stroke:10px var(--ink);paint-order:stroke fill;line-height:1}.room-link{font-size:14px;opacity:.7;word-break:break-all;text-align:center;-webkit-user-select:text;user-select:text}.note.center{text-align:center}.or-line{font-size:18px;opacity:.7}.join-row{display:flex;gap:10px;align-items:center}.code-input{font-family:var(--font);font-size:30px;width:150px;text-align:center;letter-spacing:6px;text-transform:uppercase;border:4px solid var(--ink);border-radius:14px;padding:6px 8px;background:#fff;box-shadow:inset 0 3px #1d1d1f26}.key-or{font-size:14px;opacity:.6;text-align:center}#touch{position:fixed;inset:0;pointer-events:none;display:none;z-index:5;touch-action:none}#touch.on{display:block}#touch .stick-zone{position:absolute;left:0;bottom:0;width:45vw;height:70vh;pointer-events:auto;touch-action:none}#touch .stick-base{position:absolute;left:18vh;top:70%;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;border:4px solid rgba(29,29,31,.55);background:#fffdf659}#touch .stick-base.active{background:#fffdf68c;border-color:var(--ink)}#touch .stick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#fffdf6;border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink)}#touch .tbuttons{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:300px;height:230px;pointer-events:none}#touch .tbtn{position:absolute;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center;border:4px solid var(--ink);border-radius:50%;background:#fffdf6;box-shadow:0 5px 0 var(--ink);font-size:18px;color:var(--ink);user-select:none;-webkit-user-select:none;overflow:hidden}#touch .tbtn.down{transform:translateY(4px);box-shadow:0 1px 0 var(--ink);filter:brightness(.92)}#touch .b-attack{right:6px;bottom:8px;width:92px;height:92px;background:#ff8a8a;font-size:22px}#touch .b-jump{right:110px;bottom:4px;width:70px;height:70px;background:#9ad0ff}#touch .b-grab{right:104px;bottom:86px;width:62px;height:62px;background:#ffe08a}#touch .b-dash{right:24px;bottom:112px;width:60px;height:60px;background:#c8f0b4}#touch .b-skill-a{right:186px;bottom:30px;width:58px;height:58px;border-radius:16px}#touch .b-skill-b{right:176px;bottom:100px;width:58px;height:58px;border-radius:16px}#touch .b-mask{right:92px;bottom:160px;width:58px;height:58px;border-radius:16px;background:#fff3b8}#touch .tcd{position:absolute;inset:0;display:none;align-items:center;justify-content:center;color:#fff;font-size:22px;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;pointer-events:none}#touch .tpause{position:absolute;left:50%;top:86px;transform:translate(-50%);pointer-events:auto;font-family:var(--font);font-size:18px;width:44px;height:36px;border:3px solid var(--ink);border-radius:10px;background:#fffdf6;box-shadow:0 3px 0 var(--ink)}#rotate{position:fixed;inset:0;z-index:20;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:#2b2a33;color:#fff;font-size:26px;text-align:center;padding:24px}#rotate .phone{width:54px;height:90px;border:5px solid #fff;border-radius:12px;animation:turn 1.6s ease-in-out infinite}@keyframes turn{50%{transform:rotate(-90deg)}}@media(orientation:portrait)and (pointer:coarse){#rotate{display:flex}}@media(max-height:520px){#ui{padding:6px}.panel{padding:26px 12px 8px;border-radius:18px;max-height:calc(100vh - 12px);box-shadow:0 6px 0 var(--ink)}.ribbon{font-size:18px;margin:-24px auto 4px;padding:1px 16px;border-width:4px}.btn{font-size:17px;padding:5px 14px}.btn.big{font-size:20px;padding:6px 18px}.title-wrap{gap:8px}.logo{font-size:50px;-webkit-text-stroke:7px var(--ink);text-shadow:0 5px 0 var(--ink)}.subtitle{font-size:15px;padding:2px 12px;border-width:3px}.menu-col{gap:9px;min-width:230px;margin-top:2px}.menu-row{margin-top:0}.btn.small{font-size:14px;padding:3px 10px}.sel-body{grid-template-columns:190px minmax(0,1fr);gap:10px}.sel-left{gap:4px;padding:6px}.portrait-box,.portrait{width:84px!important;height:84px!important}.sel-name{font-size:20px;-webkit-text-stroke:5px var(--ink)}.chips{font-size:13px;gap:2px}.swatch{width:20px;height:20px;border-width:3px}.hand canvas{width:22px!important;height:22px!important}.hand{padding:1px 4px;border-width:3px;box-shadow:0 3px 0 var(--ink)}.hand-label{display:none}.hand-name{font-size:13px}.sel-right{gap:6px}.tab{font-size:15px;padding:3px 12px}.face-grid{gap:5px}.face{padding:1px;border-width:3px;box-shadow:0 3px 0 var(--ink)}.face canvas{width:36px!important;height:36px!important}.face-grid{gap:4px}.gear-grid{gap:5px}.gear{padding:2px;font-size:12px;border-width:3px;box-shadow:0 3px 0 var(--ink)}.gear canvas{width:28px!important;height:28px!important}.sel-info{font-size:12px;min-height:0;padding:3px 8px}.select-foot{margin-top:6px;gap:6px}.foot-note{display:none}.room-code{font-size:48px}#touch .tbuttons{transform:scale(.85);transform-origin:bottom right}#touch .tpause{top:64px}}.btn.green{background:#8fe388}.best-chip{font-size:16px;background:#fff3b8;border:3px solid var(--ink);border-radius:10px;padding:3px 10px}.new-best{font-size:26px;color:#fc0;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;margin:6px 0}.stage-panel{width:min(860px,100%)}.stage-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px}.foe-card{display:flex;flex-direction:column;align-items:center;gap:6px;border:4px solid var(--ink);border-radius:18px;padding:10px;background:color-mix(in srgb,var(--pc) 14%,#fffdf6)}.foe-name{font-size:26px;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;line-height:1.1;text-align:center}.badge-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.badge{font-size:13px;background:#fff;border:3px solid var(--ink);border-radius:8px;padding:0 8px}.badge.boss{background:#ff5d6c;color:#fff;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-size:15px}.hazard{font-size:13px;background:#ffe0c2;border:2px dashed var(--ink);border-radius:8px;padding:2px 8px;text-align:center}.stage-info{display:flex;flex-direction:column;gap:6px;min-width:0}.chip-row{display:flex;gap:8px;flex-wrap:wrap}.gear-chip{display:flex;align-items:center;gap:4px;background:#fff;border:3px solid var(--ink);border-radius:12px;padding:2px 10px 2px 4px;font-size:16px}.gear-chip .lv{color:#e0a800;-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;font-weight:400;font-size:18px}.perk-row{display:flex;gap:6px;flex-wrap:wrap;min-height:4px}.perk-tag{font-size:13px;background:#c8f0b4;border:2px solid var(--ink);border-radius:8px;padding:0 8px}.divider{border-top:3px dashed rgba(29,29,31,.3);margin:4px 0}.hp-row{display:flex;align-items:center;gap:8px;font-size:15px}.hp-bar{flex:1;height:16px;border:3px solid var(--ink);border-radius:8px;background:#3a3a3e;overflow:hidden}.hp-fill{height:100%;background:#ff5d6c}.reward-panel{width:min(900px,100%);display:flex;flex-direction:column;gap:12px}.reward-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.reward-card{font-family:var(--font);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 14px;border:5px solid var(--ink);border-radius:18px;background:#fffdf6;box-shadow:0 7px 0 var(--ink);cursor:pointer;text-align:center;transition:transform .08s}.reward-card:hover{transform:translateY(-4px) rotate(-1deg)}.reward-card:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}.reward-kind{font-size:13px;color:#fff;background:var(--ink);border-radius:8px;padding:1px 10px}.reward-card.k0{background:#fff3b8}.reward-card.k1{background:#e7dcff}.reward-card.k2{background:#d9ecff}.reward-card.k3{background:#dff6d6}.reward-card.k4{background:#ffe0e4}.reward-title{font-size:22px;line-height:1.15}.reward-desc{font-size:14px;line-height:1.35;opacity:.85}@media(max-height:520px){.stage-body{grid-template-columns:170px minmax(0,1fr);gap:8px}.foe-name{font-size:18px}.gear-chip{font-size:13px}.gear-chip canvas{width:24px!important;height:24px!important}.reward-card{padding:6px;gap:3px}.reward-card canvas{width:40px!important;height:40px!important}.reward-title{font-size:17px}.reward-desc,.note{font-size:12px}.winner{font-size:30px;-webkit-text-stroke:6px var(--ink);margin:2px 0 8px}.new-best{font-size:20px}}@media(max-width:760px)and (min-height:521px){.stage-body,.reward-row{grid-template-columns:1fr}}