*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:Tahoma,'Leelawadee UI',sans-serif;color:#fff2e3;background:#142d33}button,input,select{font:inherit;font-size:16px}button{cursor:pointer;color:inherit;border:1px solid #e9d4b255;background:#203c43e8;border-radius:10px;min-height:46px;padding:10px 18px;transition:background .15s,transform .15s}button:hover{background:#395057}button:active{transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.5}.primary{background:#f2ba74;color:#243637;border-color:#ffda9c;font-weight:bold}.primary:hover{background:#ffcf92}input,select{width:100%;border:1px solid #ffffff35;background:#122e36;color:#fff5e8;padding:12px;border-radius:8px;min-height:46px}label{display:block;font-size:14px;margin:12px 0;text-align:left}label input,label select{margin-top:6px}input[type=range]{padding:0}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #85e8eb;outline-offset:3px}#app,#world{width:100%;height:100%;display:block}#world{position:absolute;touch-action:none}.veil{position:absolute;inset:0;background:linear-gradient(90deg,#102d35e8 0,#102d3588 43%,transparent 80%);pointer-events:none}.brand{position:absolute;left:6vw;top:5vh;display:flex;gap:15px;align-items:center}.crest{font-family:Georgia,serif;font-size:36px;border:1px solid #f7ce90;border-radius:50%;width:58px;height:58px;display:grid;place-items:center;color:#f7ce90}.brand strong{font-family:Georgia,serif;font-size:32px;font-weight:normal}.brand em{color:#f7cb97;font-style:normal}.brand small{display:block;font-size:12px;margin-top:4px;color:#d6dfd6}.beta{align-self:flex-start;border:1px solid #d9bf9255;border-radius:4px;padding:4px 7px;font-size:12px}.panel{position:absolute;left:6vw;top:50%;transform:translateY(-43%);width:360px;max-height:80vh;overflow:auto;padding:4px}.eyebrow{font-size:14px;color:#f4c28d}h1{font-size:33px;line-height:1.4;margin:10px 0 12px;font-weight:normal}p{font-size:15px;line-height:1.7;color:#d2e3df;margin:10px 0 18px}.panel>button,form>button{width:100%;margin-top:9px}.panel small{display:block;color:#bbcbc9;font-size:12px;line-height:1.8;margin-top:17px}.divider{font-size:12px;color:#c4ceca;text-align:center;margin:20px 0 10px}.social,.choices{display:flex;gap:8px}.social button,.choices button{flex:1;padding:8px}.chosen{background:#dfae77;color:#172c30}.character{height:150px;max-width:100%;object-fit:contain;image-rendering:pixelated;display:block;margin:12px auto}.hidden{display:none!important}#toast{position:absolute;left:50%;bottom:24%;transform:translateX(-50%);border-radius:8px;padding:12px 20px;background:#182c36ee;color:#fff2d9;pointer-events:none;max-width:85%;text-align:center;opacity:0;transition:opacity .2s;font-size:14px}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#142e35;font-size:20px}.status,.mapInfo,.inventory{position:absolute;background:#102d35e8;border:1px solid #f4d6a455;border-radius:12px;padding:12px;backdrop-filter:blur(8px)}.status{left:18px;top:18px;width:245px}.status small,.mapInfo small{display:block;font-size:12px;color:#c9dbd4;margin:5px 0}.bar{height:18px;background:#071c25;border-radius:5px;position:relative;overflow:hidden;margin:7px 0}.bar i{position:absolute;inset:0 auto 0 0;background:#e68082;width:100%;transition:width .2s}.bar span{position:absolute;font-size:12px;inset:0;text-align:center}.xp{height:5px}.xp i{background:#f0c481}.mapInfo{right:18px;top:18px;text-align:right}.mapInfo button{min-height:34px;padding:4px 14px;font-size:14px}.hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:13px;color:#f8ebd5;text-shadow:0 2px 3px #001922;text-align:center;pointer-events:none}.pad{position:absolute;bottom:35px;left:28px;display:grid;grid-template:repeat(2,50px)/repeat(3,50px);gap:5px;touch-action:none}.pad button{padding:0;background:#193d47bc;font-size:22px}.pad button:first-child{grid-column:2}.pad button:nth-child(2){grid-column:1}.actions{position:absolute;bottom:35px;right:28px;display:grid;grid-template-columns:repeat(2,76px);gap:8px;touch-action:none}.actions button{padding:10px 5px;font-size:14px;min-height:52px}.actions #attack{grid-column:2;grid-row:1/3;border-radius:50%;font-size:17px}.bag{position:absolute;left:18px;top:169px;font-size:13px;min-height:36px;padding:5px 12px}.inventory{left:18px;top:214px;line-height:2;font-size:14px;max-width:290px}#targetInfo{position:absolute;top:25px;left:50%;transform:translateX(-50%);color:#fff0d8;text-shadow:0 2px 3px #142a30;text-align:center;font-size:14px}
@media(max-width:600px){.brand{top:20px;left:24px}.brand strong{font-size:27px}.crest{width:45px;height:45px;font-size:28px}.panel{left:24px;right:24px;width:auto;top:51%;max-height:77vh;transform:translateY(-42%)}h1{font-size:27px}.veil{background:#102d35b5}.status{left:8px;top:8px;width:185px;padding:8px}.mapInfo{right:8px;top:8px;padding:8px;font-size:14px}.mapInfo small{max-width:130px}.pad{left:12px;bottom:26px;grid-template:repeat(2,46px)/repeat(3,46px)}.actions{right:12px;bottom:26px;grid-template-columns:64px 68px;gap:6px}.actions button{min-height:48px}.hint{bottom:151px;width:85%}.bag{left:8px;top:148px}.inventory{left:8px;top:190px}#targetInfo{top:195px;width:85%}.character{height:110px}#selection h1{font-size:25px;margin:5px 0}.panel p{margin:8px 0}}
@media(max-height:620px){.brand{top:12px;left:25px}.brand small{display:none}.panel{left:25px;top:80px;bottom:10px;transform:none;max-height:none;width:340px}h1{font-size:24px}.character{height:80px}.hint{bottom:10px}}
.pad{display:block;width:132px;height:150px;bottom:22px;left:22px;text-align:center;user-select:none}.pad small{font-size:11px;color:#d5ebef;text-shadow:0 2px 4px #000}#joystick{position:relative;width:132px;height:132px;border-radius:50%;border:2px solid #a9d8e77a;background:radial-gradient(circle,#77c9e52b,#0b233acc);box-shadow:0 5px 24px #0006,inset 0 0 18px #72cbec33;touch-action:none}.stick-ring{position:absolute;inset:17px;border:1px dashed #a4dcf566;border-radius:50%}#joystickKnob{position:absolute;left:40px;top:40px;width:48px;height:48px;border:2px solid #d1edff;border-radius:50%;background:radial-gradient(circle at 35% 25%,#91d1e8,#315578 75%);box-shadow:0 5px 12px #0008;pointer-events:none}.actions{display:block;width:188px;height:166px;bottom:24px;right:20px;user-select:none}.actions button{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;gap:1px;width:61px;height:61px;min-height:0;border-radius:50%;border:2px solid #c9ddedaa;background:radial-gradient(circle at 35% 20%,#53758a,#172e43);box-shadow:0 5px 15px #0008,inset 0 0 0 3px #ffffff12;font-size:11px;touch-action:none}.actions svg{width:25px;height:25px}.actions #attack{right:0;bottom:0;width:91px;height:91px;font-size:14px;background:radial-gradient(circle at 35% 20%,#ffc172,#a54235);color:#fff4d6;border-color:#ffe2a5}.actions #attack svg{width:37px;height:37px}.actions #jump{left:24px;bottom:0;background:radial-gradient(circle at 35% 20%,#66bde3,#254678)}.actions #skill{right:10px;top:0;background:radial-gradient(circle at 35% 20%,#c994ee,#593a86)}.actions #heal{left:10px;top:13px;width:51px;height:51px}.hint{bottom:200px;max-width:80%}@media(max-width:600px){.pad{left:12px;bottom:18px;width:120px;height:138px}#joystick{width:120px;height:120px}#joystickKnob{left:34px;top:34px}.actions{right:10px;bottom:24px;width:180px}.hint{bottom:195px;font-size:12px}}@media(max-height:450px){.pad,.actions{bottom:10px;transform:scale(.8);transform-origin:bottom left}.actions{transform-origin:bottom right}.hint{bottom:8px;width:35%}}
#fullscreen{margin:4px;font-size:13px}.bag{display:flex;align-items:center;gap:6px;border-color:#d7b97b}.bag svg{width:26px;height:26px;color:#ffd58c}.inventory{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);height:fit-content;padding:20px;background:linear-gradient(150deg,#213950,#102231);border:1px solid #d9b97f;color:#fff0d9;border-radius:18px;box-shadow:0 24px 80px #000b;line-height:1.5;overflow:auto}.inventory::backdrop{background:#06101d99;backdrop-filter:blur(3px)}.inventory header{display:flex;justify-content:space-between;align-items:center;gap:10px}.inventory h2{margin:3px 0 15px;font-size:23px}.inventory header small{color:#edc485;letter-spacing:.5px}.inventory nav{display:flex;gap:8px}.inventory nav button{flex:1}.inventory footer{margin-top:18px;color:#b3c8d5;font-size:12px}.item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.item-cell{display:flex;flex-direction:column;align-items:center;gap:8px;background:#091d3088;border:1px solid #cba66b55;border-radius:12px;padding:12px 5px;text-align:center}.item-cell svg{width:42px;height:42px;color:#f1c476}.item-cell strong{font-size:14px}.item-cell small{font-size:12px;color:#a8c1d2}.item-cell button{font-size:14px;padding:5px 12px;min-height:40px}.stat-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #b2cbe222;padding:13px 0;gap:12px}.stat-row small{display:block;font-size:12px;color:#b6c9d5;margin-top:3px}.stat-row button{background:#dca65c;color:#172b3b;font-weight:bold}.stat-points{color:#ffda8e;font-size:14px}#rewardFeed{position:absolute;top:18px;left:50%;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:min(440px,50vw);z-index:5}#rewardFeed>div{padding:8px 16px;border-radius:8px;border:1px solid #e4c78366;background:#132333e8;box-shadow:0 5px 18px #0005;color:#ffe6a2;text-align:center;font-size:14px;animation:reward-rise .2s ease-out}@keyframes reward-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:600px){#rewardFeed{top:155px;width:calc(100% - 24px)}#rewardFeed>div{font-size:13px;padding:6px 10px}.inventory{padding:16px}.inventory h2{font-size:21px}.mapInfo #fullscreen{display:block;margin:5px 0;width:100%}.bag{top:155px}#targetInfo{top:245px}}@media(prefers-reduced-motion:reduce){#rewardFeed>div{animation:none}}
.status{background:none;border:0;backdrop-filter:none;padding:0;width:175px;top:12px;left:12px}.status>strong,.status>small,.status .xp{display:none}.status .bar{height:13px;margin:0;border:1px solid #fff9;border-radius:9px;box-shadow:0 2px 8px #0008}.status .bar span{font-size:10px;line-height:11px}.mapInfo{background:none;border:0;backdrop-filter:none;padding:0;top:10px;right:10px;text-shadow:0 1px 4px #000}.mapInfo small{max-width:none;font-size:11px}.mapInfo>strong{font-size:13px}.mapInfo button{font-size:12px;min-height:30px}.bag{top:40px;left:12px}.bag span{display:none}.bag svg{width:23px;height:23px}.hint{display:none}#targetInfo{top:100px}.mapInfo #fullscreen{display:inline-block;width:auto;margin:3px}#autoAttack{position:absolute;right:20px;bottom:210px;font-size:13px;min-height:36px;padding:5px 12px;border-color:#f1c172;background:#193344ed}#autoAttack[aria-pressed=true]{background:#b46a2b;box-shadow:0 0 16px #ffcf7377}#zoomControls{position:absolute;right:12px;top:106px;display:flex;align-items:center;gap:6px;text-shadow:0 1px 4px #000}#zoomControls button{width:34px;min-height:34px;padding:2px;font-size:23px}#zoomValue{font-size:12px;min-width:34px;text-align:center}#rewardFeed{top:112px;width:min(440px,80vw)}@media(max-width:600px){.status{width:125px}.mapInfo small{font-size:10px}.mapInfo{max-width:215px}.mapInfo #fullscreen{display:inline-block;width:auto}.bag{top:39px}.bag svg{width:22px;height:22px}#autoAttack{right:12px;bottom:205px}#zoomControls{top:105px}#rewardFeed{top:153px}#targetInfo{top:135px}}
.status{width:194px;min-height:70px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:5px 7px;align-items:center;background:#112b3bbb;border:1px solid #c8a66a55;border-radius:12px;padding:7px;backdrop-filter:blur(5px)}#hudPortrait{grid-column:1;grid-row:1/4;width:44px;height:56px;object-fit:contain;image-rendering:pixelated;background:#0b213866;border-radius:8px}.status #playerInfo{display:block;margin:0;font-size:11px;white-space:nowrap;color:#ffe3a5}.status .bar{grid-column:2;width:100%;height:13px;min-width:0}.status .bar span{font-size:10px;line-height:11px}.status .mana i{background:linear-gradient(90deg,#497adc,#7edcff)}.status .xp,.status #playerName,.status #wealth{display:none}.bag{top:94px}#rewardFeed{top:155px}@media(max-width:600px){.status{width:46vw;max-width:185px;grid-template-columns:34px minmax(0,1fr);gap:4px;padding:5px;min-height:65px}#hudPortrait{width:34px;height:48px}.status #playerInfo{font-size:10px}.status .bar span{font-size:9px}.mapInfo{max-width:49vw}.mapInfo small{white-space:normal}.bag{top:87px}}
:root{--chat-dock-height:48px}
#chatPanel{position:absolute;inset:auto 0 0;height:calc(var(--chat-dock-height) + env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;padding:5px 12px;padding-bottom:calc(5px + env(safe-area-inset-bottom));background:#102735eb;border-top:1px solid #d2b17e91;box-shadow:0 -3px 14px #00152166;z-index:5}
#chatToggle{flex:none;min-height:36px;padding:5px 11px;font-size:14px;color:#ffdc9d;border-color:#d2b17e91}
#chatPreview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9e8e5;font-size:14px}
#chatForm{display:flex;flex:none;gap:5px;width:clamp(170px,33vw,360px)}
#chatInput{flex:1;min-width:0;min-height:36px;height:36px;padding:6px 8px;font-size:16px;color:#fffaf0;caret-color:#ffda91;opacity:1}
#chatInput::placeholder{color:#aebfc2;opacity:1}
#chatForm button{flex:none;width:38px;height:34px;margin-top:0;min-height:34px;padding:2px;font-size:12px;border-radius:7px;border-color:#e5bf7b;color:#ffe1a1;background:#385064}
#chatForm button:hover{background:#526980}
#chatMessages{display:none;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:min(520px,100vw);height:min(180px,35dvh);overflow-y:auto;overscroll-behavior:contain;padding:8px 12px;background:#102735ef;border:1px solid #d2b17e91;border-radius:10px 10px 0 0;box-shadow:0 -7px 24px #00152188;color:#ecf4f1;font-size:14px;line-height:1.4}
#chatPanel.expanded #chatMessages{display:block}
#chatMessages .chat-row{padding:2px 0;overflow-wrap:anywhere}
#chatMessages .chat-row strong{color:#ffe2aa;font-weight:600}
#chatMessages .chat-row.system{color:#bcebbd}
#chatMessages .chat-row time{color:#9db4ba;font-size:12px;margin-right:6px}
.pad{bottom:calc(22px + var(--chat-dock-height) + env(safe-area-inset-bottom))}
.actions{bottom:calc(24px + var(--chat-dock-height) + env(safe-area-inset-bottom))}
@media(max-width:700px){#chatPanel{gap:5px;padding-left:6px;padding-right:6px}#chatToggle{padding:5px 7px}#chatPreview{font-size:13px}#chatForm{width:clamp(170px,45vw,250px)}.pad{bottom:calc(18px + var(--chat-dock-height) + env(safe-area-inset-bottom))}.actions{bottom:calc(24px + var(--chat-dock-height) + env(safe-area-inset-bottom))}}
@media(max-height:450px){.pad,.actions{bottom:calc(10px + var(--chat-dock-height) + env(safe-area-inset-bottom))}#chatMessages{height:min(120px,28dvh)}}