:root{--ink:#f1e6c8;--muted:#b8a888;--gold:#e8b64a;--red:#c8352c;--blue:#3c6ad8;--panel:#140e0af0;--edge:#6b4a26;--safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);color:var(--ink);font-family:VT323,ui-monospace,monospace}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:#0b0806;height:100%;margin:0;overflow:hidden}#app{touch-action:none;position:fixed;inset:0}#view{width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;position:absolute;inset:0}.hidden{display:none!important}button{font:inherit;color:inherit;cursor:pointer;border:2px solid var(--edge);touch-action:manipulation;background:linear-gradient(#3a2816,#24180c);border-radius:6px;padding:.5rem .9rem;font-size:1.25rem;line-height:1.1;box-shadow:inset 0 1px #ffdc9626,0 2px #000}button:hover:not(:disabled){border-color:var(--gold)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{border-color:var(--gold);color:#fff3d6;background:linear-gradient(#7a4a1c,#4a2a0e)}button.wide{width:100%;margin-top:.8rem}button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}#hurt{pointer-events:none;opacity:0;background:radial-gradient(#0000 45%,#aa0000bf);transition:opacity .35s;position:absolute;inset:0}#hurt.on{opacity:1;transition:none}#hud{pointer-events:none;position:absolute;inset:0}#hud button{pointer-events:auto;touch-action:none}#vitals{top:calc(8px + var(--safe-t));left:calc(8px + var(--safe-l));text-shadow:1px 1px #000;background:#0a07058c;border:1px solid #e8b64a59;border-radius:6px;width:clamp(130px,30vw,210px);padding:6px 8px;font-size:1.05rem;position:absolute}.name-line{white-space:nowrap;justify-content:space-between;gap:6px;font-size:1.15rem;display:flex;overflow:hidden}#hud-level{color:var(--gold)}.sub-line{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;overflow:hidden}.bar{background:#1a0f0a;border:1px solid #000;border-radius:2px;height:13px;margin:3px 0;position:relative;overflow:hidden}.bar i{transition:width .2s;display:block;position:absolute;inset:0 auto 0 0}.bar span{padding-left:4px;font-size:.85rem;line-height:12px;display:block;position:relative}.bar.hp i{background:linear-gradient(#e05040,#8a1a14)}.bar.mp i{background:linear-gradient(#5a8aff,#1a3a9a)}.bar.xp{height:4px}.bar.xp i{background:var(--gold)}#compass{top:calc(8px + var(--safe-t));background:#0a070599;border:1px solid #e8b64a73;border-radius:4px;width:clamp(96px,24vw,220px);height:26px;position:absolute;left:50%;overflow:hidden;transform:translate(-50%)}#compass-strip{white-space:nowrap;height:22px;font-size:1.15rem;position:absolute;top:2px;left:0}#compass-strip span{text-align:center;width:30px;color:var(--muted);display:inline-block}#compass-strip span.card{color:var(--ink)}#compass-strip span.north{color:var(--red)}#compass b{background:var(--gold);opacity:.8;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0;left:50%}#side{top:calc(8px + var(--safe-t));right:calc(8px + var(--safe-r));flex-direction:column;align-items:stretch;gap:5px;width:clamp(72px,18vw,110px);display:flex;position:absolute}#minimap{aspect-ratio:1;width:100%;image-rendering:pixelated;pointer-events:auto;cursor:pointer;background:#0000008c;border:1px solid #e8b64a80;border-radius:4px}button.tool{background:#24180ccc;padding:2px 4px;font-size:1rem}#messages{top:calc(44px + var(--safe-t));text-align:center;text-shadow:1px 1px #000,0 0 4px #000;flex-direction:column;align-items:center;gap:2px;width:min(52vw,520px);font-size:1.15rem;display:flex;position:absolute;left:50%;transform:translate(-50%)}#messages div{animation:5s forwards msg}#messages .good{color:#9ee07a}#messages .bad{color:#ff8a70}#messages .loot{color:var(--gold)}#messages .quest{color:#d6b0ff}@keyframes msg{0%,80%{opacity:1}to{opacity:0}}#area-title{text-align:center;opacity:0;text-shadow:2px 2px #000;position:absolute;top:28%;left:0;right:0}#area-title.show{animation:3.4s forwards area}#area-title h2{color:#f6e2b0;margin:0;font-family:Pirata One,serif;font-size:clamp(2rem,7vw,3.6rem);font-weight:400}#area-title p{color:var(--muted);margin:0;font-size:1.4rem}@keyframes area{0%{opacity:0}15%,70%{opacity:1}to{opacity:0}}#torch-hand{aspect-ratio:1/2;width:clamp(60px,16vmin,140px);transform:rotate(10deg);translate:calc(var(--bx,0px) * -.6) var(--by,0);filter:drop-shadow(0 0 22px #ff9628bf);animation:.18s infinite alternate torch-flicker;position:absolute;bottom:-4%;left:24%}#torch-hand canvas{width:100%;height:100%;image-rendering:pixelated;display:block}@keyframes torch-flicker{to{filter:drop-shadow(0 0 30px #ffaa3ce6)}}body:not(.touch) #torch-hand{left:10%}#side .tool.lit{color:#ffd890;border-color:#ffb040}#crosshair{background:#fff0c899;border-radius:50%;width:4px;height:4px;margin:-2px;position:absolute;top:50%;left:50%}#weapon-wrap{aspect-ratio:3/4;width:clamp(120px,34vmin,300px);translate:var(--bx,0) var(--by,0);position:absolute;bottom:-2%;right:18%}#weapon{transform-origin:80% 100%;width:100%;height:100%;transform:rotate(-12deg)}#weapon canvas{width:100%;height:100%;image-rendering:pixelated;display:block}#weapon.swing{animation:.32s ease-out swing}#weapon.cast{filter:drop-shadow(0 0 18px #ff9a30);animation:.45s ease-out cast}@keyframes swing{0%{transform:rotate(-12deg)}25%{transform:rotate(28deg)translate(10%,-6%)}65%{transform:rotate(-70deg)translate(-38%,4%)}to{transform:rotate(-12deg)}}@keyframes cast{0%{transform:rotate(-12deg)}35%{transform:rotate(-4deg)translateY(-16%)scale(1.05)}to{transform:rotate(-12deg)}}#joystick{left:calc(80px + var(--safe-l));top:calc(100% - 90px - var(--safe-b));opacity:.55;background:radial-gradient(#1e140a59,#1e140a26);border:2px solid #e8b64a59;border-radius:50%;width:116px;height:116px;margin:-58px 0 0 -58px;position:absolute}#joystick.active{opacity:.95}#stick{border:2px solid var(--gold);background:radial-gradient(#8a6034,#3a2412);border-radius:50%;width:48px;height:48px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#actions{right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));width:200px;height:172px;position:absolute}.act{background:radial-gradient(circle at 40% 35%,#5a3c1ce6,#1e1208e6);border:2px solid #e8b64ab3;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;padding:0;font-size:.95rem;display:flex;position:absolute}.act svg{width:46%;height:46%;fill:var(--ink)}.act.big{width:92px;height:92px;font-size:1.1rem;bottom:0;right:0}#btn-cast{width:66px;height:66px;bottom:6px;right:100px}#btn-cast svg{fill:#ffae4a}#btn-spell{width:36px;height:36px;font-size:1.2rem;bottom:74px;right:150px}.act.potion{width:46px;height:46px;font-size:1.15rem}.act.potion:before{content:"";border-radius:3px 3px 7px 7px;width:14px;height:18px;margin-bottom:-2px}.act.potion.hp{bottom:82px;right:98px}.act.potion.hp:before{background:var(--red)}.act.potion.mp{bottom:104px;right:46px}.act.potion.mp:before{background:var(--blue)}#btn-interact{left:50%;bottom:calc(26% + var(--safe-b));border-color:var(--gold);background:linear-gradient(#7a4a1c,#4a2a0e);max-width:70vw;padding:.55rem 1.1rem;font-size:1.35rem;animation:1.6s infinite pulse;position:absolute;transform:translate(-50%)}@keyframes pulse{50%{box-shadow:0 0 18px #e8b64a99,0 2px #000}}#desktop-hint{color:#f1e6c8b3;white-space:nowrap;text-shadow:1px 1px #000;font-size:1rem;position:absolute;bottom:6px;left:50%;transform:translate(-50%)}body.touch #desktop-hint,body:not(.touch) #joystick{display:none}.screen{padding:calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));touch-action:pan-y;background:#05030299;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow-y:auto}#title,#create{background:radial-gradient(at 50% 30%,#3c28148c,#050302eb)}.panel{background:var(--panel);border:2px solid var(--edge);text-align:center;border-radius:10px;outline:1px solid #000;width:min(560px,100%);max-height:100%;padding:1.2rem 1.4rem;font-size:1.3rem;overflow-y:auto;box-shadow:0 0 0 4px #00000080,0 20px 60px #000000b3}.panel h1,.panel h2{color:#f6e2b0;margin:.1rem 0 .4rem;font-family:Pirata One,serif;font-weight:400}.panel h1{letter-spacing:1px;font-size:clamp(2.6rem,10vw,4.4rem);line-height:1}.panel h2{font-size:2rem}.panel h1.red{color:#ff6a50}.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:2px;margin:0;font-size:1rem}.lede{color:#e2d4b2;margin:.4rem 0 1rem}.fine{color:var(--muted);margin:.7rem 0 0;font-size:1rem}.stack{flex-direction:column;gap:.5rem;display:flex}.row{justify-content:space-between;gap:.6rem;margin-top:1rem;display:flex}.row button{flex:1}.title-panel{text-align:center}.title-panel h1{text-shadow:0 4px #3a1a08;font-size:clamp(3.4rem,14vw,6rem)}.field{text-align:left;flex-direction:column;gap:4px;margin-bottom:.8rem;display:flex}.field span{color:var(--gold)}.field input{font:inherit;color:var(--ink);border:2px solid var(--edge);-webkit-user-select:text;user-select:text;background:#120c07;border-radius:6px;padding:.45rem .6rem;font-size:1.4rem}.field input:focus{border-color:var(--gold);outline:none}.class-list{grid-template-columns:repeat(3,1fr);gap:.5rem;display:grid}.class-card{text-align:left;flex-direction:column;gap:4px;min-height:100%;padding:.6rem;display:flex}.class-card strong{color:#f6e2b0;font-family:Pirata One,serif;font-size:1.5rem;font-weight:400}.class-card small{color:var(--muted);font-size:1rem;line-height:1.05}.class-card.selected{border-color:var(--gold);background:linear-gradient(#5a3814,#2a1808)}@media (width<=520px){.class-list{grid-template-columns:1fr}}.stats-grid{text-align:left;grid-template-columns:repeat(3,1fr);gap:4px 12px;margin-top:.8rem;font-size:1.15rem;display:grid}.stats-grid b{color:var(--gold);float:right;font-weight:400}.dialog-panel{text-align:left}#dlg-text{margin:.6rem 0;line-height:1.15}#dlg-gold{margin:0 0 .6rem}#dlg-options button{text-align:left}.tabs{gap:.4rem;margin-bottom:.8rem;display:flex}.tabs button{flex:1;padding:.4rem .2rem;font-size:1.05rem}.tabs button.active{border-color:var(--gold);background:linear-gradient(#5a3814,#2a1808)}.tab{text-align:left}.tab h3{color:#f6e2b0;margin:.6rem 0 .2rem;font-family:Pirata One,serif;font-size:1.5rem;font-weight:400}.tab ul{margin:.2rem 0;padding-left:1.1rem}.tab li{margin:2px 0}.inv-row{border-bottom:1px solid #6b4a2666;align-items:center;gap:.4rem;padding:3px 0;display:flex}.inv-row span{flex:1}.inv-row button{padding:.2rem .6rem;font-size:1.05rem}.kv{grid-template-columns:repeat(2,1fr);gap:2px 16px;display:grid}.kv div{justify-content:space-between;display:flex}.kv b{color:var(--gold);font-weight:400}.map-panel{width:min(640px,100%)}#map-canvas{aspect-ratio:1;width:min(100%,60vh);image-rendering:pixelated;border:2px solid var(--edge);background:#000;border-radius:6px}#travel{margin-top:.6rem}#travel button{text-align:left}#rotate-hint{display:none}@media (orientation:portrait) and (width<=600px){body.touch.playing #rotate-hint{left:50%;bottom:calc(196px + var(--safe-b));color:var(--muted);pointer-events:none;background:#00000080;border-radius:4px;padding:4px 10px;font-size:1rem;animation:7s forwards msg;display:block;position:absolute;transform:translate(-50%)}#weapon-wrap{width:44vw;bottom:120px;right:4%}#messages{width:92vw;top:calc(160px + var(--safe-t))}#vitals{width:50vw}#compass{top:calc(128px + var(--safe-t))}}@media (orientation:landscape) and (height<=540px){#side{grid-template-columns:62px 84px;grid-auto-rows:min-content;gap:4px;width:auto;display:grid}#minimap{grid-area:1/2/span 4;width:84px}#side .tool{grid-column:1;padding:3px 4px;font-size:.95rem}#vitals{width:clamp(130px,24vw,190px)}#messages{width:min(44vw,460px)}}@media (height<=420px){.panel{padding:.8rem 1rem;font-size:1.15rem}.panel h2{font-size:1.6rem}#actions{transform-origin:100% 100%;transform:scale(.9)}}