*{box-sizing:border-box}body{margin:0;background:#171a20;color:#eee4d3;font-family:system-ui,sans-serif}main{width:100%;max-width:1600px;height:100svh;margin:auto;padding:12px 16px;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px}header,.header-actions{display:flex;justify-content:space-between;align-items:center;gap:12px}header>div:first-child{display:flex;align-items:baseline;gap:12px}h1{font-size:20px;margin:0}small{letter-spacing:2px;color:#d2aa73;font-size:10px}#status{font-size:12px;color:#d4c5b1}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;min-height:0}.play-area{display:grid;grid-template-rows:minmax(0,1fr) auto auto 76px;gap:7px;min-width:0;min-height:0}#game{min-width:0;min-height:0;background:#181820;border:1px solid #595245;border-radius:10px;overflow:hidden}canvas{display:block}aside{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#686153 #242830;background:#242830;border:1px solid #414651;border-radius:12px;padding:10px 14px}h2{font-size:14px;margin:10px 0 7px}aside>h2:first-child{margin-top:0}h3{font-size:12px;color:#cfbfaa;font-weight:500;margin:8px 0 5px}button{background:#303641;border:1px solid #60626a;color:#eee4d3;border-radius:7px;padding:7px 9px;cursor:pointer;font:inherit;font-size:12px}button:hover,button[aria-pressed=true]{border-color:#e8bf7d;background:#4b443b}button:focus-visible{outline:2px solid #e8bf7d;outline-offset:2px}.actions{display:flex;gap:6px;flex-wrap:wrap}.hint,#stats{font-size:11px;line-height:1.5;color:#b8b2a8;margin:5px 0}.play-area>.hint{margin:0}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.grid button{border-radius:50%;height:30px;padding:0;border:2px solid #d9ad64;background:#3f3529}.grid.소멸 button{border-color:#ce777d;background:#422d36}.grid.망각 button{border-color:#b795e0;background:#352e46}#bag{display:flex;gap:5px;flex-wrap:wrap}#log{overflow-y:auto;scrollbar-width:thin;font-size:12px;line-height:1.5;color:#d0c2af;padding:6px 10px;background:#1e2229;border-radius:8px}#log p{margin:2px 0}.hero-hud{display:flex;gap:12px;align-items:center;background:#252a33;border:1px solid #685b47;border-radius:10px;padding:8px 12px;min-width:0}.portrait{flex:0 0 40px;width:40px;height:52px;background:#343b40 url(/art/hero-walk.png) 0 0 / 160px 156px no-repeat;image-rendering:pixelated;border:1px solid #af9469;border-radius:6px}.vitals{min-width:120px;flex:1;max-width:220px}.vitals label{display:flex;justify-content:space-between;font-size:11px;margin:2px 0}.bar{height:7px;background:#13171d;border-radius:3px;overflow:hidden}.bar span{display:block;height:100%;transition:width .15s;background:#cd6867}.bar.mp span{background:#75a8d6}.attributes{display:flex;flex:3;gap:8px 16px;flex-wrap:wrap}.attributes b{display:block;font-size:14px;color:#efce94;white-space:nowrap}.attributes small{letter-spacing:0;color:#bdb6a9}#inventory-toggle{display:none}.starter{position:fixed;inset:0;z-index:10;background:#11151def;display:grid;place-items:center;padding:20px;overflow-y:auto}.starter>div{max-width:480px;padding:28px;background:#252a33;border:1px solid #af9469;border-radius:20px}.starter h2{font-size:24px}.starter p{color:#c7beaf;font-size:14px}.starter-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.starter-options button{padding:16px 10px}@media(max-width:1000px){header small{display:none}.attributes{gap:5px 12px}.attributes b{font-size:12px}.layout{grid-template-columns:minmax(0,1fr) 270px}}@media(max-width:760px){main{padding:8px;gap:7px}h1{font-size:16px}.header-actions{gap:6px}#status{font-size:10px}#inventory-toggle{display:block;white-space:nowrap}.layout{grid-template-columns:minmax(0,1fr)}.hero-hud{flex-wrap:wrap;gap:5px 10px;padding:6px 8px}.portrait{height:48px}.vitals{max-width:none}.attributes{flex-basis:100%;gap:5px 12px}.attributes small{font-size:9px}.attributes b{font-size:11px}aside{display:none;position:fixed;right:8px;top:48px;bottom:8px;width:min(320px,calc(100vw - 16px));z-index:5;box-shadow:-12px 0 45px #0009}aside.open{display:block}.play-area{grid-template-rows:minmax(0,1fr) auto auto 56px;gap:5px}.actions button{padding:7px;font-size:11px}}@media(max-height:540px)and (min-width:761px){main{padding-block:6px;gap:5px}.play-area{grid-template-rows:minmax(0,1fr) auto auto 44px}.hero-hud{padding-block:4px}}.combat-controls{display:flex;justify-content:space-between;align-items:center;gap:12px}.direction-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,38px);gap:3px}.direction-pad button{font-size:18px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.direction-pad [data-move=up]{grid-area:1 / 2}.direction-pad [data-move=left]{grid-area:2 / 1}.direction-pad #attack{grid-area:2 / 2;color:#efce94}.direction-pad [data-move=right]{grid-area:2 / 3}.direction-pad [data-move=down]{grid-area:3 / 2}.skill-actions{display:grid;grid-template-columns:repeat(4,52px)}.skill-actions button{min-height:52px;padding:5px;touch-action:manipulation}.skill-actions button>span{display:block;font-size:22px}.skill-actions small{display:block;font-size:10px;letter-spacing:0}@media(min-width:761px){.direction-pad{grid-template-rows:repeat(3,28px)}}@media(max-width:760px){.skill-actions{grid-template-columns:repeat(2,52px)}.direction-pad{grid-template-rows:repeat(3,44px)}.play-area>.hint{display:none}.play-area{grid-template-rows:minmax(0,1fr) auto 44px}}.skill-actions{display:flex;flex-wrap:wrap;width:min(440px,calc(100% - 150px));min-width:0;gap:5px}.skillbar{display:flex;width:100%;gap:5px;overflow-x:auto;scrollbar-width:thin;padding-bottom:3px}.skillbar button{flex:0 0 54px}.skillbar .hint{margin:0;align-self:center}button[hidden]{display:none}.skill-actions button{min-width:44px;min-height:44px}.skillbar button>span{font-size:21px}.skillbar button small{white-space:nowrap}@media(max-width:760px){.skill-actions{max-height:138px;overflow-y:auto}.attributes{gap:4px 10px}}.skill-art{position:relative;display:inline-block;width:42px;height:42px;flex:0 0 auto;border-radius:8px;background-repeat:no-repeat;background-size:439.109% 230.99%;background-position:var(--icon-x) var(--icon-y);vertical-align:middle;pointer-events:none}.chain-badge{position:absolute;right:-2px;bottom:-2px;width:16px;height:16px;border-radius:50%;color:#fff4a1;background:#29253c;border:1px solid #e9cb63;font-size:13px;line-height:14px;text-align:center}.skillbar button{padding:4px;min-width:58px}.skillbar button>.skill-art{display:block;margin:0 auto 3px}.grid button{position:relative;height:38px;border-radius:10px;overflow:hidden}.grid .skill-art{width:32px;height:32px;border-radius:7px}.rune-value{position:absolute;bottom:0;right:0;min-width:17px;padding:0 3px;border-radius:5px 0 0;background:#151921e8;color:#fff0c7;font-size:11px;line-height:16px;pointer-events:none}.stat-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;background:#393d45;color:#efd49a;flex-shrink:0}#bag button{display:inline-flex;align-items:center;gap:6px;padding:4px 7px 4px 4px}#bag .skill-art{width:30px;height:30px;border-radius:5px}.direction-pad{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.direction-pad button{background:linear-gradient(#414b5a,#29313c);border-color:#7a8595;box-shadow:0 2px #0e1117}.direction-pad button.held,.direction-pad button:active{background:#655638;border-color:#ebca85;box-shadow:inset 0 2px 3px #0005}@media(pointer:coarse),(max-width:760px){.direction-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,44px)}.direction-pad button{min-width:44px;min-height:44px}.skill-actions{width:calc(100% - 162px)}main{padding-bottom:max(8px,env(safe-area-inset-bottom))}button{-webkit-tap-highlight-color:transparent}}.play-area{grid-template-columns:minmax(0,1fr)}.combat-controls{width:100%;min-width:0}.direction-pad{flex-shrink:0}.skill-actions{flex:1 1 0;width:0;max-width:440px}.skillbar{flex:0 1 100%;min-width:0;max-width:100%}button{touch-action:manipulation}.direction-pad button{touch-action:none}.item-art{display:inline-block;width:30px;height:30px;object-fit:contain;flex-shrink:0;vertical-align:middle;image-rendering:pixelated;pointer-events:none}.grid .item-art{width:30px;height:32px}#potions button{display:inline-flex;align-items:center;gap:5px}#potions .item-art{width:22px;height:26px}.weapon-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:48px;height:58px;border-radius:8px;background:#1b2029;border:1px solid #756344;flex-shrink:0;overflow:hidden;pointer-events:none}.weapon-image{display:block;height:47px;max-width:36px;background-repeat:no-repeat;margin-bottom:7px}.weapon-level,.weapon-bonus{position:absolute;font-size:10px;line-height:14px;font-weight:700;color:#f5dca4;text-shadow:0 1px 2px #000;background:#161b23db;padding:0 3px;border-radius:3px}.weapon-level{bottom:0;left:0}.weapon-bonus{top:0;right:0}.starter-options button,#weapons button{display:flex;align-items:center;gap:8px;text-align:left}.starter-options button{flex-direction:column;text-align:center}#weapons button small{display:block;letter-spacing:0;color:#bdb6a9;margin-top:3px}.attributes .equipped-weapon{display:flex;align-items:center;gap:6px}.equipped-weapon .weapon-icon{width:32px;height:35px}.equipped-weapon .weapon-image{height:28px}.equipped-weapon .weapon-level,.equipped-weapon .weapon-bonus{font-size:8px;line-height:10px}@media(pointer:coarse),(max-width:760px),(max-height:540px){main{padding:6px;gap:5px}header>div:first-child>small{display:none}h1{font-size:16px}#status{font-size:10px}#inventory-toggle{display:block;padding:5px 8px}.layout{grid-template-columns:minmax(0,1fr)}aside{display:none;position:fixed;z-index:5;top:42px;bottom:max(6px,env(safe-area-inset-bottom));right:6px;width:min(300px,calc(100vw - 12px));padding:10px;box-shadow:-12px 0 35px #0009}aside.open{display:block}.hero-hud{padding:4px 7px;gap:5px 8px;flex-wrap:wrap}.portrait{flex-basis:30px;width:30px;height:36px;background-size:120px 117px}.vitals{min-width:100px;max-width:210px}.attributes{gap:3px 9px}.attributes b{font-size:11px}.attributes small{font-size:9px}.equipped-weapon .weapon-icon{width:23px;height:28px}.equipped-weapon .weapon-image{height:24px}#weapons button{padding:4px 6px}#weapons .weapon-icon{width:32px;height:40px}#weapons .weapon-image{height:33px}.play-area{position:relative;grid-template-rows:minmax(0,1fr) 32px;gap:4px}.play-area>.hint{display:none}.combat-controls{position:absolute;left:10px;right:10px;bottom:44px;width:auto;z-index:4;pointer-events:none;align-items:flex-end;gap:12px}.combat-controls button,.skillbar{pointer-events:auto}.direction-pad{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,36px);gap:2px;pointer-events:auto}.direction-pad button{min-width:36px;min-height:36px;font-size:15px;padding:0;background:#293442d9;border-color:#8795a4b3}.skill-actions{flex:0 1 270px;max-width:min(270px,calc(100% - 128px));max-height:112px;justify-content:flex-end;gap:3px;overflow-y:auto}.skill-actions button{min-width:38px;min-height:36px;padding:2px 4px;background:#25303ddd}.skill-actions button>span:not(.skill-art){font-size:17px}.skill-actions small{font-size:9px}.skillbar{gap:3px;padding-bottom:2px}.skillbar button{flex:0 0 42px;min-width:42px}.skillbar .skill-art{width:31px;height:31px;margin-bottom:1px}#log{font-size:10px;line-height:1.3;padding:3px 7px}}@media(max-height:540px)and (orientation:landscape){.hero-hud{flex-wrap:nowrap}.attributes{flex-basis:auto;flex-wrap:nowrap;gap:8px;overflow-x:auto}.attributes>span{flex-shrink:0}.vitals{flex:0 0 130px}.portrait{display:none}.attributes small{font-size:8px}.attributes b{font-size:10px}}