:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f4e8d7;background:#101827;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 50% -20%,#293953 0%,#101827 65%)}
body{min-height:100dvh}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}button:focus-visible{outline:3px solid #f4c57d;outline-offset:3px}[hidden]{display:none!important}
.app{width:min(100%,1024px);margin:0 auto;padding:12px 18px 18px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;margin:0 2px 11px}
.logo{display:flex;align-items:center;gap:12px;min-width:0}.brand-icon{display:grid;place-items:center;flex:none;width:43px;height:43px;border-radius:50%;background:#793b44;border:2px solid #d1a96d;color:#ffe4ab;font:bold 18px Georgia,serif;box-shadow:0 0 0 3px #9d784b36}
.brand-text{min-width:0}.kicker{display:block;color:#d6b182;font-size:10px;letter-spacing:.18em;font-weight:750}.brand-text h1{margin:1px 0 0;font:normal clamp(17px,2.4vw,25px)/1.15 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.small-button{display:flex;align-items:center;gap:7px;padding:8px 13px;background:#223149;color:#e9d5b5;border:1px solid #65718a;border-radius:10px;font-size:21px;line-height:1}.small-button span{font:12px system-ui}
.layout,.game-column{min-width:0}.frame{padding:4px;border:1px solid #b69b6e;background:#514d51;border-radius:13px;box-shadow:0 18px 60px #0008;overflow:hidden}
.viewport{position:relative;height:min(74dvh,720px);min-height:425px;overflow:hidden;border-radius:9px;isolation:isolate;background:#b4a188;touch-action:none}
.viewport canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
.scene-hud{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px;pointer-events:none}
.location-badge{display:flex;align-items:center;gap:7px;border:1px solid #eed0a599;background:#1c293bdf;box-shadow:0 3px 14px #15121e55;color:#f9e6c8;padding:5px 9px 5px 5px;border-radius:7px;font-size:10px;letter-spacing:.08em;font-weight:800;white-space:nowrap}.location-badge small{font-size:9px;font-weight:500;color:#e5c99e}
.location-symbol{display:grid;place-items:center;width:28px;height:28px;background:#804249;border:1px solid #eac291;border-radius:5px;color:#ffedba;font:bold 14px Georgia,serif;letter-spacing:0}
.save-indicator{display:flex;align-items:center;gap:6px;background:#172438bf;border:1px solid #e1cba75c;border-radius:6px;color:#e9dac3;padding:8px 9px;font-size:10px;font-weight:650;white-space:nowrap}.status-dot{background:#85d4a2;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 2px #85d4a21d}
.quest-hud{position:absolute;z-index:2;top:59px;left:14px;max-width:min(410px,calc(100% - 28px));width:calc(100% - 28px);padding:9px 13px 10px;background:#1b2940df;color:#faf0dd;border:1px solid #bf9d6d9a;border-radius:9px;box-shadow:0 4px 14px #12142155;pointer-events:none;backdrop-filter:blur(2px)}
.quest-line{display:flex;align-items:center;justify-content:space-between;color:#e3bc87;font-size:9px;font-weight:800;letter-spacing:.14em}.quest-hud p{font-size:13px;line-height:1.35;margin:5px 0 8px;font-weight:550}.progress-track{height:3px;background:#69788e7b;border-radius:4px;overflow:hidden}.progress-track div{height:100%;width:0;background:#f2c47f;transition:width .25s}
.mobile-controls{position:absolute;z-index:4;bottom:14px;left:0;right:0;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:0 19px;pointer-events:none}
.dpad{width:128px;height:128px;position:relative;flex:none;touch-action:none;pointer-events:auto}
.dpad button{position:absolute;width:43px;height:43px;display:grid;place-items:center;padding:0;border-radius:9px;border:1px solid #f6e5c891;background:linear-gradient(145deg,#263850ce,#1b293dd9);color:#fcead0;box-shadow:0 2px 7px #0e192b75;font:19px system-ui;touch-action:none}
.dpad .up{left:43px;top:0}.dpad .down{left:43px;top:85px}.dpad .left{left:0;top:43px}.dpad .right{left:85px;top:43px}.dpad-center{position:absolute;left:43px;top:43px;width:43px;height:43px;border-radius:6px;background:#23344a9d;border:1px solid #d8c8a62c;pointer-events:none}
.dpad button:active,.dpad button.is-pressed{background:#b58956e8;color:#172033}.action-group{display:flex;flex-direction:column;align-items:center;gap:9px;min-width:74px;max-width:155px;pointer-events:auto}
.a-button{width:73px;height:73px;display:grid;place-items:center;border-radius:50%;border:3px solid #f5d1a9a8;background:#893d4cd9;color:#fff1d7;box-shadow:0 4px 15px #17182c80;font:bold 28px Georgia,serif;touch-action:manipulation}.a-button:active{transform:scale(.95);background:#a8505f}
.action-label{color:#fff5df;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;letter-spacing:.04em;font-weight:760;text-shadow:0 2px 4px #061424,0 0 5px #061424}
.toast{position:absolute;z-index:5;bottom:158px;left:50%;transform:translateX(-50%);max-width:calc(100% - 42px);width:max-content;padding:9px 14px;text-align:center;background:#1b2c42ee;border:1px solid #dbb986bb;color:#fff4da;border-radius:7px;box-shadow:0 7px 20px #0b101b85;font-size:12px;line-height:1.4;pointer-events:none}
.dialogue{position:absolute;z-index:7;bottom:15px;left:14px;right:14px;min-height:145px;max-height:calc(100% - 115px);overflow:auto;background:#fff5df;color:#263147;border:3px solid #253952;outline:2px solid #f1d7a2;border-radius:12px;padding:14px 16px 10px;box-shadow:0 7px 25px #0a142f85;touch-action:pan-y}
.speaker{display:inline-block;padding:4px 9px;margin:-2px 0 8px;border-radius:5px;background:#884352;color:#fff2d9;font-size:10px;font-weight:800;letter-spacing:.07em}.dialogue p{font-size:14px;line-height:1.46;margin:0 0 12px;white-space:pre-wrap}.dialogue button{display:block;margin-left:auto;padding:6px 9px;border:0;border-radius:4px;background:#263a52;color:#fff4dc;font-size:12px;font-weight:700}.dialogue button span{margin-left:8px;color:#f3c983}
.viewport.dialogue-open .mobile-controls,.viewport.intro-open .mobile-controls{visibility:hidden;pointer-events:none}.viewport.dialogue-open .toast,.viewport.intro-open .toast{display:none}
.intro{position:absolute;inset:0;z-index:8;display:flex;justify-content:center;align-items:center;padding:18px;background:linear-gradient(155deg,#182337d9,#17273caa 47%,#182337df)}
.intro-card{width:min(410px,100%);border:2px solid #c8a572;background:#202e43;color:#f9edd7;border-radius:12px;box-shadow:0 16px 50px #040916a5;text-align:center;padding:25px 23px}.intro-label{color:#d7b386;text-transform:uppercase;font-size:10px;font-weight:750;letter-spacing:.15em}.intro-card h2{font:normal 29px/1.1 Georgia,serif;margin:10px 0}.intro-card p{font:14px/1.65 system-ui;color:#dfd4c4;margin:0 0 22px}.intro-card button{width:100%;padding:12px 14px;color:#242b3e;background:#e7bc80;border:0;border-radius:7px;font-size:14px;font-weight:800}.intro-card button span{margin-left:6px;font-size:20px;line-height:0}
.desktop-help{margin:11px 2px 0;font-size:12px;color:#b9c1cd;text-align:center}.desktop-help kbd{padding:2px 5px;border:1px solid #5b657a;border-radius:4px;font:11px system-ui;color:#f2dfbd}
@media(pointer:fine) and (min-width:850px){.mobile-controls{opacity:.18;transition:opacity .15s}.viewport:hover .mobile-controls{opacity:.7}}
@media(max-width:800px){.app{padding:6px 7px calc(7px + env(safe-area-inset-bottom))}.top{height:48px;min-height:48px;margin:0 2px 6px}.brand-icon{width:37px;height:37px;font-size:16px}.logo{gap:9px}.kicker{font-size:9px;letter-spacing:.12em}.brand-text h1{font-size:18px}.small-button{padding:6px 10px;border-radius:8px;font-size:22px}.small-button span{display:none}.frame{border-radius:9px;padding:3px}.viewport{height:calc(100dvh - 71px - env(safe-area-inset-bottom));min-height:350px;max-height:none;border-radius:6px}.desktop-help{display:none}}
@media(max-width:430px){.scene-hud{padding:10px}.save-indicator{font-size:9px;padding:6px 7px}.location-badge{font-size:9px;padding:4px 7px 4px 4px}.location-symbol{height:24px;width:24px;font-size:13px}.quest-hud{top:50px;left:10px;width:calc(100% - 20px);max-width:none;padding:7px 10px 9px}.quest-hud p{font-size:12px;margin:4px 0 7px}.mobile-controls{padding:0 12px;bottom:12px}.dpad{width:120px;height:120px}.dpad button{width:40px;height:40px}.dpad .up{left:40px}.dpad .down{left:40px;top:80px}.dpad .left{top:40px}.dpad .right{top:40px;left:80px}.dpad-center{left:40px;top:40px;width:40px;height:40px}.a-button{width:67px;height:67px}.dialogue{left:10px;right:10px;bottom:12px;padding:12px 13px 9px;min-height:135px}.dialogue p{font-size:13px}.intro-card{padding:20px 16px}.intro-card h2{font-size:25px}}
@media(orientation:landscape) and (max-height:520px){.app{padding:3px}.top{display:none}.viewport{height:calc(100dvh - 10px);min-height:0}.quest-hud{top:9px;left:140px;width:calc(100% - 280px);padding:6px 9px}.scene-hud{top:0}.location-badge small{display:none}.save-indicator{display:none}.mobile-controls{bottom:9px}.dialogue{max-height:calc(100% - 30px);min-height:100px}.toast{bottom:100px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}