:root{--ocean: #1e9bff;--deep-sea: #075985;--aqua: #22d3ee;--sand: #f8e7c5;--sun-gold: #fdba3b;--palm: #22c55e;--coral: #ff6b6b;--surface: #ffffff;--ink: #1f2937;--muted: #64748b;--soft: #f3f4f6;--danger: #ef4444;--ok: #16a34a;--glass: rgba(255, 255, 255, .82);--glass-border: rgba(255, 255, 255, .9);--shadow: 0 8px 28px rgba(7, 89, 133, .16);--radius: 14px;font-size:15px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body,#app{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}canvas{touch-action:none}body{background:linear-gradient(180deg,#7cc8f2,#bfe5f9);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,sans-serif;user-select:none}canvas{display:block}button{font-family:inherit;background:var(--surface);border:1.5px solid rgba(30,155,255,.35);color:var(--deep-sea);border-radius:var(--radius);padding:10px 18px;cursor:pointer;font-size:.95rem;font-weight:600;box-shadow:0 2px 8px #0759851a;transition:transform .12s,box-shadow .12s,background .15s}button:hover:not(:disabled){background:#eaf6ff;transform:translateY(-1px);box-shadow:0 4px 14px #0759852e}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.45;cursor:not-allowed}button.gold{background:linear-gradient(135deg,var(--sun-gold),#f59e0b);border-color:#d98e1b;color:#5b3a05}button.gold:hover:not(:disabled){background:linear-gradient(135deg,#ffd073,#fbbf24)}button.blue{background:linear-gradient(135deg,var(--ocean),#0e7fd9);border-color:#0c6cb9;color:#fff}button.blue:hover:not(:disabled){background:linear-gradient(135deg,#45aeff,#1e8ae8)}button.small{padding:6px 12px;font-size:.8rem;border-radius:10px}#landing{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0759851f,#ffffff0f 45%,#fde8c240),url(/assets/landing/owntown-coastal-bg.svg) center / cover no-repeat,linear-gradient(180deg,#7cc8f2,#bfe5f9 55%,#fde8c2)}.landing-card{width:min(470px,93vw);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid var(--glass-border);border-radius:26px;padding:0 0 30px;text-align:center;box-shadow:var(--shadow);overflow:hidden}.landing-art{width:100%;display:block}.landing-inner{padding:20px 28px 0}.landing-logo-img{width:min(320px,80%);margin:14px auto 4px;display:block}.landing-tag{color:var(--muted);margin:4px 0 20px;font-size:.95rem}.landing-card button{width:100%;margin-top:11px;padding:14px;font-size:1rem}.landing-note{margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.55}.landing-status{margin-top:13px;min-height:22px;font-size:.88rem;color:var(--deep-sea);font-weight:600}.landing-status.err{color:var(--danger)}.landing-status.ok{color:var(--ok)}.gate-pill{display:inline-block;margin:14px 4px 0;padding:6px 16px;border-radius:999px;background:#ffffffbf;border:1px solid rgba(30,155,255,.3);font-size:.78rem;color:var(--deep-sea);font-weight:600}.mock-badge{border-color:#d98e1b80;color:#9a6b10}.hud{position:fixed;z-index:20;pointer-events:none}.hud *{pointer-events:auto}#hud-status{top:12px;left:12px;width:244px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid var(--glass-border);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow)}.hud-logo{width:142px;display:block;margin-bottom:8px}.bar-wrap{margin-bottom:7px}.bar-label{font-size:.66rem;color:var(--muted);letter-spacing:.09em;font-weight:700;display:flex;justify-content:space-between}.bar{height:10px;border-radius:6px;background:#0759851f;overflow:hidden;margin-top:3px}.bar>div{height:100%;border-radius:6px;transition:width .25s}.bar-hp>div{background:linear-gradient(90deg,var(--coral),#ff9f43)}.bar-sta>div{background:linear-gradient(90deg,var(--palm),var(--aqua))}.bar-xp>div{background:linear-gradient(90deg,var(--ocean),var(--sun-gold))}.level-chip{display:inline-block;background:linear-gradient(135deg,var(--ocean),var(--aqua));color:#fff;border-radius:9px;padding:3px 11px;font-size:.78rem;font-weight:700;margin-bottom:8px}#hud-topright{top:12px;right:12px;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.balance-chip{display:flex;align-items:center;gap:8px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(253,186,59,.65);color:#9a6b10;padding:7px 15px;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:var(--shadow)}.balance-chip img{width:22px;height:22px}.zone-chip{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid var(--glass-border);padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--deep-sea);box-shadow:var(--shadow)}.zone-chip.danger{border-color:var(--danger);color:var(--danger);background:#fff1f1e6}.panel-title-icon{display:flex;align-items:center;gap:9px}.panel-title-icon img{width:30px;height:30px}.perf-chips{display:flex;gap:6px}.perf-chips .zone-chip{cursor:pointer;font-size:.72rem;font-family:inherit;display:inline-flex;align-items:center}.perf-chips img{width:18px;height:18px;display:block}.event-chip{background:#fff1f1eb;border:1.5px solid var(--danger);padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:#b91c1c;box-shadow:var(--shadow)}#hud-actions{bottom:18px;right:14px;display:flex;gap:9px}#hud-actions button{display:inline-flex;align-items:center;gap:7px}#hud-actions button img{width:21px;height:21px;display:block}#mobile-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}#mobile-buttons button img{width:28px;height:28px;display:block}#chat-toggle img{width:26px;height:26px;display:block;margin:0 auto}#prompt{bottom:112px;left:50%;transform:translate(-50%);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid var(--ocean);border-radius:999px;padding:11px 26px;font-size:.95rem;font-weight:600;color:var(--ink);display:none;cursor:pointer;box-shadow:var(--shadow)}#prompt b{color:var(--ocean)}.panel{position:fixed;z-index:40;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,94vw);max-height:84vh;overflow-y:auto;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);border-radius:22px;padding:22px;box-shadow:0 18px 50px #07598547}.panel h2{font-size:1.02rem;letter-spacing:.08em;color:var(--deep-sea);margin-bottom:4px;font-weight:800}.panel .sub{color:var(--muted);font-size:.8rem;margin-bottom:14px;line-height:1.45}.panel .close{position:absolute;top:12px;right:14px;width:34px;height:34px;padding:0;border-radius:50%;font-size:1.15rem;line-height:1;color:var(--muted)}.row{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:14px;margin-bottom:7px;background:#ffffffc7;border:1.5px solid rgba(7,89,133,.08);box-shadow:0 1px 5px #07598512}.row .icon{width:44px;height:44px;border-radius:11px;flex-shrink:0;border:2px solid transparent}.row .meta{flex:1;min-width:0}.row .name{font-size:.93rem;font-weight:700}.row .detail{font-size:.74rem;color:var(--muted);margin-top:2px}.row .actions{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.dur{display:inline-block;width:60px;height:6px;background:#0759851f;border-radius:3px;vertical-align:middle;overflow:hidden}.dur>i{display:block;height:100%;background:var(--palm)}.price-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:#fdba3b2e;border:1px solid rgba(217,142,27,.4);color:#9a6b10;font-weight:800;font-size:.8rem}.price-badge img{width:15px;height:15px}.equipped-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.68rem;font-weight:800;background:#22c55e29;color:var(--ok);border:1px solid rgba(34,197,94,.4)}.tabbar{display:flex;gap:7px;margin-bottom:13px;flex-wrap:wrap}.tabbar button{padding:6px 14px;font-size:.8rem;border-radius:999px}.tabbar button.active{background:linear-gradient(135deg,var(--ocean),var(--aqua));color:#fff;border-color:transparent}.phase2{font-size:.72rem;font-weight:700;color:#9a6b10;background:#fdba3b26;border:1px dashed rgba(217,142,27,.55);border-radius:999px;padding:5px 11px}.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px;margin-bottom:16px}.slot-card{background:#ffffffd9;border:1.5px solid rgba(7,89,133,.1);border-radius:16px;padding:11px;text-align:center}.slot-card .slot-label{font-size:.66rem;letter-spacing:.1em;color:var(--muted);font-weight:800}.slot-card img{width:46px;height:46px;margin:7px auto 4px;display:block}.slot-card .slot-name{font-size:.8rem;font-weight:700;min-height:2.1em}.r1 .icon{border-color:#9ca3af}.r1 .name{color:#4b5563}.r2 .icon{border-color:#22c55e}.r2 .name{color:#15803d}.r3 .icon{border-color:#3b82f6}.r3 .name{color:#1d4ed8}.r4 .icon{border-color:#a855f7}.r4 .name{color:#7e22ce}.r5 .icon{border-color:#f59e0b}.r5 .name{color:#b45309}#toasts{position:fixed;top:74px;left:50%;transform:translate(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1.5px solid rgba(30,155,255,.4);border-radius:999px;padding:10px 21px;font-size:.88rem;font-weight:600;color:var(--ink);animation:toastIn .25s ease;max-width:min(500px,90vw);text-align:center;box-shadow:var(--shadow)}.toast.success{border-color:var(--palm);color:var(--ok)}.toast.error{border-color:var(--danger);color:#b91c1c}.toast.drop{border-color:var(--sun-gold);color:#9a6b10}@keyframes toastIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}#spec-banner{position:fixed;top:10px;left:50%;transform:translate(-50%);z-index:30;width:min(860px,96vw);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid var(--glass-border);border-radius:20px;box-shadow:var(--shadow);padding:10px 16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}#spec-banner .spec-logo{height:34px}#spec-banner .spec-counts{color:var(--muted);font-size:.8rem;font-weight:600}#spec-hotspots{position:fixed;bottom:16px;left:50%;transform:translate(-50%);z-index:30;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}#joystick{position:fixed;bottom:28px;left:24px;z-index:25;width:138px;height:138px;border-radius:50%;background:#fff6;border:2px solid rgba(255,255,255,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;touch-action:none;box-shadow:var(--shadow)}#joystick .knob{position:absolute;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--ocean),var(--aqua));border:2px solid #fff;left:38px;top:38px;box-shadow:0 3px 10px #0759854d}#mobile-buttons{position:fixed;bottom:34px;right:16px;z-index:25;display:none;flex-direction:column;gap:12px}#mobile-buttons button{width:72px;height:72px;border-radius:50%;font-size:.78rem;font-weight:800;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.touch #joystick{display:block;bottom:max(64px,calc(env(safe-area-inset-bottom) + 56px));left:max(16px,env(safe-area-inset-left))}.touch #mobile-buttons{display:flex;bottom:max(60px,calc(env(safe-area-inset-bottom) + 52px));right:max(12px,env(safe-area-inset-right))}.touch #hud-status{width:158px;padding:9px 11px;border-radius:14px}.touch .hud-logo{display:none}.touch .level-chip{font-size:.68rem;padding:2px 9px;margin-bottom:5px}.touch .bar{height:7px}.touch .bar-wrap{margin-bottom:5px}.touch #hud-topright{gap:5px}.touch .balance-chip{padding:5px 11px;font-size:.82rem}.touch .balance-chip img{width:17px;height:17px}.touch .zone-chip{padding:4px 10px;font-size:.7rem}.touch .event-chip{padding:4px 10px;font-size:.68rem}.touch .perf-chips{position:fixed;top:146px;left:max(12px,env(safe-area-inset-left))}.touch .event-chip{position:fixed;top:182px;left:max(12px,env(safe-area-inset-left));right:auto;max-width:52vw}.touch #minimap-wrap{top:94px;bottom:auto;right:max(12px,env(safe-area-inset-right))}.touch #minimap-small{width:108px;height:108px}.touch #minimap-expand{width:24px;height:24px;font-size:.7rem}.touch #hud-actions{top:auto;bottom:max(8px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translate(-50%);flex-direction:row;flex-wrap:nowrap;gap:6px;max-width:100vw;width:max-content;overflow-x:auto;scrollbar-width:none;padding:0 6px;pointer-events:auto}.touch #hud-actions::-webkit-scrollbar{display:none}.touch #hud-actions button{padding:8px 11px;font-size:.7rem;white-space:nowrap}.touch #mobile-buttons button{width:62px;height:62px;font-size:.7rem}.touch #joystick{width:124px;height:124px}.touch #joystick .knob{width:52px;height:52px}.touch #prompt{bottom:286px;max-width:66vw;padding:10px 18px;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.touch #chat{display:none}.touch #chat.open{display:block;bottom:322px;max-height:32vh;z-index:27}#chat-toggle{display:none;position:fixed;z-index:26;bottom:max(264px,calc(env(safe-area-inset-bottom) + 256px));left:max(16px,env(safe-area-inset-left));width:48px;height:48px;border-radius:50%;font-size:1.15rem;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow)}.touch #chat-toggle{display:block}.touch #chat-emotes button{padding:10px 6px;font-size:.8rem}.touch .panel{width:100vw;max-width:100vw;inset:auto 0 0;transform:none;border-radius:22px 22px 0 0;max-height:82dvh;padding:16px 14px calc(16px + env(safe-area-inset-bottom))}.touch .panel .close{width:42px;height:42px;top:10px;right:12px}.touch #toasts{top:max(96px,env(safe-area-inset-top));max-width:92vw}#minimap-wrap{position:fixed;right:12px;bottom:84px;z-index:22;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:2px solid var(--glass-border);cursor:pointer;line-height:0}#minimap-small{display:block}#minimap-expand{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border-radius:8px;font-size:.85rem}#minimap-big-wrap{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;background:#07598559;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}#minimap-big-card{background:var(--glass);border:1.5px solid var(--glass-border);border-radius:22px;padding:14px;box-shadow:0 18px 50px #07598559}#minimap-big-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-weight:800;color:var(--deep-sea);letter-spacing:.06em;font-size:.85rem}#minimap-big-head .map-hint{font-weight:500;color:var(--muted);font-size:.74rem;flex:1}#minimap-big{display:block;width:min(78vw,78vh,640px);height:min(78vw,78vh,640px);border-radius:14px;cursor:crosshair}#chat{position:fixed;left:12px;bottom:14px;z-index:24;width:min(320px,62vw);display:flex;flex-direction:column;gap:6px;pointer-events:auto}#chat-list{max-height:158px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:8px 10px;border-radius:14px;background:#ffffff9e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1.5px solid var(--glass-border);font-size:.8rem;mask-image:linear-gradient(180deg,transparent,#000 14%)}.chat-msg{line-height:1.35;word-break:break-word}.chat-time{color:var(--muted);font-size:.66rem;margin-right:5px}.chat-who{color:var(--deep-sea);font-weight:800;margin-right:5px}.chat-text{color:var(--ink)}#chat-input-row{display:flex;gap:6px}#chat-input{flex:1;padding:9px 13px;border-radius:999px;border:1.5px solid rgba(30,155,255,.4);background:#ffffffd9;font-family:inherit;font-size:.85rem;color:var(--ink)}#chat-input:focus{outline:2px solid var(--ocean)}#chat-emotes{display:flex;gap:6px}#chat-emotes button{flex:1;font-size:.72rem;padding:5px 4px;background:#ffffffb3}#onboarding{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;overflow-y:auto;background:radial-gradient(ellipse at 70% 12%,rgba(253,232,170,.55),transparent 50%),linear-gradient(180deg,#7cc8f2,#bfe5f9 55%,#fde8c2)}.ob-card{width:min(480px,94vw);max-height:92vh;overflow-y:auto;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1.5px solid var(--glass-border);border-radius:24px;padding:26px;box-shadow:var(--shadow)}.ob-card h2{color:var(--deep-sea);letter-spacing:.08em;margin-bottom:4px}.ob-card .sub{color:var(--muted);font-size:.82rem;margin-bottom:14px}.ob-label{font-size:.68rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:13px 0 6px}#ob-name{width:100%;padding:11px 14px;border-radius:12px;border:1.5px solid rgba(30,155,255,.4);font-size:1rem;font-family:inherit;background:#ffffffe6}.ob-options{display:flex;gap:8px;flex-wrap:wrap}.ob-opt{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;font-size:.82rem}.ob-opt img{width:30px;height:30px}.ob-opt.active{border-color:var(--ocean);background:#1e9bff2e;box-shadow:0 0 0 2px #1e9bff59}.ob-skin{width:44px;height:44px;border-radius:50%;padding:0}.ob-none{width:30px;text-align:center;color:var(--muted)}.char-top{display:flex;gap:14px;margin-bottom:14px;flex-wrap:wrap}.char-preview{width:190px;height:250px;border-radius:16px;overflow:hidden;flex-shrink:0;background:linear-gradient(180deg,#bfe5f9,#fde8c2);border:1.5px solid var(--glass-border)}.char-preview canvas{display:block}.char-identity{flex:1;min-width:220px}.ci-name{font-size:1.15rem;font-weight:800;color:var(--deep-sea)}.ci-line{font-size:.78rem;color:var(--muted);margin:2px 0 6px}.stats-table{width:100%;border-collapse:collapse;font-size:.78rem;margin-top:6px}.stats-table th{text-align:left;color:var(--muted);font-size:.64rem;letter-spacing:.08em;padding:3px 6px}.stats-table td{padding:3px 6px;border-top:1px solid rgba(7,89,133,.08);font-weight:600}.stat-eq{color:var(--ok)}.stat-total{color:var(--deep-sea);font-weight:800}.slot-bonus{font-size:.62rem;color:var(--ok);font-weight:700;margin-top:2px}.tier-badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:.6rem;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--tc, #9CA3AF)}.glow-t4{box-shadow:0 0 12px #a855f78c;animation:glowPulse4 2.2s ease-in-out infinite}.glow-t5{box-shadow:0 0 16px #f59e0ba6;animation:glowPulse5 1.6s ease-in-out infinite}.glow-t6{box-shadow:0 0 22px #ef4444bf;animation:glowPulse6 1s ease-in-out infinite}@keyframes glowPulse4{50%{box-shadow:0 0 22px #a855f7d9}}@keyframes glowPulse5{50%{box-shadow:0 0 30px #f59e0bf2}}@keyframes glowPulse6{50%{box-shadow:0 0 38px #ef4444}}#debug{position:fixed;bottom:8px;left:8px;z-index:70;display:none;background:#ffffffeb;border:1.5px solid rgba(30,155,255,.4);border-radius:12px;font-family:monospace;font-size:.72rem;padding:9px 13px;white-space:pre;color:var(--deep-sea);box-shadow:var(--shadow)}@media (max-width: 640px){:root{font-size:14px}#hud-status{width:196px;padding:10px}.hud-logo{width:116px}.panel{padding:15px;border-radius:18px}#hud-actions{bottom:130px;right:12px;flex-direction:column}.slot-grid{grid-template-columns:repeat(2,1fr)}}