:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#eefcf7;background:#07120f;font-synthesis:none}*{box-sizing:border-box}html,body,#app,#game{width:100%;height:100%;margin:0;overflow:hidden}button,a{font:inherit}#game{display:block;touch-action:none}.glass{background:linear-gradient(145deg,#0b1d18db,#05100eb8);border:1px solid rgba(137,255,202,.16);box-shadow:0 12px 38px #00000059,inset 0 1px #ffffff0a;backdrop-filter:blur(14px)}.topbar{position:fixed;inset:max(12px,env(safe-area-inset-top)) 16px auto;min-height:60px;border-radius:16px;display:flex;align-items:center;padding:8px 12px;gap:16px}.brand{display:flex;align-items:center;gap:10px}.sigil{display:grid;place-items:center;width:42px;height:42px;border:1px solid #4eeeb0;border-radius:12px;color:#73fbc7;background:#0c3026;font-family:Georgia;font-size:25px}.brand div{display:flex;flex-direction:column;letter-spacing:.09em}.brand small,.stats small{color:#7d9e92;font-size:9px}.realm{margin:auto;color:#a8c8bc;font-size:12px}.realm i{display:inline-block;width:7px;height:7px;background:#43e49e;border-radius:50%;box-shadow:0 0 10px #43e49e}.icon-button,.panel>button{border:0;color:#d5eee5;background:#173128;border-radius:10px;padding:9px 12px}.stats{position:fixed;left:16px;top:92px;width:min(310px,calc(100vw - 32px));border-radius:16px;padding:12px;display:flex;gap:11px}.portrait{width:52px;height:52px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid #3e8f70;background:radial-gradient(circle,#285846,#10251e);font-family:Georgia;color:#8dffd1}.stat-copy{flex:1;min-width:0}.stat-copy strong{display:block;font-family:Georgia;font-size:16px}.bar{height:12px;background:#08120f;border-radius:7px;margin-top:5px;position:relative;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#982d43,#ff5773)}.bar.mana span{background:linear-gradient(90deg,#2359a3,#4b9eff)}.bar em{position:absolute;inset:0;text-align:center;font-size:8px;font-style:normal;line-height:12px}.actions{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);display:flex;border-radius:18px;padding:8px}.actions button{color:#b6d0c6;background:transparent;border:0;min-width:76px;padding:7px 11px;font-size:10px}.actions span{display:block;color:#63edb6;font-size:20px;margin-bottom:3px}.quest{position:fixed;right:16px;top:92px;width:260px;padding:14px;border-radius:16px}.quest small{color:#52e6ad;font-size:9px;letter-spacing:.12em}.quest b{display:block;font-family:Georgia;margin:4px 0}.quest p{color:#9db5ac;font-size:11px;margin:0}.quest p strong{float:right;color:#e4fff5}.progress{height:3px;background:#10251e;margin-top:10px}.progress span{display:block;height:100%;background:#50ebb0}.minimap{position:fixed;right:16px;bottom:105px;padding:8px;border-radius:50%;width:112px;height:112px;text-align:center}.map-grid{border-radius:50%;height:80px;background:repeating-linear-gradient(0deg,transparent 0 12px,#21483a 13px),repeating-linear-gradient(90deg,#112a22 0 12px,#21483a 13px);position:relative;overflow:hidden}.map-grid span{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#54f0b4;box-shadow:0 0 12px #54f0b4}.minimap small{font-size:8px;color:#9cb8ad}.destination{position:fixed;left:50%;bottom:93px;transform:translate(-50%);font-size:10px;color:#a1baaf;text-shadow:0 2px 8px #000}.panel{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 30px));min-height:180px;border-radius:20px;padding:24px}.panel>button{position:absolute;right:12px;top:12px}.panel h2{margin:0 0 20px;font-family:Georgia}.panel p{color:#9eb8ae}.quality-options{display:flex;gap:8px}.quality-options button{flex:1;border:1px solid #315d4c;color:#aac7bc;background:#10251e;border-radius:10px;padding:10px}.quality-options .active{color:#07120f;background:#58ecb5;border-color:#58ecb5}#fallback{position:fixed;inset:0;padding:30px;display:grid;place-content:center;text-align:center;background:#07120f}#fallback[hidden]{display:none}#fallback a{color:#6ff2bd}@media(max-width:720px){.topbar{inset:max(8px,env(safe-area-inset-top)) 8px auto}.realm{display:none}.icon-button{margin-left:auto}.stats{left:8px;top:82px;width:250px;padding:9px}.portrait{width:42px;height:42px}.quest{right:8px;top:82px;width:150px;padding:10px}.quest b{font-size:12px}.quest p{font-size:9px}.minimap{right:8px;bottom:96px;width:88px;height:88px}.map-grid{height:62px}.actions{bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 16px);justify-content:space-around}.actions button{min-width:0;flex:1;padding:5px}.destination{bottom:81px}}@media(max-width:440px){.quest{top:156px}.brand b{font-size:12px}.topbar{min-height:54px}.stats{top:72px}.minimap{bottom:86px}}.guest-panel{position:fixed;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,calc(100% - 30px));padding:18px;border-radius:16px;text-align:center}.guest-panel h2{margin:0 0 6px;color:#fff}.guest-panel p{margin:0 0 14px;color:#c5d8d1}.guest-panel label{display:block;text-align:left;color:#d9e9e3;margin:10px 0;font-size:.86rem}.guest-panel input{box-sizing:border-box;width:100%;margin-top:5px;padding:11px 12px;border:1px solid #48665c;border-radius:9px;background:#07120fcc;color:#fff;font:inherit}.guest-panel input:focus{outline:2px solid #58ecb5;outline-offset:1px}.guest-panel button{border:0;color:#07120f;background:#58ecb5;padding:11px 16px;border-radius:10px;font-weight:800;cursor:pointer}.guest-panel .secondary-button{margin-left:8px;background:transparent;border:1px solid #58ecb5;color:#aaf3d2}.guest-panel button:disabled{opacity:.6;cursor:wait}.guest-panel small{display:block;min-height:1.2em;margin-top:10px;color:#ff9b9b}.guest-panel[hidden]{display:none}.chat-panel{inset:auto 18px 18px auto;transform:none;width:min(380px,calc(100% - 36px));padding:16px}.chat-tabs{display:flex;gap:6px;margin-bottom:8px}.chat-tabs button{background:#16362b;color:#baf5d3;border:1px solid #477d64;padding:6px 10px;border-radius:8px;cursor:pointer}#chat-log{height:180px;overflow:auto;text-align:left;background:#06110dcc;border-radius:10px;padding:8px;font-size:.86rem}.chat-line{margin:4px 0;color:#c8ded3}.chat-line b{color:#70dfa1}#chat-form{display:flex;gap:6px;margin-top:8px}.chat-panel input{flex:1;min-width:0;padding:9px;border-radius:8px;border:1px solid #48665c;background:#07120f;color:#fff}.chat-panel form button{padding:8px 12px;border:0;border-radius:8px;background:#58ecb5;font-weight:700}