*,*:before,*:after{box-sizing:border-box}html,body{margin:0}[hidden]{display:none!important}img{max-width:100%}:root{--bg:#0e0b18;--panel:#171228;--line:#2c2346;--ink:#ece7f7;--muted:#9a91b8;--gold:#e8c04a;--cyan:#8fe3ff;--red:#e0404f;--pix:"Press Start 2P", ui-monospace, monospace;--kr:"IBM Plex Sans KR", system-ui, -apple-system, "Malgun Gothic", sans-serif;color-scheme:dark}html,body{background:var(--bg);color:var(--ink)}body{font-family:var(--kr);font-size:15px;line-height:1.65}.wrap{max-width:1040px;margin:0 auto;padding-block:24px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px}.eyebrow{font-family:var(--pix);font-size:9px;color:var(--gold);letter-spacing:.1em}h1{font-family:var(--pix);font-size:clamp(18px,4.2vw,30px);line-height:1.3;margin:8px 0 10px;text-shadow:3px 3px 0 #3a2a5a;text-wrap:balance}.sub{margin:0;color:var(--muted);max-width:62ch}.lead{max-width:none}html.dev .lead,html:not(.dev) .devonly{display:none}.lead+.sub{margin-top:6px}#stage{position:relative;display:flex;justify-content:center;background:#05030b;padding:12px;border:4px solid var(--line);box-shadow:0 0 0 4px var(--bg),0 0 0 8px #c9a24a40}#game{line-height:0;max-width:100%}#game canvas{display:block;max-width:100%;height:auto!important}#start{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#05030b9e;border:0;cursor:pointer;color:var(--ink)}#start[hidden]{display:none}#start span{display:grid;gap:16px;justify-items:center;padding:20px 26px;background:linear-gradient(#211a3a,var(--panel));border:2px solid var(--gold);box-shadow:0 0 0 2px #000,6px 6px #000,0 0 24px #e8c04a40;text-align:center}#start .go{font-family:var(--kr);font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--gold);text-shadow:2px 2px 0 #3a2a5a;animation:blink 1.1s steps(2) infinite}#start .keys{font-family:var(--kr);font-style:normal;font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}#start kbd{font-family:var(--pix);font-size:10px;color:var(--ink);background:var(--line);border:1px solid #4a3d70;border-bottom-width:3px;padding:4px 6px 3px;margin-left:6px}#start:hover span{border-color:#ffd970}@keyframes blink{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){#start .go{animation:none}}#start:focus-visible span{outline:2px solid var(--cyan);outline-offset:3px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.card{background:var(--panel);border:2px solid var(--line);padding:16px 18px;min-width:0}.card h2{font-family:var(--pix);font-size:10px;color:var(--gold);margin:0 0 12px;letter-spacing:.06em;line-height:1.6}.card ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}.card li{color:var(--ink)}.card li span{color:var(--muted)}.keys{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;margin:0}.keys dt{display:flex;gap:4px;flex-wrap:wrap}.keys dd{margin:0;color:var(--muted)}kbd{font-family:var(--pix);font-size:8px;padding:5px 6px 4px;background:#0e0b18;border:1px solid #3a2f5c;border-bottom-width:3px;color:var(--ink)}.gear{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.gear-label{font-family:var(--pix);font-size:9px;color:var(--muted);margin-right:4px}.gbtn{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border:2px solid var(--line);color:var(--ink);font-family:var(--kr);font-size:14px;cursor:pointer;box-shadow:3px 3px #000}.gbtn b{font-family:var(--pix);font-size:9px;color:var(--muted);font-weight:400}.gbtn i{font-style:normal;font-family:var(--pix);font-size:8px;color:var(--muted)}.gbtn:hover{border-color:#4a3d78}.gbtn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.gbtn.on{border-color:var(--gold);background:#231a3a}.gbtn.on b,.gbtn.on i{color:var(--gold)}@media (prefers-reduced-motion:reduce){.pbtn.on{transform:none}}.gbtn.danger{border-color:#5a2a3a;color:#ff9aa8}.gbtn.danger:hover{border-color:#a04a5a}.pad{display:none}body.mobile{height:100%;overflow:hidden;overscroll-behavior:none;background:#000;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}html:has(body.mobile){height:100%;overflow:hidden;background:#000}body.mobile header,body.mobile .cards,body.mobile .gear{display:none}body.mobile .wrap{max-width:none;padding:0;gap:0;height:100%}body.mobile #stage{padding:0;border:0;box-shadow:none;background:#000;touch-action:none}body.mobile #start span{font-size:12px}body.mobile .pad{display:block;touch-action:none}.pbtn{display:grid;place-items:center;align-content:center;gap:2px;border:2px solid var(--line);background:var(--panel);color:var(--ink);font-family:var(--pix);font-size:14px;box-shadow:3px 3px #000;touch-action:none;padding:0;border-radius:50%}.pbtn small{font-family:var(--kr);font-size:10px;color:var(--muted);line-height:1}.pbtn.on{background:#3a2f5c;transform:translate(2px,2px);box-shadow:1px 1px #000}.pbtn.a{border-color:var(--red)}.pbtn.j{border-color:var(--cyan)}.pbtn.s{border-color:var(--gold)}.sys{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.turn{margin:0;font-size:12px;color:var(--muted);text-align:center}@media (orientation:portrait){body.mobile .wrap{display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}body.mobile #stage{flex:none}body.mobile .pad{--dp:calc(min(34vw,140px)*var(--bs,1));--ab:calc(min(15vw,60px)*var(--bs,1));flex:1;position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;align-content:space-evenly;align-items:center;gap:8px 12px;padding:12px max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-bottom,0px))}body.mobile .sys{grid-column:1/3;grid-row:1;flex-wrap:nowrap}body.mobile .slot{--sl:min(calc((100vw - 90px)/7),46px)}body.mobile .stickzone{grid-column:1;grid-row:2;align-self:stretch;position:relative;min-height:var(--dp)}body.mobile .stick{position:absolute;left:0;top:50%;margin-top:calc(var(--dp)/-2)}body.mobile .act{grid-column:2;grid-row:2;margin-right:4px}body.mobile .turn{grid-column:1/3;grid-row:3}}@media (orientation:landscape){body.mobile #stage{position:fixed;top:0;right:0;bottom:0;left:0;align-items:center}body.mobile .pad{--dp:calc(min(40vh,160px)*var(--bs,1));--ab:calc(min(14vh,54px)*var(--bs,1));position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}body.mobile .pad>*{pointer-events:auto}body.mobile .stickzone{position:absolute;left:0;bottom:0;width:42vw;height:72vh}body.mobile .stick{position:absolute;left:max(14px,env(safe-area-inset-left,0px));bottom:12vh;opacity:.22;transition:opacity .15s}body.mobile .stick.on{opacity:.42;transition:none}body.mobile.ovl .stickzone{pointer-events:none}body.mobile.ovl .stick{pointer-events:auto}body.mobile .act{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:17vh}body.mobile .sys{position:absolute;top:8px;left:max(12px,env(safe-area-inset-left,0px));justify-content:flex-start;opacity:.85;max-width:60vw}body.mobile .slot{--sl:40px}body.mobile .turn{display:none}body.mobile.ovl .sys{visibility:hidden}body.mobile #start{position:fixed}}.errbox{position:absolute;left:8px;right:8px;top:8px;z-index:20;padding:10px 12px;background:#3a0f18;border:2px solid var(--red);color:#ffd8de;font-size:13px;line-height:1.5;word-break:break-all}.stick{position:relative;width:var(--dp);height:var(--dp);border-radius:50%;touch-action:none;background:radial-gradient(circle,#281e46bf 0,#281e46bf 55%,#171228d9 56%);border:3px solid #0b0814;box-shadow:inset 0 0 0 2px #4a3d78,0 3px #000}.stick:before{content:"";position:absolute;top:18%;right:18%;bottom:18%;left:18%;border-radius:50%;border:2px dashed rgba(143,227,255,.18)}.stick .knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#6a5a9a,#2c2346 70%);border:3px solid #0b0814;box-shadow:inset 0 0 0 2px #8a7ac0,0 4px #000;transition:transform .06s}.stick.on .knob{transition:none;box-shadow:inset 0 0 0 2px var(--cyan),0 4px #000}.sys{align-items:flex-start;gap:10px}.slots,.tools{display:flex;gap:4px;padding:4px;background:#05030b;border:2px solid #2c2346;box-shadow:inset 0 0 0 1px #1d1430,0 3px #000}.tools{gap:4px}.pbtn.slot{--sl:46px;position:relative;width:var(--sl);height:var(--sl);border-radius:0;padding:0;background:linear-gradient(#2a2046,#1d1430);border:2px solid #0b0814;box-shadow:inset 0 0 0 1px #4a3d78,inset 0 -3px #120c20;font-family:Galmuri11,var(--kr)}.pbtn.slot img{width:62%;height:62%;image-rendering:pixelated;object-fit:contain;pointer-events:none}.pbtn.slot i{position:absolute;left:3px;top:1px;font-style:normal;font-family:var(--pix);font-size:8px;color:#8a7ac0}.pbtn.slot b{position:absolute;right:3px;bottom:2px;font-family:var(--pix);font-size:8px;color:#fff;text-shadow:1px 1px 0 #000;font-weight:400}.pbtn.slot.empty img{opacity:.35}.pbtn.slot.empty b{color:#6f6890}.pbtn.slot.tool{display:flex;flex-direction:column;justify-content:center;gap:1px;border-color:#0b0814;box-shadow:inset 0 0 0 1px #c9a24a80,inset 0 -3px #120c20}.pbtn.slot.tool img{width:52%;height:52%}.pbtn.slot.tool span{font-size:9px;line-height:1;color:var(--gold);pointer-events:none}.pbtn.slot.off span{color:#8f86ab}.pbtn.slot.on{transform:translateY(2px);background:linear-gradient(#3a2f5c,#2a2046);box-shadow:inset 0 0 0 1px var(--gold)}.act{display:grid;grid-template-columns:var(--ab) var(--ab);grid-template-rows:var(--ab) var(--ab);gap:8px 10px}.act .pbtn{position:relative;width:var(--ab);height:var(--ab);border-radius:50%;padding:0;color:#fff;background:radial-gradient(circle at 40% 32%,#4a3d788c,#0d09188c 70%);border:2px solid var(--ring);box-shadow:inset 0 0 0 2px #00000059,0 2px #00000080;transition:transform .05s,background .05s}.act .pbtn img{width:56%;height:56%;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.6))}.act .pbtn em{position:absolute;right:16%;bottom:12%;font-style:normal;font-family:var(--pix);font-size:7px;color:var(--ring);opacity:.9;pointer-events:none}.act .pbtn.on{transform:scale(.92);background:radial-gradient(circle at 40% 32%,#7864bee6,#1e1634e6 70%);box-shadow:0 0 10px var(--ring)}.act .s{--ring:#e8c04a;grid-column:2;grid-row:1}.act .a{--ring:#ff6070;grid-column:1;grid-row:2}.act .j{--ring:#8fe3ff;grid-column:2;grid-row:2}.act .s{transform:scale(.86)}.act .s.on{transform:scale(.8)}@media (orientation:landscape){body.mobile .act{opacity:.8}}@media (orientation:portrait){html:has(body.mobile),body.mobile{background:#cfc9dc}body.mobile .wrap{background:linear-gradient(#d8d2e4,#bdb6cc)}body.mobile #stage{margin:8px 8px 0;padding:10px 10px 24px;background:#4a4560;border-radius:10px 10px 34px;box-shadow:inset 0 2px #5e5878,inset 0 -2px #2e2a3e,0 2px #9a93ad}body.mobile #stage:before{content:"";position:absolute;left:4px;top:50%;width:6px;height:6px;border-radius:50%;background:#ff4a5a;box-shadow:0 0 6px #ff4a5a}body.mobile #stage:after{content:"SWORD RELIC";position:absolute;left:0;right:0;bottom:7px;text-align:center;font-family:var(--pix);font-size:8px;letter-spacing:.2em;color:#a9a1c4}body.mobile #game canvas{box-shadow:0 0 0 2px #1a1626}body.mobile .turn{color:#6a6380}body.mobile .stick{background:radial-gradient(circle,#3a3550 0,#3a3550 58%,#2c2840 60%);border:3px solid #a49cb8;box-shadow:inset 0 4px 8px #00000073,0 2px #e6e1ef}body.mobile .stick:before{border-color:#ffffff14}body.mobile .stick .knob{background:radial-gradient(circle at 35% 30%,#5a5472,#2a263a 72%);border-color:#1a1626;box-shadow:inset 0 0 0 2px #6e6890,0 4px #1a1626}body.mobile .act .pbtn{border:0;box-shadow:0 4px #6a1c40,0 6px 8px #00000040}body.mobile .act .a,body.mobile .act .j{background:radial-gradient(circle at 38% 30%,#d8558a,#a32a5e 70%)}body.mobile .act .s{background:radial-gradient(circle at 38% 30%,#e8c04a,#a8801a 70%);box-shadow:0 4px #6a4a10,0 6px 8px #00000040}body.mobile .act .pbtn img{filter:drop-shadow(1px 1px 0 rgba(0,0,0,.5)) brightness(1.15)}body.mobile .act .pbtn em{right:auto;left:50%;bottom:-16px;transform:translate(-50%);font-size:9px;color:#5a5470;opacity:1}body.mobile .act .pbtn.on{transform:translateY(3px);box-shadow:0 1px #6a1c40}body.mobile .act .s.on{transform:scale(.86) translateY(3px)}body.mobile .act{gap:20px 10px}body.mobile .pad:after{content:"";position:absolute;right:22px;bottom:max(14px,env(safe-area-inset-bottom,0px));width:44px;height:22px;transform:skew(-28deg);background:repeating-linear-gradient(90deg,#8e87a3 0 4px,transparent 4px 9px);opacity:.8;pointer-events:none}body.mobile .slots,body.mobile .tools{border-color:#8e87a3;box-shadow:0 2px #e6e1ef}}html:not(.dev) :is(.sub:not(.lead),.cards,.gear-label,#testgear,#newgame){display:none}.setdlg{width:min(320px,calc(100vw - 32px));padding:18px 18px 16px;background:linear-gradient(#211a3a,var(--panel));color:var(--ink);font-family:var(--kr);border:2px solid var(--gold);box-shadow:0 0 0 2px #000,6px 6px #000}.setdlg::backdrop{background:#05030bb3}.setdlg h2{margin:0 0 14px;font-family:var(--pix);font-size:12px;font-weight:400;color:var(--gold);letter-spacing:.1em}.srow{display:grid;grid-template-columns:72px 1fr 28px;align-items:center;gap:10px;min-height:40px;font-size:14px}.srow input[type=checkbox]{grid-column:2/4;justify-self:end;width:22px;height:22px;accent-color:var(--gold)}.srow input[type=range]{width:100%;accent-color:var(--gold)}.srow output{font-family:var(--pix);font-size:9px;color:var(--muted);text-align:right}.seg{grid-column:2/4;display:flex}.seg button{flex:1;min-height:34px;background:var(--bg);color:var(--muted);border:2px solid var(--line);font:inherit;font-size:13px;cursor:pointer}.seg button+button{border-left:0}.seg button[aria-checked=true]{background:#2c2346;color:var(--gold);border-color:var(--gold)}.mobonly{display:none}body.mobile .mobonly{display:grid}.sclose{margin:14px 0 0 auto}.setdlg :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}body.mobile .pconly{display:none}#set-keys h3{margin:12px 0 8px;font-size:13px;font-weight:600;color:var(--gold)}#set-keys small{font-weight:400;font-size:11px;color:var(--muted)}.kgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px}.kgrid label{display:flex;justify-content:space-between;align-items:center;font-size:13px}.kgrid button,.kreset{min-width:64px;min-height:28px;background:var(--bg);color:var(--ink);border:2px solid var(--line);font:inherit;font-size:12px;cursor:pointer}.kgrid button.wait{border-color:var(--gold);color:var(--gold)}.kreset{margin-top:8px;color:var(--muted)}#stage:fullscreen{align-items:center;padding:0;border:0;background:#000}