html,body{margin:0;padding:0;background:#0a1a2a;color:#fff;font-family:system-ui,sans-serif;min-height:100vh;min-height:100dvh;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{display:flex;align-items:center;justify-content:center;padding:0;gap:8px}#game-root{display:flex;flex-direction:column;align-items:center;gap:8px}#hud{width:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;line-height:1;font-size:.95rem;font-variant-numeric:tabular-nums}.hud-left{display:flex;align-items:center;gap:16px;height:100%}.hud-left>*:not(.hidden){display:inline-flex;align-items:center;line-height:1}.hud-right{display:flex;align-items:center;gap:8px;height:100%}#canvas-stage{position:relative;display:flex}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#0a1a2aeb;border-radius:6px;pointer-events:none;z-index:10}.overlay.hidden,.hidden{display:none}.overlay-title{font-size:1.8rem;font-weight:700;color:#ffd166}.overlay-sub{font-size:1rem;opacity:.85}#play-again{pointer-events:auto;width:auto;min-width:200px;margin-top:16px}#game{display:block;border:3px solid #fff8e7;border-radius:6px;box-shadow:0 4px 16px #0000007f;background:#f4e4bc;box-sizing:border-box;width:min(640px,calc(100vw - var(--canvas-horiz-budget)),calc(100dvh - var(--canvas-vert-budget)));height:min(640px,calc(100vw - var(--canvas-horiz-budget)),calc(100dvh - var(--canvas-vert-budget)));touch-action:none}:root{--dpad-btn: clamp(48px, min(18vw, 14vh), 72px);--dpad-w: calc(var(--dpad-btn) * 3 + 8px);--attack-btn: clamp(60px, min(22vw, 18vh), 88px);--canvas-vert-budget: calc(72px + var(--dpad-w));--canvas-horiz-budget: 0px}.play-area{display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;height:100dvh}.controls-row{display:flex;flex-direction:row;justify-content:space-evenly;align-items:center;width:100%;gap:16px;padding:16px 0;box-sizing:border-box;flex-grow:1}.dpad{display:grid;grid-template-columns:repeat(3,var(--dpad-btn));grid-template-rows:repeat(3,var(--dpad-btn));gap:4px;touch-action:none;flex-shrink:0}.dpad button{grid-area:var(--row) / var(--col);position:relative;font-size:0;border-radius:50%}.dpad button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;transform:translate(-50%,-50%)}.dpad .btn-up:before{border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:16px solid currentColor}.dpad .btn-down:before{border-left:12px solid transparent;border-right:12px solid transparent;border-top:16px solid currentColor}.dpad .btn-left:before{border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:16px solid currentColor}.dpad .btn-right:before{border-top:12px solid transparent;border-bottom:12px solid transparent;border-left:16px solid currentColor}.dpad .btn-up{--row: 1;--col: 2}.dpad .btn-left{--row: 2;--col: 1}.dpad .btn-right{--row: 2;--col: 3}.dpad .btn-down{--row: 3;--col: 2}.btn-attack{width:var(--attack-btn);height:var(--attack-btn);border-radius:50%;font-size:2rem;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;touch-action:manipulation}.btn-attack:before{content:"";position:absolute;inset:-14px;border-radius:50%}.dpad button,.btn-attack{background:#fff8e72e;border:2px solid #fff8e7;color:#fff8e7;cursor:pointer;font-family:inherit;transition:background .08s,transform .08s;-webkit-tap-highlight-color:transparent}.dpad button{touch-action:manipulation}.dpad button.pressed,.dpad button:active,.btn-attack.pressed,.btn-attack:active{background:#ffd166;color:#1a4d6b;transform:scale(.94)}@media(min-width:1152px),(min-width:600px)and (orientation:landscape){:root{--dpad-btn: clamp(48px, min(15vw, 11vh), 72px);--canvas-vert-budget: 64px;--canvas-horiz-budget: calc(var(--dpad-w) * 2 + 32px)}.play-area{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto 1fr;grid-template-areas:"hud    hud    hud" "dpad canvas attack";gap:0;justify-items:center;align-items:center;width:100dvw;height:100dvh}#hud{grid-area:hud}#canvas-stage{grid-area:canvas}.controls-row{display:contents}.dpad{grid-area:dpad;justify-self:center}.btn-attack{grid-area:attack;justify-self:center}}#hud{padding:12px}#hud-settings,#hud-map{background:#fff8e71f;border:1.5px solid rgb(255 248 231 / 50%);color:#fff8e7;font-size:1rem;width:32px;height:32px;border-radius:6px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;padding:0}#hud-settings:hover,#hud-settings:active,#hud-map:hover,#hud-map:active{background:#ffd16640;border-color:#ffd166}.overlay-fullscreen{position:fixed;inset:0;background:radial-gradient(ellipse at top,#235c82f2,#081624fa),#0a1a2a;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:overlay-fade .16s ease-out}.overlay-fullscreen.hidden{display:none}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}.profile-card{background:linear-gradient(180deg,#1f5b80,#143e58);border:2px solid #fff8e7;border-radius:16px;padding:28px 24px 24px;min-width:280px;max-width:440px;width:100%;box-shadow:0 12px 32px #0000008c,0 0 0 6px #ffd16614;display:flex;flex-direction:column;gap:16px;animation:card-pop .22s cubic-bezier(.2,.8,.3,1.2)}@keyframes card-pop{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.profile-card h1,.profile-card h2{margin:0;color:#ffd166;text-align:center;letter-spacing:.02em}.profile-card h1{font-size:1.8rem;font-weight:700}.profile-card h2{font-size:1.5rem}.boot-hero{display:flex;flex-direction:column;align-items:center;gap:4px}.boot-emoji{font-size:2.4rem;line-height:1;filter:drop-shadow(0 2px 4px rgb(0 0 0 / 40%))}.boot-prompt{margin:0 0 8px;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;color:#fff8e7b3;text-align:center}.profile-sub{margin:0;font-size:.95rem;opacity:.85;text-align:center}.profile-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto}.profile-list li{display:flex;align-items:stretch;gap:8px}.profile-list .profile-play{flex:1;background:#fff8e714;border:1.5px solid rgb(255 248 231 / 28%);border-radius:10px;padding:12px 16px;color:#fff8e7;font-family:inherit;font-size:1.05rem;text-align:left;cursor:pointer;transition:background .12s,border-color .12s,transform .08s;display:flex;flex-direction:column;gap:3px}.profile-list .profile-play:hover{background:#fff8e724;border-color:#fff8e799}.profile-list .profile-play:active{transform:scale(.98)}.profile-list .profile-play.preselected{background:#ffd1662e;border-color:#ffd166;box-shadow:0 0 0 2px #ffd16640}.profile-list .profile-delete{background:transparent;border:1.5px solid rgb(255 109 109 / 45%);color:#ffaaaae5;border-radius:10px;width:40px;cursor:pointer;font-size:1rem;transition:background .12s,border-color .12s}.profile-list .profile-delete:hover{background:#ff6d6d2e;border-color:#ff6d6dcc;color:#fff}.profile-action{background:#ffd166;border:none;color:#1a4d6b;font-weight:700;font-family:inherit;font-size:1rem;padding:12px 16px;border-radius:10px;cursor:pointer;width:100%;transition:background .12s,transform .08s,box-shadow .12s;box-shadow:0 2px #0003}.profile-action:hover{background:#ffdb8a}.profile-action:active{transform:translateY(1px);box-shadow:0 1px #0003}.profile-action:not(.hidden){display:block}.profile-action+.profile-action{margin-top:10px}.profile-primary{font-size:1.1rem;padding:14px 16px}.profile-cancel{background:#fff8e71a;color:#fff8e7;border:1.5px solid rgb(255 248 231 / 35%);box-shadow:none}.profile-cancel:hover{background:#fff8e72e}.profile-action.locked,.profile-action:disabled{background:#fff8e714;color:#fff8e773;box-shadow:none;cursor:not-allowed}.profile-action.locked:before{content:"\1f512  "}.profile-action.locked:hover,.profile-action:disabled:hover{background:#fff8e714;transform:none}.profile-list .profile-play-meta{display:block;font-size:.8rem;font-weight:400;opacity:.75;letter-spacing:.02em}.settings-toggle{display:flex;align-items:center;gap:10px;background:#fff8e714;border:1.5px solid rgb(255 248 231 / 28%);border-radius:10px;padding:10px 14px;color:#fff8e7;font-size:.95rem;cursor:pointer;user-select:none;margin-top:10px}.settings-toggle:hover{background:#fff8e724}.settings-toggle input[type=checkbox]{width:18px;height:18px;accent-color:#ffd166;cursor:pointer}@media(max-height:540px){.overlay-fullscreen{padding:8px}.profile-card{padding:14px 20px;gap:8px;max-width:520px}.profile-card h1{font-size:1.4rem}.profile-card h2{font-size:1.2rem}.boot-hero{gap:0}.boot-emoji{font-size:1.6rem}.boot-prompt{margin:0 0 8px}.profile-list{max-height:180px;gap:6px}.profile-list .profile-play{padding:8px 12px;font-size:.95rem}.profile-action{padding:10px 14px}.profile-action+.profile-action{margin-top:6px}.profile-primary{font-size:1rem;padding:12px 14px}.settings-toggle{padding:8px 12px;margin-top:4px}}.map-card{max-width:min(92vw,480px)}#map-container{display:flex;justify-content:center;padding:4px 0 8px;width:100%;overflow:hidden}.minimap-grid{--mm-gap: 12px;--mm-cell-max: 56px;display:grid;grid-template-columns:repeat(var(--mm-cols, 1),minmax(0,1fr));gap:var(--mm-gap);width:min(100%,calc(var(--mm-cols, 1) * var(--mm-cell-max) + (var(--mm-cols, 1) - 1) * var(--mm-gap)));margin-inline:auto}.minimap-room{position:relative;aspect-ratio:1;background:#fff8e71f;border:1.5px solid rgb(255 248 231 / 50%);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:clamp(.9rem,4vw,1.6rem);line-height:1}.minimap-room.current{background:#ffd16647;border-color:#ffd166;box-shadow:0 0 0 2px #ffd16659}.minimap-door{position:absolute;background:#ffd166;pointer-events:none}.minimap-door-up{top:calc(-1 * var(--mm-gap));left:50%;width:4px;height:var(--mm-gap);transform:translate(-50%)}.minimap-door-down{bottom:calc(-1 * var(--mm-gap));left:50%;width:4px;height:var(--mm-gap);transform:translate(-50%)}.minimap-door-left{left:calc(-1 * var(--mm-gap));top:50%;width:var(--mm-gap);height:4px;transform:translateY(-50%)}.minimap-door-right{right:calc(-1 * var(--mm-gap));top:50%;width:var(--mm-gap);height:4px;transform:translateY(-50%)}.minimap-empty{margin:0;font-size:.95rem;color:#fff8e7bf;text-align:center}