:root{font-family:system-ui,'Segoe UI',sans-serif;color:#e8faff;background:#014161;--glass:rgba(0,38,73,.64)}*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden}#world{display:block;width:100%;height:100%;touch-action:none;background:linear-gradient(#00709d,#0c9aaf)}button,input{font:inherit}button{background:linear-gradient(140deg,#b4f9fc,#63c9dd);border:0;border-radius:100px;color:#03475d;cursor:pointer;font-weight:800;padding:7px 12px;box-shadow:0 2px 10px #00517199}button:hover{filter:brightness(1.08)}#top{position:absolute;top:0;left:0;right:0;display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:14px;pointer-events:none}#brand{font-size:clamp(14px,2.1vw,25px);font-weight:900;letter-spacing:1px;text-shadow:0 2px 5px #002c47}#brand small{display:block;font-size:9px;color:#c8ffea;letter-spacing:2px}#hud{display:flex;gap:7px;align-items:center;pointer-events:auto;flex-wrap:wrap;justify-content:end}#hud>span{background:var(--glass);border:1px solid #ffffff60;border-radius:22px;padding:8px 11px;box-shadow:inset 0 1px 0 #ffffff40}#heart{color:#ff83ae;font-size:20px;letter-spacing:-3px}#zone{max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#toast{position:absolute;top:16%;left:50%;transform:translateX(-50%);background:var(--glass);border:1px solid #9bfaff99;border-radius:30px;padding:10px 20px;font-weight:700;max-width:85%;text-align:center;pointer-events:none;opacity:0;transition:opacity .2s}#toast.active{opacity:1}#interact{position:absolute;bottom:140px;left:50%;transform:translateX(-50%)}#use-btn{padding:11px 24px}#inventory{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);display:flex;gap:7px;max-width:90vw}#inventory button{height:59px;width:59px;border-radius:50%;border:2px solid #d9ffff95;background:radial-gradient(circle at 30% 25%,#ffffff80,#6ba9e865 30%,#07619875 72%,#ffffff83 100%);color:#fff;text-shadow:0 2px 4px #00233e;box-shadow:inset 0 2px 10px #d4ffff94,0 2px 12px #002a43aa;font-size:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}#inventory button small{font-size:8px;line-height:9px}#inventory button.selected{outline:3px solid #ffe476;transform:translateY(-8px)}#inventory button.locked{opacity:.45}#chat-toggle{position:absolute;left:14px;bottom:19px;font-size:21px}#chat-panel{position:absolute;left:14px;bottom:75px;width:min(345px,calc(100vw - 25px));height:280px;border:1px solid #91f0ff8b;background:var(--glass);border-radius:20px;padding:12px;backdrop-filter:blur(15px);display:flex;flex-direction:column;gap:7px}#chat-panel[hidden],#map-panel[hidden],#start-overlay[hidden],#use-btn[hidden]{display:none}#chat-title{display:flex;justify-content:space-between}#chat-log{flex:1;overflow:auto;font-size:13px}#chat-log p{margin:3px 0;background:#ffffff19;padding:4px 8px;border-radius:10px}#chat-form{display:flex;gap:6px}input{border:1px solid #addbde99;background:#fff;color:#144757;border-radius:13px;padding:10px;width:100%;outline:0}#start-overlay{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#178dc188,#002a42dc);padding:18px}.welcome{background:linear-gradient(140deg,#0a789fef,#034768f7);padding:clamp(24px,5vw,45px);border-radius:33px;border:1px solid #c4fbff8a;max-width:560px;text-align:center;box-shadow:0 20px 50px #00151f99}.welcome h1{margin-top:0;line-height:1.12;font-size:clamp(27px,4vw,42px)}.welcome input{margin:12px auto;max-width:320px;display:block;text-align:center}.welcome button{font-size:19px;padding:13px 65px}.notice{font-size:12px;opacity:.75}#map-panel{position:absolute;inset:8% 10%;max-width:760px;margin:auto;max-height:86%;background:#03456cef;border:1px solid #c9ffffb3;border-radius:20px;padding:12px;z-index:7;display:flex;flex-direction:column;align-items:center}.mapbar{width:100%;display:flex;justify-content:space-between;align-items:center}#map-canvas{height:min(62vh,550px);max-width:100%;border-radius:12px;background:#1ca4bf}#map-panel p{text-align:center;margin:4px;font-size:12px}#mobile{display:none;position:absolute;bottom:95px;left:15px;right:15px;justify-content:space-between;pointer-events:none}#joystick{width:110px;height:110px;border-radius:50%;border:2px solid #e6ffffa5;background:#b7ffff40;pointer-events:auto;touch-action:none;position:relative}#joystick-handle{position:absolute;left:34px;top:34px;width:40px;height:40px;border-radius:50%;background:#dfffffa8;border:2px solid white}.mobile-actions{display:flex;gap:7px;align-items:center;pointer-events:auto}.mobile-actions button{font-size:29px;height:66px;width:66px;border-radius:50%;background:#d2ffffb9;touch-action:none}#help{position:absolute;top:auto;bottom:87px;left:50%;transform:translateX(-50%);font-size:11px;text-align:center;border-radius:14px;background:#00507094;padding:5px 11px;white-space:nowrap;max-width:90vw;overflow:hidden;text-overflow:ellipsis}@media (hover:none),(max-width:820px){#mobile{display:flex}#help{display:none}#interact{bottom:205px}#inventory{bottom:15px}#inventory button{height:48px;width:48px;font-size:20px}#brand{max-width:160px}#zone{display:none}#chat-toggle{bottom:160px;left:10px}#chat-panel{bottom:210px}#hud>span{padding:6px 8px;font-size:12px}}

#start-overlay{z-index:20}.welcome{max-height:calc(100dvh - 36px);overflow:auto;overscroll-behavior:contain}@media(max-height:380px){.welcome{padding:18px 24px}.welcome h1{font-size:26px;margin-bottom:10px}.welcome p{margin:8px 0}.welcome input{margin:8px auto}.welcome button{padding:10px 55px}}