.touch-controls,.touch-instructions,.mobile-map-toggle{display:none}.play-page{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.play-page :where(input,textarea,[contenteditable=true]){-webkit-user-select:text;user-select:text}.play-page[data-hud-hidden=true] .play-hud{display:none!important}.play-map-close,.play-paint-start{display:none}@media (pointer:coarse),(max-width:640px),(max-height:500px) and (max-width:1024px){.play-paint-start{display:flex}}@media (max-width:1024px) and (pointer:coarse),(max-width:640px),(max-height:500px) and (max-width:1024px){.play-view-lock{left:calc(50% - 10px);top:calc(max(8px, env(safe-area-inset-top)) + 6px);min-height:36px;padding:0 12px}.play-hud-restore{left:auto;right:calc(max(12px, env(safe-area-inset-right)) + 6px);top:calc(max(8px, env(safe-area-inset-top)) + 6px);width:36px;height:36px}.play-page{height:100dvh;min-height:0}.play-header{padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));gap:8px}.play-header>div{border-radius:14px;gap:6px;padding:6px 8px}.play-header>div:first-child>span{border-radius:10px;width:30px;height:30px}.play-header>.paint-area-badge{padding:4px 8px;font-size:10px}.play-header h1{white-space:nowrap;font-size:16px}.play-header p,.play-header h1+span,.play-header>div:last-child>svg,.play-header>div:last-child>span{display:none}.play-header>div:last-child>a,.play-header>div:last-child>button{border-radius:10px;width:36px;height:36px;min-height:36px;margin:0;padding:0}.play-header>div:last-child>button.min-h-10{width:auto;padding:0 10px;font-size:12px}.play-locations{top:calc(64px + env(safe-area-inset-top));scrollbar-width:none;border-radius:14px;gap:0;max-width:calc(100% - 24px);padding:3px}.play-locations button{white-space:nowrap;min-height:38px;padding:6px 12px;font-size:12px}.play-location-label{display:none}.navara-attr-toggle,.navara-attr-dock,.navara-attr-logoframe{display:none!important}.mobile-map-toggle{z-index:25;right:max(12px, env(safe-area-inset-right));top:calc(114px + env(safe-area-inset-top));border-radius:50%;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute}.play-page[data-mode=walk] .mobile-map-toggle,.play-page[data-mode=walk] .play-map-panel{top:calc(60px + env(safe-area-inset-top))}.play-map-panel{right:max(12px, env(safe-area-inset-right));top:calc(114px + env(safe-area-inset-top));z-index:24;pointer-events:auto;width:246px;max-height:calc(100dvh - 300px);display:none;overflow:auto}.play-map-panel[data-open=true]{display:block}.play-map-close{z-index:1;color:#243c40;background:#ffffffd9;border:1px solid #ffffffb0;border-radius:50%;place-items:center;width:32px;height:32px;display:grid;position:absolute;top:6px;right:6px;box-shadow:0 2px 8px #16302b22}.play-map-panel>div:last-child{display:none}.play-history{top:calc(116px + env(safe-area-inset-top));bottom:auto;right:auto;left:max(12px, env(safe-area-inset-left));flex-direction:row;gap:5px}.play-history button{border-radius:13px;width:40px;height:40px}.play-bottom{bottom:calc(154px + env(safe-area-inset-bottom));gap:8px}.play-bottom output{max-width:calc(100% - 24px);padding:5px 10px;font-size:11px}.play-bottom nav{padding:4px}.play-bottom .mode-button{min-width:82px;height:38px;padding:6px 12px;font-size:13px}.play-brush{left:auto;right:max(12px, env(safe-area-inset-right));top:calc(60px + env(safe-area-inset-top));border-radius:20px;max-height:calc(100dvh - 250px);bottom:auto;overflow:auto}.play-brush input[type=color]{min-width:28px;min-height:28px}.play-start{padding:calc(170px + env(safe-area-inset-top)) 16px calc(90px + env(safe-area-inset-bottom));align-items:center;overflow:auto}.play-start>div{border-radius:24px;padding:18px}.play-start h2{font-size:22px}.play-start p{font-size:14px}}@media (pointer:coarse),(max-width:640px),(max-height:500px) and (max-width:1024px){.touch-instructions{display:inline}.desktop-instructions{display:none}.touch-controls{inset:auto max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));pointer-events:none;z-index:22;justify-content:space-between;align-items:end;display:flex;position:absolute}.touch-controls[data-mode=paint]{justify-content:flex-end}.touch-controls button{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:auto;color:#243c40;background:#fffc;border:1px solid #ffffffb0;border-radius:18px;justify-content:center;align-items:center;gap:3px;min-width:44px;min-height:44px;display:flex;box-shadow:0 3px 12px #16302b22}.touch-controls button:active{color:#fff;background:#243c40;transform:scale(.95)}.touch-directions{grid-template:repeat(2,46px)/repeat(3,46px);gap:4px;display:grid}.touch-up{grid-area:1/2}.touch-left{grid-area:2/1}.touch-down{grid-area:2/2}.touch-right{grid-area:2/3}.touch-actions{z-index:24;grid-template-columns:58px;gap:10px;display:grid;position:relative}.touch-actions button{border-radius:50%;width:58px;height:58px;padding:0}.touch-actions svg{width:26px;height:26px}.touch-actions .touch-skill{color:#fff;background:#6947d4e6;border-color:#ffffff90;box-shadow:0 5px 16px #6947d445}.touch-actions .touch-skill[aria-pressed=true]{background:#4d35a0;box-shadow:0 0 0 3px #fffc,0 5px 16px #6947d445}.touch-skill-backdrop{z-index:23;pointer-events:auto;background:0 0;border:0;position:fixed;inset:0}.touch-skill-menu{z-index:24;pointer-events:auto;border-radius:16px;gap:4px;min-width:176px;margin-bottom:10px;padding:6px;display:grid;position:absolute;bottom:100%;right:0}.touch-skill-menu button{color:#243c40;width:100%;height:auto;min-height:44px;box-shadow:none;white-space:nowrap;background:0 0;border:0;border-radius:12px;justify-content:flex-start;align-items:center;gap:10px;padding:0 12px;font-size:14px;font-weight:800;display:flex}.touch-skill-menu button[aria-checked=true]{color:#fff;background:#6947d4}.touch-skill-menu button svg{width:20px;height:20px}.touch-actions .touch-skill:active{background:#4d35a0}.touch-actions .touch-paint{color:#fff;background:#ff4f7b;flex-direction:row;grid-column:1/-1;min-height:48px;font-size:14px;font-weight:800}}@media (max-height:500px) and (max-width:1024px) and (orientation:landscape){.play-header{padding-top:max(6px, env(safe-area-inset-top))}.play-locations{top:max(8px, env(safe-area-inset-top));max-width:calc(100% - 330px)}.play-locations button{min-height:34px;padding:5px 9px}.mobile-map-toggle{top:106px}.play-map-panel{width:230px;max-height:calc(100dvh - 186px);top:106px}.play-history{top:64px}.play-bottom{bottom:calc(130px + env(safe-area-inset-bottom))}.play-bottom output{max-width:calc(100% - 330px);font-size:10px}.touch-controls{bottom:max(10px, env(safe-area-inset-bottom))}.play-start{padding:58px 170px 66px}.play-start>div{padding:12px 16px}.play-start>div>div:first-child{margin-bottom:8px}.play-start h2{margin-top:0;font-size:18px}.play-start p{font-size:12px;line-height:1.5}.play-start button{height:42px}.play-brush{width:250px;max-height:calc(100dvh - 66px);top:54px}}.play-loading-sheet>div{max-height:calc(100dvh - 136px);padding:24px;overflow-y:auto}@media (max-width:1024px) and (pointer:coarse),(max-width:640px){.play-start.play-loading-sheet{padding:calc(66px + env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));align-items:start}.play-loading-sheet>div{max-height:calc(100dvh - 82px - env(safe-area-inset-top));border-radius:22px;padding:20px}.play-loading-sheet h2{margin-top:8px;font-size:22px}.play-loading-sheet h3{font-size:18px}.play-loading-sheet p{font-size:13px}}@media (max-height:500px) and (max-width:1024px) and (orientation:landscape){.play-start.play-loading-sheet{padding:58px 12px 8px}.play-loading-sheet>div{max-height:calc(100dvh - 66px);padding:16px}}.play-brush{z-index:25;border-radius:20px;width:280px;padding:0;position:absolute;top:96px;bottom:auto;left:24px;overflow:hidden}.play-brush[data-collapsed=true]{border-radius:999px;width:max-content}.play-brush[data-collapsed=true] .palette-label{display:none}.play-brush[data-collapsed=true] .palette-toggle{white-space:nowrap;gap:8px;padding:8px 12px}.palette-toggle{cursor:pointer;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;font-size:14px;font-weight:800;display:flex}.palette-color{color:#fff;border:2px solid #fff;border-radius:50%;flex:none;place-items:center;width:28px;height:28px;display:grid}.palette-size{white-space:nowrap;font-variant-numeric:tabular-nums;margin-left:auto;font-size:13px}.palette-content{max-height:calc(100dvh - 260px);padding:8px 16px 16px;overflow:auto}.settings-actions>button{border:1px solid color-mix(in srgb, var(--border) 70%, transparent);background:color-mix(in srgb, var(--muted) 35%, transparent);justify-content:flex-start;width:100%;padding-inline:12px}.play-location-label{display:none}@media (pointer:coarse),(max-width:640px),(max-height:500px) and (max-width:1024px){.play-brush{top:calc(60px + env(safe-area-inset-top));left:auto;right:max(12px, env(safe-area-inset-right));width:min(280px,100vw - 24px);max-height:calc(100dvh - 250px);bottom:auto}.play-brush[data-collapsed=true]{width:max-content}.play-page[data-mode=walk] .play-brush{display:none}.palette-content{max-height:calc(100dvh - 320px)}.play-start{padding-top:100px}.touch-controls .touch-stick{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:auto;background:#ffffff32;border:2px solid #ffffffa8;border-radius:50%;width:124px;height:124px;display:block;position:relative;box-shadow:inset 0 0 30px #ffffff28,0 4px 20px #0002}.touch-stick:before{content:"";pointer-events:none;border:1px dashed #ffffff80;border-radius:50%;position:absolute;inset:24px}.touch-stick-knob{pointer-events:none;background:#f0ffffd9;border:2px solid #fff;border-radius:50%;width:52px;height:52px;position:absolute;top:34px;left:34px;box-shadow:0 5px 18px #0003}}@media (max-height:500px) and (max-width:1024px) and (orientation:landscape){.play-brush{width:240px;max-height:calc(100dvh - 134px);top:54px;bottom:auto}.palette-content{max-height:calc(100dvh - 190px)}.mobile-map-toggle,.play-map-panel{top:106px}.touch-controls .touch-stick{width:112px;height:112px}.touch-stick-knob{top:28px;left:28px}}@keyframes startup-loading-fill{0%{transform:scaleX(0)}to{transform:scaleX(.85)}}@keyframes startup-loading-tail{0%{transform:scaleX(.85)}to{transform:scaleX(.99)}}.startup-loading-fill{transform-origin:0;will-change:transform;animation:12s linear both startup-loading-fill}.startup-loading-fill[data-tail=true]{animation:12s linear both startup-loading-tail}.startup-loading-fill[data-complete=true]{transition:transform .45s ease-out;animation:none;transform:scaleX(1)}
