:root {
  --navy:#081547;
  --yellow:#ffd62e;
  --cyan:#36d4f1;
  --pink:#ff5d8f;
  --green:#75e6a1;
  --purple:#8b6df6;
  --white:#fffdf6;
}

* { box-sizing:border-box; }
html,body { position:fixed; inset:0; width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; background:var(--navy); color:var(--navy); font-family:ui-rounded,"Arial Rounded MT Bold",Nunito,system-ui,sans-serif; touch-action:none; }
button,a,select,input { font:inherit; }
button { color:inherit; -webkit-tap-highlight-color:transparent; }
.is-hidden { display:none !important; }

#game-shell,#render-canvas { width:100%; height:100%; }
#game-shell { position:fixed; inset:0; width:100vw; height:100dvh; overflow:hidden; contain:strict; -webkit-touch-callout:none; }
#render-canvas { display:block; outline:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }

.loading-screen {
  position:fixed; inset:0; z-index:1000; display:grid; place-content:center; justify-items:center; gap:.75rem;
  padding:2rem; text-align:center; color:#fff; background:radial-gradient(circle at 50% 35%,#36d4f1 0 16%,#8b6df6 47%,#081547 100%);
}
.loading-screen::before,.loading-screen::after { content:""; position:absolute; border-radius:50%; filter:blur(2px); background:#ffd62e; animation:loadFloat 2.6s ease-in-out infinite; }
.loading-screen::before { width:42px; height:42px; left:14%; top:24%; }
.loading-screen::after { width:26px; height:26px; right:16%; bottom:22%; animation-delay:.8s; background:#ff5d8f; }
.loading-screen img { width:min(360px,72vw); filter:drop-shadow(0 9px 0 rgba(8,21,71,.28)); }
.loading-screen h1 { margin:.2rem 0; font-size:clamp(1.8rem,6vw,3.5rem); text-shadow:0 5px 0 var(--navy); }
.loading-screen p { margin:0; font-weight:900; }
.loading-track { width:min(440px,78vw); height:24px; padding:4px; overflow:hidden; border:4px solid var(--navy); border-radius:99px; background:#fff; }
.loading-track span { display:block; width:0; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--yellow),var(--pink),var(--cyan)); transition:width .25s ease; }
.loading-screen b { font-size:1.25rem; }
@keyframes loadFloat { 50% { transform:translateY(-16px) rotate(18deg); } }

.world-topbar { position:absolute; z-index:20; top:max(.65rem,env(safe-area-inset-top)); left:max(.65rem,env(safe-area-inset-left)); right:max(.65rem,env(safe-area-inset-right)); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.65rem; pointer-events:none; }
.world-logo,.world-stats,.world-actions { pointer-events:auto; }
.world-logo { display:grid; place-items:center; width:82px; height:58px; padding:.3rem; border:4px solid var(--navy); border-radius:18px; background:rgba(255,255,255,.94); box-shadow:0 6px 0 var(--navy); }
.world-logo img { max-width:100%; max-height:100%; }
.world-stats { justify-self:center; display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem; border:4px solid var(--navy); border-radius:19px; background:rgba(255,255,255,.94); box-shadow:0 6px 0 var(--navy); font-weight:950; }
.world-stats>span:not(.xp-pill) { min-width:66px; padding:.35rem .55rem; border:2px solid var(--navy); border-radius:12px; background:#fff6b8; text-align:center; }
.xp-pill { position:relative; width:145px; height:30px; overflow:hidden; border:3px solid var(--navy); border-radius:99px; background:#e6edff; }
.xp-pill i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,var(--cyan),var(--green)); transition:width .3s ease; }
.xp-pill b { position:relative; z-index:1; display:grid; height:100%; place-items:center; font-size:.72rem; }
.world-actions { display:flex; gap:.4rem; }
.world-actions button,.panel-close { display:grid; place-items:center; width:48px; height:48px; padding:0; border:4px solid var(--navy); border-radius:15px; background:#fff; box-shadow:0 5px 0 var(--navy); font-size:1.35rem; font-weight:950; cursor:pointer; }
.world-actions button:active,.panel-close:active { transform:translateY(4px); box-shadow:0 1px 0 var(--navy); }
.world-actions .online-status-button { width:auto; min-width:68px; padding:0 .65rem; grid-auto-flow:column; gap:.35rem; color:#0e7f48; background:#dff9e9; font-size:.95rem; }
.mini-map-button { position:absolute; z-index:18; top:5.4rem; left:max(.75rem,env(safe-area-inset-left)); width:11.5rem; padding:.3rem; overflow:hidden; border:3px solid var(--navy); border-radius:1.2rem; background:rgba(255,253,246,.94); box-shadow:0 6px 0 rgba(8,21,71,.28); text-align:left; cursor:pointer; backdrop-filter:blur(8px); }
.mini-map-button canvas { display:block; width:100%; height:6.4rem; border-radius:.8rem; background:linear-gradient(#bcefff,#dff8ff 48%,#b9efa7 49%); }
.mini-map-button span { display:flex; align-items:center; gap:.35rem; padding:.3rem .35rem .12rem; overflow:hidden; color:var(--navy); font-size:.72rem; font-weight:1000; white-space:nowrap; }
.mini-map-button b { overflow:hidden; text-overflow:ellipsis; }.mini-map-button:hover { transform:translateY(-2px); }

.mission-hud { position:absolute; z-index:18; top:98px; left:50%; translate:-50% 0; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.7rem; align-items:center; width:min(590px,calc(100% - 1rem)); padding:.65rem .85rem; border:4px solid var(--navy); border-radius:20px; background:rgba(255,253,246,.96); box-shadow:0 6px 0 var(--navy); }
.mission-hud>span { font-size:2rem; }
.mission-hud div { display:grid; }
.mission-hud small { font-weight:750; }
.mission-hud>strong { padding:.3rem .55rem; border-radius:99px; background:var(--yellow); }
.flight-hud { position:absolute; z-index:19; top:5.4rem; right:max(.75rem,env(safe-area-inset-right)); display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.55rem; width:min(370px,calc(100% - 1.5rem)); padding:.55rem .7rem; border:4px solid var(--navy); border-radius:20px; background:rgba(255,253,246,.96); box-shadow:0 6px 0 rgba(8,21,71,.4); backdrop-filter:blur(8px); }
.flight-hud>span { font-size:1.8rem; }.flight-hud div { display:grid; min-width:0; }.flight-hud b { font-size:.85rem; }.flight-hud small { overflow:hidden; color:#44506d; font-size:.68rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }.flight-hud strong { min-width:88px; padding:.3rem .45rem; border:3px solid var(--navy); border-radius:13px; background:#dffaff; font-size:.68rem; line-height:1.45; text-align:center; }

.interaction-prompt { position:absolute; z-index:22; left:50%; bottom:clamp(105px,18vh,155px); translate:-50% 0; display:flex; align-items:center; gap:.6rem; max-width:calc(100% - 1rem); padding:.65rem 1rem; border:4px solid var(--navy); border-radius:18px; background:#fff; box-shadow:0 7px 0 var(--navy); font-weight:950; cursor:pointer; }
.interaction-prompt kbd { display:grid; place-items:center; width:38px; height:38px; border:3px solid var(--navy); border-radius:10px; background:var(--yellow); font:inherit; }
.countdown { position:absolute; z-index:40; inset:0; display:grid; place-items:center; pointer-events:none; color:#fff; font-size:min(25vw,12rem); font-weight:1000; text-shadow:0 10px 0 var(--navy),0 0 40px var(--pink); animation:countPop .6s ease both; }
@keyframes countPop { from { scale:.35; opacity:0; } 60% { scale:1.15; } }
.world-toast { position:absolute; z-index:35; left:50%; top:23%; translate:-50% 0; max-width:min(560px,calc(100% - 1rem)); padding:.85rem 1.15rem; border:4px solid var(--navy); border-radius:20px; background:var(--yellow); box-shadow:0 7px 0 var(--navy); text-align:center; font-size:clamp(1rem,3vw,1.35rem); font-weight:950; animation:toastIn .35s ease both; }
@keyframes toastIn { from { transform:translateY(-20px) scale(.9); opacity:0; } }

.menu-overlay,.panel-overlay { position:absolute; z-index:100; inset:0; display:grid; place-items:center; padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); overflow:auto; background:linear-gradient(135deg,rgba(8,21,71,.84),rgba(139,109,246,.66)); backdrop-filter:blur(7px); touch-action:auto; }
.menu-card,.world-panel { position:relative; width:min(720px,100%); padding:clamp(1rem,3vw,2rem); border:6px solid var(--navy); border-radius:35px; background:linear-gradient(150deg,#fff 0 25%,#dffaff 55%,#fff4af 100%); box-shadow:0 12px 0 var(--navy),0 25px 50px rgba(0,0,0,.26); text-align:center; }
.menu-card>img { width:min(240px,55vw); }
.menu-kicker { margin:.25rem 0 0; color:#17677a; font-weight:950; letter-spacing:.16em; }
.menu-card h1 { margin:.15rem 0; font-size:clamp(2rem,7vw,4.6rem); line-height:.92; color:var(--navy); text-shadow:0 4px 0 #fff,0 7px 0 var(--cyan); }
.menu-card>p:not(.menu-kicker) { margin:.65rem auto 1rem; max-width:520px; font-weight:800; }
.world-language-picker { display:inline-flex; align-items:center; gap:.45rem; margin:.15rem auto .65rem; padding:.4rem .65rem; border:3px solid var(--navy); border-radius:999px; background:#fff; box-shadow:0 3px 0 var(--navy); font-weight:900; }
.world-language-picker select { max-width:190px; border:0; background:transparent; color:var(--navy); font:inherit; font-size:.875rem; outline:none; }
.play-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; width:min(610px,100%); margin:0 auto; }
.menu-play { min-height:78px; display:grid; place-items:center; gap:.15rem; padding:.65rem .85rem; border:5px solid var(--navy); border-radius:22px; background:linear-gradient(120deg,var(--yellow),#ff9e3d); box-shadow:0 8px 0 var(--navy); font-size:1.2rem; font-weight:1000; cursor:pointer; }
.menu-play span { display:flex; align-items:center; justify-content:center; gap:.4rem; }
.menu-play small { font-size:.7rem; letter-spacing:.04em; }
.menu-play.online-play { background:linear-gradient(120deg,var(--cyan),var(--purple)); color:#fff; }
.menu-play.online-play small { color:#fff; }
.menu-play:active { translate:0 5px; box-shadow:0 3px 0 var(--navy); }
.render-mode-picker { width:min(610px,100%); margin:.8rem auto 0; }
.render-mode-title { display:block; margin-bottom:.35rem; color:#17677a; font-size:.7rem; letter-spacing:.12em; }
.render-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.render-mode-grid button { min-height:62px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:.5rem; padding:.45rem .65rem; border:4px solid var(--navy); border-radius:17px; background:#fff; box-shadow:0 4px 0 var(--navy); text-align:start; cursor:pointer; }
.render-mode-grid button:first-child { background:linear-gradient(135deg,#dffaff,#fff); }
.render-mode-grid button:last-child { background:linear-gradient(135deg,#ece4ff,#fff3a9); }
.render-mode-grid button>span { grid-row:1/3; font-size:1.75rem; }.render-mode-grid button>b { font-size:.76rem; }.render-mode-grid button>small { font-size:.58rem; font-weight:850; letter-spacing:.035em; }
.render-mode-grid button[aria-pressed="true"] { outline:5px solid var(--yellow); box-shadow:0 4px 0 var(--navy),0 0 20px rgba(54,212,241,.55); }
.render-mode-grid button:active { translate:0 3px; box-shadow:0 1px 0 var(--navy); }
.menu-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.7rem; margin:1.1rem 0; }
.menu-grid button { min-height:90px; display:grid; place-items:center; gap:.15rem; padding:.55rem; border:4px solid var(--navy); border-radius:19px; background:#fff; box-shadow:0 5px 0 var(--navy); cursor:pointer; }
.menu-grid button:nth-child(1) { background:#ffe0eb; }.menu-grid button:nth-child(2) { background:#dffaff; }.menu-grid button:nth-child(3) { background:#fff4af; }.menu-grid button:nth-child(4) { background:#ddf9e6; }.menu-grid button:nth-child(5) { background:#ece4ff; }
.menu-grid .premium-menu-button { background:linear-gradient(135deg,#ff8eb2,#ffd62e); }
.menu-grid button:nth-child(7) { background:#fff0c8; }.menu-grid button:nth-child(8) { background:#fff3a9; }.menu-grid button:nth-child(9) { background:#dff9e9; }.menu-grid button:nth-child(10) { background:#e8ddff; }
.menu-grid span { font-size:1.8rem; }.menu-grid b { font-size:.82rem; }
.back-site { color:var(--navy); font-weight:900; }

.panel-overlay { z-index:120; }
.world-panel { width:min(820px,100%); max-height:min(780px,calc(100dvh - 2rem)); overflow:auto; text-align:start; }
.panel-close { position:sticky; z-index:2; top:0; float:right; margin-left:.5rem; background:var(--pink); font-size:2rem; }
.world-panel h2 { margin:.25rem 0 1rem; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1; }
.world-panel h3 { margin:.4rem 0; }
.panel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; clear:both; }
.panel-choice { min-height:120px; padding:1rem; border:4px solid var(--navy); border-radius:22px; background:#fff; box-shadow:0 5px 0 var(--navy); text-align:start; cursor:pointer; }
.panel-choice>span { display:block; font-size:2.4rem; }.panel-choice small { display:block; margin-top:.3rem; font-weight:750; }
.panel-choice.is-selected { outline:7px solid var(--yellow); background:#dffaff; }
.panel-choice.is-locked { opacity:.72; background:#eee; }
.color-row { display:flex; flex-wrap:wrap; gap:.55rem; margin:.5rem 0 1rem; }
.color-swatch { width:52px; height:52px; border:4px solid var(--navy); border-radius:50%; background:var(--swatch); cursor:pointer; }
.color-swatch[aria-pressed="true"] { outline:5px solid var(--yellow); }
.panel-action { display:inline-grid; place-items:center; min-height:52px; padding:.6rem 1rem; border:4px solid var(--navy); border-radius:16px; background:var(--green); box-shadow:0 5px 0 var(--navy); color:var(--navy); font-weight:950; text-decoration:none; cursor:pointer; }
.panel-action.primary { background:var(--yellow); }.panel-action.pink { background:var(--pink); }
.settings-list { display:grid; gap:.8rem; }
.settings-list label { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 1rem; border:3px solid var(--navy); border-radius:18px; background:#fff; font-weight:900; }
.settings-list select,.settings-list input[type="file"] { max-width:55%; min-height:42px; border:3px solid var(--navy); border-radius:12px; background:#fff; padding:.35rem; }
.settings-list input[type="checkbox"] { width:30px; height:30px; accent-color:var(--green); }
.reward-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin-bottom:1rem; }
.reward-summary div { padding:1rem .5rem; border:4px solid var(--navy); border-radius:20px; background:#fff; text-align:center; }
.reward-summary span { display:block; font-size:2rem; }.reward-summary b { display:block; font-size:1.2rem; }
.world-panel.map-panel-mode { width:min(1180px,100%); padding:clamp(.75rem,2vw,1.4rem); overflow:hidden; }
.map-panel-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; padding-right:3.4rem; }
.map-panel-header h2 { margin-bottom:.4rem; }
.map-panel-header p { margin:.2rem 0 .8rem; max-width:680px; font-weight:800; }
.map-recenter { flex:0 0 auto; min-height:46px; padding:.45rem .75rem; border:3px solid var(--navy); border-radius:14px; background:var(--yellow); box-shadow:0 4px 0 var(--navy); font-size:.82rem; font-weight:950; cursor:pointer; }
.map-recenter:active { translate:0 3px; box-shadow:0 1px 0 var(--navy); }
.world-map-legend { display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .7rem; }
.world-map-legend span { display:inline-flex; align-items:center; gap:.3rem; min-height:31px; padding:.25rem .55rem; border:2px solid var(--navy); border-radius:99px; background:#fff; font-size:.73rem; font-weight:900; }
.world-map-legend .legend-current::before { content:""; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:var(--pink); box-shadow:0 0 0 2px var(--navy); }
.world-map-legend .legend-premium { background:#eee8ff; }
.world-map-viewport { position:relative; height:min(570px,calc(100dvh - 210px)); min-height:320px; overflow:auto; border:5px solid var(--navy); border-radius:24px; background:#dff8ff; box-shadow:inset 0 0 0 4px rgba(255,255,255,.7); touch-action:pan-x pan-y; overscroll-behavior:contain; scrollbar-color:var(--yellow) var(--navy); scrollbar-width:auto; cursor:grab; -webkit-overflow-scrolling:touch; }
.world-map-viewport.is-dragging { cursor:grabbing; user-select:none; }
.world-map-board { position:relative; width:3420px; height:640px; overflow:hidden; background:linear-gradient(180deg,#bcefff 0 8%,#a6e68d 8% 100%); isolation:isolate; }
.world-map-board::before { content:""; position:absolute; inset:49px 0 0; z-index:-4; opacity:.52; background-image:radial-gradient(circle at 15% 22%,#74cf6a 0 2px,transparent 3px),radial-gradient(circle at 72% 68%,#68c45e 0 2px,transparent 3px); background-size:31px 31px,39px 39px; }
.world-map-board::after { content:""; position:absolute; z-index:-3; left:2315px; top:48px; width:305px; height:588px; border:9px solid #2f7546; border-radius:70px 22px 70px 22px; background:radial-gradient(circle at 18px 18px,#255f3b 0 7px,transparent 8px),radial-gradient(circle at 42px 38px,#3c9b55 0 10px,transparent 11px),#4f9d57; background-size:55px 55px,74px 74px; box-shadow:inset 0 0 0 12px rgba(255,255,255,.16); }
.map-sea { position:absolute; z-index:-3; left:1360px; top:48px; width:210px; height:590px; border-left:12px solid #ffe09a; border-right:12px solid #ffe09a; background:repeating-radial-gradient(ellipse at 50% 30%,#64d6ef 0 10px,#9aeaff 11px 22px); opacity:.92; }
.map-field { position:absolute; z-index:-2; left:1090px; top:74px; width:205px; height:205px; border:5px solid rgba(8,21,71,.3); border-radius:22px; background:repeating-linear-gradient(90deg,#6fc864 0 18px,#efd065 19px 35px,#8bdd72 36px 55px); rotate:-4deg; }
.map-fair-ring { position:absolute; z-index:-2; left:1548px; top:182px; width:122px; height:122px; border:22px dotted #ff5d8f; border-radius:50%; background:#fff3a9; }
.map-sports-field { position:absolute; z-index:-2; left:2125px; top:185px; width:130px; height:255px; border:7px solid #fff; border-radius:18px; background:repeating-linear-gradient(90deg,#42ad5c 0 25px,#52bd68 26px 50px); box-shadow:0 0 0 5px #17683e; }
.map-airport-zone { position:absolute; z-index:-2; left:1904px; top:69px; width:185px; height:510px; border:4px solid rgba(8,21,71,.35); border-radius:25px; background:#b9d9c7; }
.map-runway { position:absolute; z-index:-1; left:1928px; width:138px; height:35px; border:4px solid #081547; border-radius:4px; background:repeating-linear-gradient(90deg,#606c7c 0 15px,#fff 16px 23px,#606c7c 24px 39px); }
.map-runway.one { top:174px; }.map-runway.two { top:276px; }.map-runway.three { top:378px; }
.map-port-zone { position:absolute; z-index:-3; left:2630px; top:49px; width:720px; height:586px; border:8px solid #f5d58d; border-radius:54px 20px 54px 20px; background:repeating-radial-gradient(ellipse at 60% 40%,#29bee2 0 11px,#73dcf0 12px 24px); box-shadow:inset 105px 0 0 #f3d18b; }
.map-port-beach { position:absolute; z-index:-2; left:2639px; top:70px; width:118px; height:535px; border-radius:40% 12px 45% 15px; background:repeating-radial-gradient(circle at 35% 20%,#ffe8aa 0 7px,#f3d18b 8px 17px); }
.map-port-bridge { position:absolute; z-index:-1; left:2588px; width:74px; height:24px; border:4px solid #081547; border-radius:9px; background:repeating-linear-gradient(90deg,#94a3b8 0 14px,#d9e5ef 15px 21px); }.map-port-bridge.one { top:309px; }.map-port-bridge.two { top:128px; }.map-port-bridge.three { top:489px; }
.map-port-dock { position:absolute; z-index:-1; left:2760px; width:300px; height:12px; border:3px solid #64748b; border-radius:4px; background:#eef3f7; box-shadow:0 0 0 2px rgba(255,255,255,.65); }.map-port-dock.one { top:104px; }.map-port-dock.two { top:194px; }.map-port-dock.three { top:284px; }.map-port-dock.four { top:374px; }.map-port-dock.five { top:464px; }.map-port-dock.six { top:554px; }
.map-port-island { position:absolute; z-index:-1; border:6px solid #f9e2a7; border-radius:48% 52% 42% 58%; background:radial-gradient(circle at 28% 32%,#65b957 0 8px,transparent 9px),radial-gradient(circle at 68% 68%,#3f934e 0 10px,transparent 11px),#f3d18b; box-shadow:0 0 0 5px rgba(115,220,240,.72); }.map-port-island.one { left:3104px; top:126px; width:92px; height:82px; }.map-port-island.two { left:3170px; top:385px; width:112px; height:92px; }.map-port-island.three { left:3162px; top:532px; width:104px; height:66px; }
.map-road { position:absolute; z-index:-1; background:#758093; box-shadow:0 0 0 5px #f5f0ce,0 0 0 8px rgba(8,21,71,.22); }
.map-road::after { content:""; position:absolute; inset:calc(50% - 2px) 0 auto; height:4px; background:repeating-linear-gradient(90deg,var(--yellow) 0 18px,transparent 19px 34px); }
.map-road-main { left:48px; right:40px; top:302px; height:68px; border-radius:99px; }
.map-road-city-a { left:236px; top:82px; width:62px; height:470px; border-radius:99px; }
.map-road-city-a::after { inset:0 auto 0 calc(50% - 2px); width:4px; height:auto; background:repeating-linear-gradient(180deg,var(--yellow) 0 18px,transparent 19px 34px); }
.map-road-city-b { left:500px; top:154px; width:62px; height:326px; border-radius:99px; }
.map-road-city-b::after { inset:0 auto 0 calc(50% - 2px); width:4px; height:auto; background:repeating-linear-gradient(180deg,var(--yellow) 0 18px,transparent 19px 34px); }
.map-city-block { position:absolute; z-index:-2; border:4px solid rgba(8,21,71,.25); border-radius:22px; background:rgba(255,253,246,.72); box-shadow:inset 0 0 0 8px rgba(255,255,255,.4); }
.map-city-block.a { left:78px; top:90px; width:140px; height:170px; }.map-city-block.b { left:316px; top:94px; width:150px; height:168px; }.map-city-block.c { left:76px; top:400px; width:142px; height:145px; }.map-city-block.d { left:316px; top:401px; width:150px; height:145px; }
.map-region-name { position:absolute; z-index:0; padding:.28rem .55rem; border:2px solid rgba(8,21,71,.7); border-radius:99px; background:rgba(255,255,255,.82); font-size:.7rem; font-weight:1000; letter-spacing:.06em; }
.map-region-name.city { left:50px; top:55px; }.map-region-name.country { left:1040px; top:54px; }.map-region-name.coast { left:1385px; top:54px; }.map-region-name.airport { left:1926px; top:82px; }.map-region-name.forest { left:2350px; top:70px; }.map-region-name.port { left:2790px; top:69px; }
.map-location { --pin:#fff; position:absolute; z-index:5; left:var(--map-x); top:var(--map-y); display:grid; place-items:center; width:48px; height:48px; padding:0; border:4px solid var(--navy); border-radius:50% 50% 50% 8px; background:var(--pin); box-shadow:0 5px 0 rgba(8,21,71,.38),0 0 0 5px rgba(255,255,255,.72); transform:translate(-50%,-50%) rotate(-45deg); cursor:pointer; }
.map-location .map-pin-icon { display:grid; place-items:center; width:100%; height:100%; font-size:1.55rem; transform:rotate(45deg); }
.map-location .map-pin-copy { position:absolute; left:50%; bottom:calc(100% + 12px); display:grid; width:max-content; max-width:165px; padding:.38rem .52rem; border:3px solid var(--navy); border-radius:12px; background:#fff; box-shadow:0 3px 0 var(--navy); line-height:1.08; text-align:center; transform:translateX(-50%) rotate(45deg); pointer-events:none; }
.map-location .map-pin-copy b { font-size:.78rem; }.map-location .map-pin-copy small { margin-top:.2rem; color:#44506d; font-size:.6rem; font-weight:850; }
.map-location[data-label-side="bottom"] .map-pin-copy { top:calc(100% + 12px); bottom:auto; }
.map-location[data-label-side="left"] .map-pin-copy { left:auto; right:calc(100% + 12px); bottom:50%; transform:translateY(50%) rotate(45deg); }
.map-location[data-label-side="right"] .map-pin-copy { left:calc(100% + 12px); bottom:50%; transform:translateY(50%) rotate(45deg); }
.map-location.is-premium { --pin:#e7ddff; }.map-location.is-unvisited { --pin:#edf0f5; filter:saturate(.72); }.map-location.is-current-zone { --pin:#fff3a9; }
.map-location:hover,.map-location:focus-visible { z-index:20; scale:1.1; outline:5px solid var(--yellow); }
.map-location:active { translate:0 3px; }
.map-player-position { position:absolute; z-index:30; left:var(--map-x); top:var(--map-y); display:grid; place-items:center; width:44px; height:44px; border:5px solid #fff; border-radius:50%; background:var(--player-color,var(--pink)); box-shadow:0 0 0 4px var(--navy),0 0 0 11px rgba(255,93,143,.3); transform:translate(-50%,-50%); pointer-events:none; animation:mapPlayerPulse 1.25s ease-in-out infinite; }
.map-player-position>i { font-style:normal; font-size:1.3rem; }
.map-player-position span { position:absolute; left:50%; bottom:calc(100% + 11px); width:max-content; padding:.25rem .45rem; border:2px solid var(--navy); border-radius:9px; background:var(--pink); color:#fff; font-size:.68rem; font-weight:1000; transform:translateX(-50%); }
.map-online-player { position:absolute; z-index:28; left:var(--map-x); top:var(--map-y); display:grid; place-items:center; width:38px; height:38px; border:4px solid #fff; border-radius:50%; background:var(--player-color,#36d4f1); box-shadow:0 0 0 3px var(--navy),0 4px 0 rgba(8,21,71,.35); transform:translate(-50%,-50%); pointer-events:none; transition:left .18s linear,top .18s linear; }
.map-online-player::after { content:""; position:absolute; right:-3px; bottom:-2px; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#20c873; box-shadow:0 0 0 2px var(--navy); }
.map-online-player>i { font-style:normal; font-size:1.15rem; }
.map-online-player>span { position:absolute; left:50%; top:calc(100% + 8px); width:max-content; max-width:130px; padding:.2rem .4rem; overflow:hidden; border:2px solid var(--navy); border-radius:8px; background:#fff; color:var(--navy); font-size:.62rem; font-weight:950; text-overflow:ellipsis; white-space:nowrap; transform:translateX(-50%); }
@keyframes mapPlayerPulse { 50% { box-shadow:0 0 0 4px var(--navy),0 0 0 18px rgba(255,93,143,.08); } }
.premium-card { padding:1.1rem; border:5px solid var(--navy); border-radius:25px; background:linear-gradient(135deg,#fff3a9,#ffe0ed,#dcfaff); }
.premium-status { display:inline-block; padding:.35rem .65rem; border:3px solid var(--navy); border-radius:99px; background:#fff; font-weight:950; }
.head-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; margin:.65rem 0 1rem; }
.head-choice { position:relative; min-height:96px; display:grid; place-items:center; gap:.15rem; padding:.55rem; border:4px solid var(--navy); border-radius:18px; background:#fff; box-shadow:0 4px 0 var(--navy); cursor:pointer; }
.head-choice span { font-size:2rem; }.head-choice b { font-size:.72rem; }.head-choice.is-selected { outline:6px solid var(--yellow); background:#dffaff; }
.head-choice.is-locked { color:#59617a; background:#edf0f5; }.head-choice.is-locked::after { content:"👑"; position:absolute; top:.25rem; right:.35rem; font-size:1rem; }
.online-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.online-room-grid .panel-choice { text-align:center; }
.online-safety { padding:.75rem 1rem; border:3px solid var(--navy); border-radius:16px; background:#dff9e9; font-weight:850; }
.world-panel .section-tabs { display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1rem; }
.world-panel .section-tabs button { min-height:42px; padding:.4rem .7rem; border:3px solid var(--navy); border-radius:13px; background:#fff; box-shadow:0 3px 0 var(--navy); font-weight:900; cursor:pointer; }
.world-panel .section-tabs button.is-active { background:var(--yellow); }
.inventory-grid,.badge-grid,.emote-grid,.social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.inventory-card,.badge-card,.emote-card,.social-card { min-height:112px; padding:.75rem; border:3px solid var(--navy); border-radius:18px; background:#fff; box-shadow:0 4px 0 var(--navy); }
button.inventory-card,button.emote-card,button.social-card { cursor:pointer; text-align:start; }
.inventory-card>span,.badge-card>span,.emote-card>span,.social-card>span { display:block; font-size:2rem; }
.inventory-card b,.badge-card b,.emote-card b,.social-card b { display:block; margin:.25rem 0; }
.inventory-card small,.badge-card small,.emote-card small,.social-card small { display:block; font-weight:750; }
.inventory-card.is-empty,.badge-card.is-locked { filter:grayscale(.75); opacity:.62; }
.badge-card.is-earned { background:linear-gradient(145deg,#fff3a9,#dff9e9); outline:4px solid var(--yellow); }
.progress-road { height:24px; overflow:hidden; border:3px solid var(--navy); border-radius:99px; background:#e6edff; }
.progress-road i { display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--green),var(--yellow)); }
.safe-code { display:inline-flex; align-items:center; min-height:48px; padding:.45rem .75rem; border:4px dashed var(--navy); border-radius:15px; background:#fff3a9; font-size:1.25rem; font-weight:1000; letter-spacing:.12em; }
.safe-form { display:flex; flex-wrap:wrap; gap:.55rem; margin:.75rem 0; }
.safe-form input,.safe-form select { min-height:48px; flex:1 1 180px; padding:.55rem .7rem; border:3px solid var(--navy); border-radius:13px; background:#fff; font-weight:850; text-transform:uppercase; }
.social-note { padding:.7rem .85rem; border:3px solid var(--navy); border-radius:15px; background:#dff9e9; font-weight:800; }
.weather-card { display:grid; grid-template-columns:auto 1fr; gap:.8rem; align-items:center; padding:1rem; border:4px solid var(--navy); border-radius:20px; background:linear-gradient(145deg,#dffaff,#fff3a9); }
.weather-card>span { font-size:4rem; }

.safe-chat { position:absolute; z-index:54; right:max(.8rem,env(safe-area-inset-right)); bottom:max(1rem,env(safe-area-inset-bottom)); width:min(270px,calc(100% - 1.6rem)); padding:.65rem; border:4px solid var(--navy); border-radius:20px; background:rgba(255,253,246,.96); box-shadow:0 7px 0 var(--navy); pointer-events:auto; touch-action:auto; }
.safe-chat-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.4rem; }
.online-dot { width:12px; height:12px; border:2px solid var(--navy); border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(117,230,161,.35); }
.safe-chat-head b { font-size:.8rem; }
.safe-chat-head button { width:30px; height:30px; border:3px solid var(--navy); border-radius:10px; background:var(--pink); font-weight:1000; cursor:pointer; }
.safe-chat p { margin:.35rem 0 .45rem; font-size:.7rem; font-weight:800; }
.safe-chat-actions { display:flex; flex-wrap:wrap; gap:.35rem; }
.safe-chat-actions button { flex:1 1 43%; min-height:38px; padding:.25rem .4rem; border:3px solid var(--navy); border-radius:12px; background:#fff; font-size:.7rem; font-weight:900; cursor:pointer; }
.safe-chat-actions button:nth-child(1),.safe-chat-actions button:nth-child(4) { background:#fff3a9; }.safe-chat-actions button:nth-child(2),.safe-chat-actions button:nth-child(5) { background:#dffaff; }.safe-chat-actions button:nth-child(3) { background:#e8ddff; }

.mobile-controls { position:absolute; z-index:55; inset:auto max(.8rem,env(safe-area-inset-right)) max(.8rem,env(safe-area-inset-bottom)) max(.8rem,env(safe-area-inset-left)); display:flex; justify-content:space-between; align-items:end; pointer-events:none; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.joystick { position:relative; width:142px; height:142px; flex:0 0 auto; border:5px solid rgba(8,21,71,.92); border-radius:50%; background:rgba(255,255,255,.68); box-shadow:0 7px 0 rgba(8,21,71,.84),inset 0 0 0 4px rgba(255,255,255,.55); pointer-events:auto; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.joystick::before,.joystick::after { content:""; position:absolute; background:rgba(8,21,71,.22); }.joystick::before { width:4px; top:12px; bottom:12px; left:calc(50% - 2px); }.joystick::after { height:4px; left:12px; right:12px; top:calc(50% - 2px); }
.joystick span { position:absolute; z-index:1; width:66px; height:66px; left:50%; top:50%; margin:-33px 0 0 -33px; border:4px solid var(--navy); border-radius:50%; background:linear-gradient(145deg,#83efff,var(--cyan)); box-shadow:0 5px 0 var(--navy); pointer-events:none; will-change:transform; }
.joystick.is-active { background:rgba(255,246,184,.82); }
.mobile-buttons { display:flex; align-items:end; gap:.55rem; pointer-events:auto; }
.mobile-buttons button { display:grid; place-items:center; width:78px; height:78px; padding:.3rem; border:4px solid var(--navy); border-radius:50%; outline:none; background:#fff; box-shadow:0 6px 0 var(--navy); font-weight:950; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
.mobile-buttons #run-button { background:var(--yellow); }.mobile-buttons #mini-car-button { color:#fff; background:#111827; }.mobile-buttons #crouch-button { background:#e8ddff; }.mobile-buttons #jump-button { width:88px; height:88px; background:var(--pink); }.mobile-buttons #interact-button { background:var(--green); }
.mobile-buttons span { font-size:1.4rem; }.mobile-buttons b { font-size:.65rem; }
.mobile-buttons button.is-pressed { translate:0 5px; box-shadow:0 1px 0 var(--navy); filter:saturate(1.25) brightness(1.05); }

.webgl-error { position:absolute; z-index:200; inset:0; display:grid; place-content:center; justify-items:center; gap:.6rem; padding:2rem; color:#fff; background:var(--navy); text-align:center; }
.webgl-error span { font-size:5rem; }.webgl-error h2 { margin:.2rem 0; font-size:2rem; }.webgl-error p { max-width:560px; line-height:1.5; }.webgl-error button,.webgl-error a { padding:.7rem 1rem; border:3px solid var(--navy); border-radius:15px; background:var(--yellow); box-shadow:0 5px 0 #00072b; color:var(--navy); font-weight:950; text-decoration:none; cursor:pointer; }

@media (hover:hover) and (pointer:fine) { .mobile-controls { display:none; } }
html.touch-device .mobile-controls { display:flex; }
@media (max-width:700px) {
  .world-topbar { grid-template-columns:auto 1fr auto; gap:.3rem; }
  .world-logo { width:62px; height:46px; border-width:3px; border-radius:14px; box-shadow:0 4px 0 var(--navy); }
  .world-stats { gap:.25rem; padding:.3rem; border-width:3px; box-shadow:0 4px 0 var(--navy); }
  .world-stats>span:not(.xp-pill) { min-width:50px; padding:.22rem .35rem; font-size:.78rem; }
  .xp-pill { display:none; }
  .world-actions { gap:.18rem; }.world-actions button { width:38px; height:38px; border-width:3px; font-size:.95rem; }
  #weather-button,#emote-button,#inventory-button,#fullscreen-button { display:none; }
  .mini-map-button { top:4.65rem; width:7.8rem; padding:.2rem; border-width:2px; border-radius:.9rem; }.mini-map-button canvas { height:4.35rem; }.mini-map-button span { padding:.18rem .2rem .05rem; font-size:.58rem; }
  .flight-hud { top:4.65rem; right:.45rem; width:min(230px,calc(100% - 8.7rem)); min-height:64px; gap:.3rem; padding:.35rem .4rem; border-width:3px; border-radius:15px; box-shadow:0 4px 0 rgba(8,21,71,.4); }.flight-hud>span { display:none; }.flight-hud b { font-size:.68rem; }.flight-hud small { font-size:.55rem; }.flight-hud strong { min-width:67px; padding:.2rem .28rem; border-width:2px; font-size:.56rem; }
  .mission-hud { top:72px; border-width:3px; padding:.45rem .6rem; }.mission-hud>span { font-size:1.5rem; }.mission-hud small { font-size:.72rem; }
  .menu-overlay,.panel-overlay { padding:.45rem; }
  .menu-card,.world-panel { border-width:4px; border-radius:25px; box-shadow:0 7px 0 var(--navy); }
  .menu-card>img { width:135px; }.menu-card h1 { font-size:2.2rem; }.menu-card>p:not(.menu-kicker) { font-size:.82rem; }
  .menu-play { min-height:54px; border-width:4px; box-shadow:0 5px 0 var(--navy); }
  .play-mode-grid { grid-template-columns:1fr 1fr; gap:.45rem; }.menu-play { padding:.45rem; font-size:.88rem; }.menu-play small { font-size:.56rem; }
  .render-mode-picker { margin-top:.55rem; }.render-mode-title { margin-bottom:.25rem; font-size:.58rem; }.render-mode-grid { gap:.35rem; }.render-mode-grid button { min-height:52px; padding:.3rem .4rem; border-width:3px; border-radius:13px; box-shadow:0 3px 0 var(--navy); }.render-mode-grid button>span { font-size:1.35rem; }.render-mode-grid button>b { font-size:.59rem; }.render-mode-grid button>small { font-size:.48rem; }
  .menu-grid { grid-template-columns:repeat(5,1fr); gap:.4rem; margin:.75rem 0; }
  .menu-grid button { min-height:70px; border-width:3px; border-radius:15px; box-shadow:0 3px 0 var(--navy); }.menu-grid span { font-size:1.4rem; }.menu-grid b { font-size:.62rem; }
  .panel-grid { grid-template-columns:1fr; }.reward-summary { grid-template-columns:1fr 1fr 1fr; }.reward-summary div { padding:.55rem .2rem; }
  .world-panel.map-panel-mode { padding:.65rem; }.map-panel-header { display:block; padding-right:2.8rem; }.map-panel-header h2 { font-size:1.65rem; }.map-panel-header p { margin-bottom:.45rem; font-size:.76rem; }.map-recenter { min-height:38px; margin-bottom:.5rem; padding:.3rem .55rem; font-size:.7rem; }.world-map-legend { gap:.25rem; margin-bottom:.45rem; }.world-map-legend span { min-height:25px; padding:.15rem .38rem; font-size:.6rem; }.world-map-viewport { height:calc(100dvh - 190px); min-height:300px; border-width:4px; border-radius:18px; }.world-map-board { height:600px; }.map-location .map-pin-copy { max-width:145px; }.map-location .map-pin-copy b { font-size:.7rem; }
  .inventory-grid,.badge-grid,.emote-grid,.social-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .head-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.online-room-grid { grid-template-columns:1fr; }
  .joystick { width:118px; height:118px; }.joystick span { width:56px; height:56px; margin:-28px 0 0 -28px; }
  .mobile-buttons { display:grid; grid-template-columns:repeat(3,56px); gap:.28rem; }.mobile-buttons button,.mobile-buttons #mini-car-button,.mobile-buttons #crouch-button,.mobile-buttons #jump-button,.mobile-buttons #interact-button { width:56px; height:56px; }
  .interaction-prompt { bottom:96px; padding:.45rem .7rem; font-size:.8rem; }
  .safe-chat { left:.5rem; right:.5rem; bottom:calc(84px + env(safe-area-inset-bottom)); width:auto; padding:.45rem; }.safe-chat p { display:none; }.safe-chat-actions { flex-wrap:nowrap; overflow-x:auto; }.safe-chat-actions button { flex:0 0 auto; min-width:92px; }
}
@media (max-width:400px) {
  .world-logo { width:52px; }.world-stats>span:not(.xp-pill) { min-width:42px; padding:.2rem .25rem; }.world-actions button { width:34px; height:34px; }#audio-button { display:none; }
}
@media (max-height:600px) and (orientation:landscape) {
  .menu-card { width:min(820px,100%); }.menu-card>img { width:100px; }.menu-card h1 { font-size:2rem; }.menu-card>p:not(.menu-kicker),.menu-kicker { display:none; }
  .menu-play { min-height:48px; }.render-mode-picker { margin-top:.45rem; }.render-mode-title { display:none; }.render-mode-grid button { min-height:43px; }.menu-grid { grid-template-columns:repeat(5,1fr); margin:.55rem 0; }.menu-grid button { min-height:58px; }
  .safe-chat { width:225px; bottom:.55rem; }.safe-chat p { display:none; }.safe-chat-actions button { min-height:32px; }
  .mission-hud { top:68px; }.joystick { width:104px; height:104px; }.joystick span { width:48px; height:48px; margin:-24px 0 0 -24px; }
  .mobile-buttons button { width:58px; height:58px; }.mobile-buttons #jump-button { width:66px; height:66px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }