*{box-sizing:border-box} :root{color-scheme:dark;font-family:system-ui,-apple-system,"Yu Gothic",sans-serif;color:#e5decf;background:#141316} html{-webkit-text-size-adjust:100%} body{margin:0;background:radial-gradient(ellipse at 50% 20%,#29252b 0,#141316 72%);min-height:100vh} main{max-width:850px;margin:0 auto;padding:28px 24px 20px} header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} h1{font-size:25px;letter-spacing:.18em;margin:5px 0 0;font-weight:600}.eyebrow{font-size:12px;color:#a89d88;letter-spacing:.17em}.build-label{font-size:13px;color:#b9ad99;border:1px solid #554b40;padding:6px 10px}.game-shell{position:relative;border:1px solid #655746;box-shadow:0 15px 60px #0008;background:#1d1b1e}.topbar{height:40px;padding:0 12px;display:flex;align-items:center;gap:16px;font-size:14px;background:#292529}.topbar span:first-child{flex:1;color:#cdbb98}.topbar button{padding:4px 8px;font-size:12px}.canvas-wrap{position:relative;background:#171517;display:flex;align-items:center;justify-content:center;overflow:hidden}canvas{display:block;width:100%;aspect-ratio:4/3;image-rendering:pixelated;outline:none;touch-action:none;background:#171517}canvas:focus-visible{outline:2px solid #c8a76a;outline-offset:2px}.status{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#221f22;font-size:13px}.health-track{height:8px;background:#493532;flex:1;max-width:220px}.health-track div{height:100%;width:100%;background:#ac5c54;transition:width .15s}.status strong{font-size:12px;font-weight:500}.status>span:last-child{margin-left:auto;color:#b8ac99}.equipment{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:4px 10px 10px}button{font:inherit;color:inherit;border:1px solid #514a46;background:#302b2c;cursor:pointer;min-height:32px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:hover{background:#453b36}button:focus-visible{outline:2px solid #debd83;outline-offset:2px}.equipment button{display:flex;align-items:center;gap:8px;padding:8px 10px;font-size:14px}.equipment button.selected{border-color:#c3a272;background:#4e4030;color:#f2dbaa}kbd{font:12px monospace;color:#bba98b;border:1px solid #66594a;padding:1px 4px}.under{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0}.under p{margin:0;font-size:14px}.under .instructions{font-size:12px;color:#aca198;margin-top:7px}.under button{font-size:13px;padding:7px 12px;white-space:nowrap}footer{border-top:1px solid #373136;padding-top:13px;font-size:12px;color:#a99d94}.touch-controls{display:none;position:absolute;inset:0;align-items:flex-end;justify-content:space-between;padding:10px;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.touch-controls button{pointer-events:auto}.dpad{display:grid;grid-template-columns:repeat(3,44px);gap:4px;touch-action:none}.dpad button{height:40px;touch-action:none;background:#302b2c}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}button.pressed{background:#746044}
@media(pointer:coarse){
  body{overscroll-behavior:none}
  .touch-controls{display:flex}
}
@media(max-width:600px){main{padding:15px 10px}header{margin-bottom:10px}h1{font-size:21px}.equipment button{padding:8px 6px;gap:5px;font-size:12px}.under{gap:8px}.instructions{line-height:1.8}.eyebrow{font-size:11px}.status{gap:7px}.health-track{max-width:130px}.topbar{height:34px;font-size:12px}}
@media(pointer:coarse) and (max-width:900px){
  html,body{height:100%;overflow:hidden}
  body{min-height:100dvh}
  main{height:100dvh;max-width:none;padding:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left));display:flex;flex-direction:column}
  header,.under,footer{display:none}
  .game-shell{border:0;box-shadow:none;flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}
  .topbar{height:28px;min-height:28px;padding:0 6px;gap:7px;font-size:11px;flex:none}
  .topbar button{min-height:24px;padding:2px 6px;font-size:11px}
  .canvas-wrap{flex:1;min-height:0}
  canvas{width:min(100vw,calc((100dvh - 92px)*4/3));height:auto;max-height:100%;max-width:100%;flex:none}
  .status{height:28px;min-height:28px;padding:2px 7px;gap:5px;font-size:11px;flex:none}
  .status strong{font-size:11px}.health-track{max-width:130px;height:6px}
  .equipment{height:36px;min-height:36px;padding:2px 4px 3px;gap:3px;flex:none}
  .equipment button{min-height:30px;padding:2px 5px;gap:4px;font-size:11px;white-space:nowrap;overflow:hidden}
  .equipment kbd{font-size:10px;padding:0 2px}
  .touch-controls{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
  .dpad{grid-template-columns:repeat(3,40px);gap:3px}.dpad button{width:40px;height:36px;min-height:36px;padding:0}
  
}
@media(pointer:coarse) and (max-height:430px) and (orientation:landscape){
  .topbar{height:26px;min-height:26px}.status{height:24px;min-height:24px}.equipment{height:32px;min-height:32px}
  canvas{width:min(100vw,calc((100dvh - 82px)*4/3))}
  .dpad{grid-template-columns:repeat(3,36px)}.dpad button{width:36px;height:32px;min-height:32px}
}

.start-flow{position:fixed;inset:0;z-index:1000;background:#000;display:grid;place-items:center;padding:20px}.start-flow[hidden]{display:none}.start-panel{width:min(520px,94vw);min-height:320px;border:1px solid #665746;background:radial-gradient(circle at 50% 20%,#302a31,#151318 70%);box-shadow:0 24px 80px #000c;padding:38px 34px;text-align:center}.start-panel[hidden]{display:none}.title-panel{position:relative;width:min(480px,calc(100vw - 16px));min-height:0;aspect-ratio:4/3;overflow:hidden;padding:0;border:0;background:#000;box-shadow:0 18px 70px #000}.title-back{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}.title-logo{position:absolute;left:0;top:0;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none}.title-actions{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(320px,78%);padding:8px 10px 10px;background:#080707d9;border:1px solid #7a6549;box-shadow:0 4px 18px #000b}.title-actions .welcome{margin:0 0 7px}.title-actions button{width:100%;min-width:0}.start-panel h2{font-size:28px;letter-spacing:.12em;margin:25px 0 34px}.welcome{color:#e9d7b5;font-size:14px;letter-spacing:.08em;text-shadow:1px 1px #000}.start-panel label{display:block;color:#b8a88e;margin-bottom:8px}.start-panel input{width:min(320px,90%);font:20px system-ui,-apple-system,"Yu Gothic",sans-serif;text-align:center;color:#f0e4cf;background:#171419;border:1px solid #74624d;padding:10px 12px;outline:none}.start-panel input:focus{border-color:#d0aa70}.job-label{margin:18px auto 26px;color:#e2c58f}.start-panel button{min-width:190px;padding:10px 18px;border-color:#9b7a52;background:#493626}.opening-panel{min-height:360px;cursor:default}.opening-text{text-align:left;max-width:420px;margin:0 auto 26px;line-height:1.8;font-size:15px;color:#e4dccf}.opening-text p{margin:0}.opening-text span{color:#efcf92}@media(max-width:600px){.start-flow{padding:4px}.start-panel:not(.title-panel){min-height:0;padding:24px 18px}.start-panel h2{font-size:22px;margin:18px 0 24px}.title-actions{bottom:8px;padding:5px 7px 7px}.title-actions .welcome{font-size:11px;margin-bottom:4px}.title-actions button{min-height:28px;padding:4px 8px;font-size:12px}.opening-text{font-size:13px}}

/* r15: touch-capable fallback for iPhone/iPad and touch browsers that do not expose pointer:coarse reliably */
html.touch-capable body{overscroll-behavior:none}
html.touch-capable .touch-controls{display:flex}
@media(max-width:900px){
  html.touch-capable,html.touch-capable body{height:100%;overflow:hidden}
  html.touch-capable body{min-height:100dvh}
  html.touch-capable main{height:100dvh;max-width:none;padding:max(2px,env(safe-area-inset-top)) max(2px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(2px,env(safe-area-inset-left));display:flex;flex-direction:column}
  html.touch-capable header,html.touch-capable .under,html.touch-capable footer{display:none}
  html.touch-capable .game-shell{border:0;box-shadow:none;flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch}
  html.touch-capable .topbar{height:28px;min-height:28px;padding:0 6px;gap:7px;font-size:11px;flex:none}
  html.touch-capable .topbar button{min-height:24px;padding:2px 6px;font-size:11px}
  html.touch-capable .canvas-wrap{flex:1;min-height:0}
  html.touch-capable canvas{width:min(100vw,calc((100dvh - 92px)*4/3));height:auto;max-height:100%;max-width:100%;flex:none}
  html.touch-capable .status{height:28px;min-height:28px;padding:2px 7px;gap:5px;font-size:11px;flex:none}
  html.touch-capable .status strong{font-size:11px}
  html.touch-capable .health-track{max-width:130px;height:6px}
  html.touch-capable .equipment{height:36px;min-height:36px;padding:2px 4px 3px;gap:3px;flex:none}
  html.touch-capable .equipment button{min-height:30px;padding:2px 5px;gap:4px;font-size:11px;white-space:nowrap;overflow:hidden}
  html.touch-capable .equipment kbd{font-size:10px;padding:0 2px}
  html.touch-capable .touch-controls{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left))}
  html.touch-capable .dpad{grid-template-columns:repeat(3,40px);gap:3px}
  html.touch-capable .dpad button{width:40px;height:36px;min-height:36px;padding:0}
  html.touch-capable 
}
@media(max-width:900px) and (max-height:430px) and (orientation:landscape){
  html.touch-capable .topbar{height:26px;min-height:26px}
  html.touch-capable .status{height:24px;min-height:24px}
  html.touch-capable .equipment{height:32px;min-height:32px}
  html.touch-capable canvas{width:min(100vw,calc((100dvh - 82px)*4/3))}
  html.touch-capable .dpad{grid-template-columns:repeat(3,36px)}
  html.touch-capable .dpad button{width:36px;height:32px;min-height:32px}
  html.touch-capable 
}

/* Floating virtual stick: any touch in the left movement region becomes the stick origin. */
.move-zone{position:absolute;left:0;top:0;bottom:12%;width:40%;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;z-index:3}
.move-stick{position:absolute;left:18%;top:70%;width:280px;height:280px;border-radius:50%;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border:2px solid #8f7d69;background:#2f2a2cb8;backdrop-filter:none;-webkit-backdrop-filter:none;transform:translate(-50%,-50%) scale(.94);opacity:0;transition:opacity .06s linear,transform .06s linear;will-change:left,top,transform,opacity}
.move-stick.active{opacity:.92;transform:translate(-50%,-50%) scale(1)}
.move-stick-ring{position:absolute;inset:34px;border-radius:50%;border:2px solid #b4a08a99;box-shadow:inset 0 0 0 1px #0008}
.move-stick-ring:before,.move-stick-ring:after{content:"";position:absolute;background:#b4a08a66}
.move-stick-ring:before{left:50%;top:12px;bottom:12px;width:2px}
.move-stick-ring:after{top:50%;left:12px;right:12px;height:2px}
.move-stick-knob{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:#9b8064e6;border:2px solid #e0c49bbb;box-shadow:0 3px 12px #0009;transform:translate(0,0);will-change:transform}
@media(max-width:900px){html.touch-capable .move-zone{width:40%}html.touch-capable .move-stick{width:280px;height:280px}html.touch-capable .move-stick-ring{inset:34px}}
@media(max-width:900px) and (max-height:430px) and (orientation:landscape){html.touch-capable .move-zone{width:42%}html.touch-capable .move-stick{width:260px;height:260px}html.touch-capable .move-stick-ring{inset:31px}html.touch-capable .move-stick-knob{width:62px;height:62px;margin:-31px 0 0 -31px}}


/* r62: explicit mobile action adapters. Attack never doubles as a stair transition. */
.touch-actions{position:absolute;right:max(18px,calc(env(safe-area-inset-right) + 18px));top:42%;bottom:auto;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:none;margin-left:0;z-index:6}
.touch-actions button{pointer-events:auto;width:104px;height:104px;min-width:104px;min-height:104px;padding:0;border-radius:50%;background:#4b3b2f;border:3px solid #e0c49b;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;touch-action:none;font-weight:800;font-size:20px;letter-spacing:.08em;text-shadow:none}
.touch-actions button:active,.touch-actions button.pressed{transform:scale(.94);background:#6a5037}
#pickup,#stair{display:inline-flex;align-items:center;justify-content:center}
.touch-actions button[hidden]{display:none!important}
.touch-actions button:disabled{opacity:.38;filter:saturate(.5)}
.game-shell:fullscreen,.game-shell:-webkit-full-screen{width:100vw;height:100vh;max-width:none;margin:0;background:#111;display:flex;flex-direction:column}
.game-shell:fullscreen .canvas-wrap,.game-shell:-webkit-full-screen .canvas-wrap{flex:1;min-height:0}
.game-shell:fullscreen canvas,.game-shell:-webkit-full-screen canvas{width:min(100vw,calc((100vh - 92px)*4/3));height:auto;max-width:100%;max-height:100%}
html.game-fullscreen-fallback{width:100%;min-height:calc(100dvh + 120px);overflow-x:hidden;overflow-y:auto}html.game-fullscreen-fallback body{width:100%;min-height:calc(100dvh + 120px);overflow-x:hidden;overflow-y:auto;background:#111}html.game-fullscreen-fallback .game-shell{position:fixed;left:0;top:0;z-index:1200;width:100vw;height:var(--game-vvh,100dvh);max-width:none;margin:0;border:0;box-shadow:none;background:#111;display:flex;flex-direction:column}html.game-fullscreen-fallback .game-shell .canvas-wrap{flex:1;min-height:0}html.game-fullscreen-fallback .game-shell canvas{width:min(100vw,calc((var(--game-vvh,100dvh) - 92px)*4/3));height:auto;max-width:100%;max-height:100%}
@media(max-width:900px){html.touch-capable .touch-actions{right:max(18px,calc(env(safe-area-inset-right) + 18px));top:42%;gap:12px}html.touch-capable .touch-actions button{width:104px;height:104px;min-width:104px;min-height:104px;font-size:20px}html.touch-capable }
@media(max-width:900px) and (max-height:430px) and (orientation:landscape){html.touch-capable .touch-actions{right:max(16px,calc(env(safe-area-inset-right) + 16px));top:43%;bottom:auto;gap:10px}html.touch-capable .touch-actions button{width:92px;height:92px;min-width:92px;min-height:92px;padding:0;font-size:18px}html.touch-capable }


/* Source PlayScreen HUD restoration: on touch layouts the information/status/item UI
   lives inside the 480x360 canvas, matching PlayScreen/StatBar/ItemSlot coordinates. */
@media(pointer:coarse) and (max-width:900px){
  .game-shell .topbar{position:absolute;z-index:8;top:max(4px,env(safe-area-inset-top));right:max(4px,env(safe-area-inset-right));left:auto;width:auto;height:auto;min-height:0;padding:0;gap:4px;background:transparent;pointer-events:none}
  .game-shell .topbar span{display:none}
  .game-shell .topbar button{pointer-events:auto;min-height:24px;padding:2px 5px;font-size:10px;background:#201c20}
  .game-shell .status,.game-shell .equipment{display:none}
  .game-shell .canvas-wrap{flex:1;min-height:0;height:100%}
  .game-shell canvas{width:min(100vw,calc(var(--game-vvh,100dvh)*4/3));height:auto;max-height:100%;max-width:100%;flex:none}
  .touch-controls{padding:8px max(8px,env(safe-area-inset-right)) 44px max(8px,env(safe-area-inset-left))}
}
@media(pointer:coarse) and (max-width:900px) and (max-height:430px) and (orientation:landscape){
  .game-shell canvas{width:min(100vw,calc(var(--game-vvh,100dvh)*4/3))}
  .touch-controls{padding-bottom:38px}
}
@media(max-width:900px){
  html.touch-capable .game-shell .topbar{position:absolute;z-index:8;top:max(4px,env(safe-area-inset-top));right:max(4px,env(safe-area-inset-right));left:auto;width:auto;height:auto;min-height:0;padding:0;gap:4px;background:transparent;pointer-events:none}
  html.touch-capable .game-shell .topbar span{display:none}
  html.touch-capable .game-shell .topbar button{pointer-events:auto;min-height:24px;padding:2px 5px;font-size:10px;background:#201c20}
  html.touch-capable .game-shell .status,html.touch-capable .game-shell .equipment{display:none}
  html.touch-capable .game-shell .canvas-wrap{flex:1;min-height:0;height:100%}
  html.touch-capable .game-shell canvas{width:min(100vw,calc(var(--game-vvh,100dvh)*4/3));height:auto;max-height:100%;max-width:100%;flex:none}
  html.touch-capable .touch-controls{padding-bottom:44px}
}
@media(max-width:900px) and (max-height:430px) and (orientation:landscape){html.touch-capable .touch-controls{padding-bottom:38px}}

/* Source PlayScreen HUD: legacy HTML bars must never consume playfield space. */
.game-shell .topbar{position:absolute;z-index:12;top:4px;right:4px;left:auto;width:auto;height:auto;min-height:0;padding:0;gap:4px;background:transparent;pointer-events:none}
.game-shell .topbar span{display:none}
.game-shell .topbar button{pointer-events:auto;min-height:24px;padding:2px 5px;font-size:10px;background:#201c20}
.game-shell .status,.game-shell .equipment{display:none}
.game-shell .canvas-wrap{min-height:0}
.game-shell canvas{width:100%;height:auto;max-width:100%;aspect-ratio:4/3}

/* Mobile play controls: fullscreen and the dedicated attack button are omitted.
   The map itself is the source-faithful click/tap attack surface. */

@media(max-width:900px){html.touch-capable }
@media(max-width:900px) and (max-height:430px) and (orientation:landscape){html.touch-capable }
@media(pointer:coarse) and (max-width:900px){}
@media(pointer:coarse) and (max-height:430px) and (orientation:landscape){}

/* Source GraveWindow reset branch. Replay/delete/revive stay unavailable until their
   persistence paths are restored; the reset/confirm wording mirrors GraveWindow.as. */
.death-menu{position:absolute;inset:0;z-index:30;display:grid;place-items:center;pointer-events:none;background:#09080a66}
.death-menu[hidden]{display:none!important}
.death-panel{min-width:310px;max-width:88%;padding:16px 20px 18px;text-align:center;background:#171416ee;border:2px solid #8e7657;box-shadow:0 8px 28px #000c;pointer-events:auto}
.death-grave-title{font-size:18px;margin-bottom:18px;color:#eee3cf}
.death-panel p{margin:7px 0;font-size:16px;color:#eee3cf}
.death-panel button{min-width:112px;min-height:44px;padding:7px 14px;font-size:16px;border-color:#a8885d;background:#443425}
.death-confirm-actions{display:flex;justify-content:center;gap:22px;margin-top:18px}
@media(max-height:430px) and (orientation:landscape){.death-panel{padding:12px 18px 14px}.death-grave-title{margin-bottom:12px}.death-panel p{font-size:14px;margin:5px 0}.death-panel button{min-height:40px}}