:root{color-scheme:dark;--gold:#d2bb7d;--muted:#aaa991;--ink:#eee7d3;--edge:#7d7353;--panel:#18231f;--red:#cf6359;--blue:#619ad6;font-family:Georgia,'Times New Roman',serif;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow:hidden;background:#101914;color:var(--ink)}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation;border:1px solid var(--edge);background:linear-gradient(#344037,#1b2821);border-radius:3px}button:active{filter:brightness(1.25);transform:translateY(1px)}button:focus-visible{outline:2px solid #ebcd82;outline-offset:2px}button:disabled{opacity:.4;cursor:default}button[hidden],[hidden]{display:none!important}#app{height:100vh;height:100dvh;display:flex;flex-direction:column;padding:max(0px,env(safe-area-inset-top)) 0 max(0px,env(safe-area-inset-bottom));max-width:1400px;margin:auto;position:relative}.titlebar{height:37px;min-height:37px;display:flex;align-items:center;padding:0 10px;gap:12px;border-bottom:1px solid #8e7b4d;background:linear-gradient(#2a3028,#15221a);z-index:4}.titlebar>b{font-size:22px;letter-spacing:2px;color:#ead398;text-shadow:1px 2px #080e09}.titlebar>span{font-size:8px;letter-spacing:1.5px;color:#b6b298;flex:1}.titlebar button{width:30px;height:28px;font-size:17px;border-color:#706849}#stage{position:relative;flex:1;min-height:0;overflow:hidden;background:#1a2a20}#world{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}.hud{position:absolute;left:9px;top:10px;width:min(290px,calc(100% - 126px));display:flex;gap:8px;padding:5px;background:linear-gradient(110deg,#111e17f7,#1a2b20eb);border:1px solid #8b7a51;box-shadow:0 2px 8px #0008;pointer-events:none}.portrait{width:49px;min-width:49px;position:relative;border:1px solid #776f4d;background:#28372b;overflow:hidden}.portrait canvas{width:48px;height:60px;display:block;image-rendering:pixelated}.portrait small{position:absolute;bottom:0;left:0;right:0;background:#15221ee8;text-align:center;color:#e5d7ac;font-size:10px}.metrics{flex:1;min-width:0;padding:3px 1px}.metrics>strong{display:block;font-size:12px;color:#e8d49c;letter-spacing:.6px;margin-bottom:6px}.metrics>strong span{font-size:9px;font-weight:normal;color:#adad94;letter-spacing:0;margin-left:3px}.meter{display:flex;gap:4px;align-items:center;height:15px}.meter>span{font:bold 8px Arial;width:14px;color:#c3c2ae}.meter>div{height:7px;flex:1;background:#0a150e;border:1px solid #4a5542}.meter i{display:block;height:100%;width:100%;transition:width .12s linear}.hp i{background:linear-gradient(#e18878,#a7423d)}.mp i{background:linear-gradient(#91c5f1,#3765a7)}.xp i{background:linear-gradient(#e4d18b,#9b823e)}.meter>b{font:8px Arial;width:47px;text-align:right;font-weight:normal;white-space:nowrap}.minimapFrame{position:absolute;right:9px;top:10px;width:108px;border:1px solid #8b7a51;background:#19251ce8;padding:2px;box-shadow:0 2px 7px #0009;pointer-events:none}.minimapFrame>span{display:block;color:#dac28c;font-size:9px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.minimapFrame canvas{width:100%;height:72px;image-rendering:pixelated;border:1px solid #425441}.target{position:absolute;left:9px;top:98px;min-width:174px;max-width:calc(100% - 126px);padding:6px;background:#14211be8;border:1px solid #655f44;font-size:10px;pointer-events:none}.target>div{height:4px;background:#0c1812;margin-top:5px}.target i{height:100%;display:block;background:#b9544e}.regionCard{position:absolute;left:12px;top:152px;pointer-events:none;text-shadow:1px 2px 2px #0e1a12}.regionCard>span{font:8px Arial;letter-spacing:1.7px;color:#ded8bc}.regionCard>strong{display:block;margin-top:4px;color:#f2dfab;font-size:19px;font-weight:normal}.joystick{position:absolute;left:18px;bottom:24px;width:112px;height:112px;border:2px solid #a2976c;border-radius:50%;background:radial-gradient(#263d31ac,#0f2119bd);box-shadow:0 3px 12px #0005;touch-action:none;user-select:none}.joyRing{position:absolute;inset:28px;border:1px solid #b0b39b68;border-radius:50%}.joystick>span{position:absolute;inset:0;display:grid;place-items:center;color:#bcbb9355;font-size:88px;pointer-events:none}#knob{position:absolute;left:37px;top:37px;width:34px;height:34px;background:radial-gradient(#e0d9a4,#a4ac80);border:2px solid #c5c5a1;border-radius:50%;box-shadow:0 2px 4px #0009;z-index:1;pointer-events:none}.actions{position:absolute;right:12px;bottom:25px;display:grid;grid-template-columns:repeat(2,54px);gap:7px;align-items:end}.action{position:relative;min-height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(#314334e8,#14251eea);border-color:#b1a271;box-shadow:0 2px 5px #0009}.action img{width:28px;height:28px;image-rendering:pixelated}.action span{font:8px Arial;color:#e2d6ae;margin-top:3px;letter-spacing:.6px}.action small{position:absolute;right:2px;top:2px;font:10px Arial}.action.heal{grid-column:2;border-color:#7caa97}.action.attack{border-color:#c2a564}.huntStrip{height:36px;min-height:36px;display:flex;align-items:center;gap:10px;padding:4px 8px;border-top:1px solid #7f7553;background:#1d2a22}.huntStrip>button{font:9px Arial;min-width:125px;height:27px;padding:0 6px;display:flex;gap:5px;align-items:center}.huntStrip>button i{display:inline-block;width:6px;height:6px;background:#899384;border-radius:50%}.huntStrip>button.on{background:linear-gradient(#52744c,#284e32);border-color:#a3bc80}.huntStrip>button.on i{background:#b8e58a;box-shadow:0 0 6px #b8e58a}.huntStrip>span{font:9px Arial;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#b7b8a2}.huntStrip>strong{font:12px Georgia;color:#decb8e;white-space:nowrap}.huntStrip>strong small{font:7px Arial;color:#b5b39a}.bottomNav{display:flex;gap:4px;padding:5px 8px 7px;background:linear-gradient(#273328,#141f18);border-top:1px solid #7b7252;min-height:63px}.bottomNav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:48px;border-color:#69694d;background:linear-gradient(#2a372d,#142119)}.bottomNav img{width:25px;height:25px;image-rendering:pixelated}.bottomNav span{font:8px Arial;letter-spacing:.5px;color:#d9d5b9}#toast{position:absolute;left:50%;bottom:165px;transform:translateX(-50%);width:max-content;max-width:85%;border:1px solid #948460;background:#14231bef;color:#e9ddbd;padding:9px 13px;font-size:12px;text-align:center;opacity:0;transition:opacity .15s;pointer-events:none;z-index:12}#toast.visible{opacity:1}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#142118;z-index:30;text-align:center}.loading h1{font-size:38px;letter-spacing:5px;color:#ddc68d;font-weight:normal;margin:18px 0 10px}.loading p{font:12px Arial;color:#c9c6ad;max-width:280px;line-height:1.5}.crest{width:58px;height:68px;line-height:66px;border:1px solid #aa9262;color:#e6ce91;margin:auto;font-size:38px;box-shadow:0 0 40px #a7945d18}.loadingTrack{height:3px;background:#26372a;width:240px;margin:24px auto}.loadingTrack i{display:block;background:#baa46c;height:100%;width:3%;transition:width .2s}.loading button{padding:10px 18px}dialog{color:var(--ink);width:min(460px,92vw);max-height:78dvh;padding:0;border:1px solid #a29165;background:linear-gradient(140deg,#28362b,#142119);box-shadow:0 14px 55px #000b;border-radius:3px}dialog::backdrop{background:#09110b9c}dialog>header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:10px 13px;background:#1b2a20;border-bottom:1px solid #756b4b;z-index:1;font-size:13px;letter-spacing:1px;color:#ddc793}dialog>header button{width:32px;height:30px}#panelBody{padding:15px;font-size:13px;line-height:1.6}#panelBody h2{color:#e4cb8d;font-weight:normal;margin:0 0 8px;font-size:22px}#panelBody p{color:#c8c9b6;margin:8px 0 16px}.panelButton{display:block;width:100%;padding:11px 14px;margin:7px 0;font-size:12px;color:#e7d9af}.panelButton.primary{border-color:#c8ab69;background:linear-gradient(#586549,#2a4530)}.itemRow{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #5c624333}.itemRow img{width:32px;height:32px;image-rendering:pixelated}.itemRow>div{flex:1}.itemRow small{display:block;color:#a8ad95;font:10px Arial;margin-top:3px}.itemRow button{padding:8px 10px;font:10px Arial}.equipTag{color:#b8ce9a}.statLine{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #49563d55}.welcomePortrait{float:right;margin:0 0 8px 10px;border:1px solid #897c53;background:#203325;image-rendering:pixelated;width:88px;height:112px}.welcomeMark{color:#a7ae94;letter-spacing:2px;font:9px Arial}.notice{font-size:11px!important;color:#abb5a0!important;border-left:2px solid #93835b;padding:6px 10px}.settingsStatus{font:10px Arial;color:#acb69b}.worldMapPreview{width:100%;image-rendering:pixelated;border:1px solid #73815b}.version{color:#8e9a82;font:9px Arial;display:block;text-align:center;margin-top:14px}@media(min-width:800px){.hud{width:310px;left:20px;top:18px}.minimapFrame{right:20px;top:18px;width:145px}.minimapFrame canvas{height:105px}.target{left:20px;top:107px}.regionCard{left:22px;top:159px}.joystick{left:32px;bottom:30px}.actions{right:30px;bottom:30px;grid-template-columns:repeat(2,62px)}.action{height:65px}.bottomNav{justify-content:center}.bottomNav button{flex:0 1 140px}.titlebar{height:42px;min-height:42px}.titlebar>span{font-size:10px}}@media(max-height:520px){.regionCard{display:none}.hud{transform:scale(.85);transform-origin:top left}.minimapFrame{width:90px}.minimapFrame canvas{height:58px}.joystick{width:88px;height:88px;bottom:12px;left:13px}#knob{left:25px;top:25px}.joyRing{inset:21px}.actions{bottom:12px;grid-template-columns:repeat(3,48px)}.action.heal{grid-column:auto}.action{min-height:46px}.bottomNav{min-height:49px;padding:3px 8px}.bottomNav button{min-height:41px}.bottomNav img{width:22px;height:22px}.target{top:80px}.huntStrip{height:29px;min-height:29px}.titlebar{height:30px;min-height:30px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}