:root { --app-height:100dvh; --app-nav-height:calc(68px + env(safe-area-inset-bottom,0px)); }
.home-identity { background:none; border:0; padding:0; text-align:left; cursor:pointer; font:inherit; }
.home-identity:focus-visible { outline:2px solid #ffd166; outline-offset:4px; border-radius:8px; }
#mobileAppNav { display:none; }
.mobile-shop-icon { display:none; }
#appConnection { position:fixed; z-index:45; top:max(8px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); padding:6px 12px; border-radius:99px; border:1px solid rgba(255,209,102,.25); background:#242035; color:#ffda90; font:500 11px var(--body); pointer-events:none; }
.app-setup { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:16px; border:1px solid rgba(208,164,236,.2); border-radius:16px; background:rgba(184,242,230,.035); }
.app-setup > div { flex:1; min-width:140px; }
.app-setup b { display:block; font-size:14px; }
.app-setup small { display:block; margin-top:6px; font-size:12px; color:#bcb1c8; }
#appInstall,#appUpdate { min-height:44px; }
#appInstallDialog { width:min(420px,calc(100vw - 32px)); box-sizing:border-box; padding:28px; border:1px solid rgba(208,164,236,.3); border-radius:24px; color:#fff5e9; background:#19172d; box-shadow:0 20px 80px #0006; }
#appInstallDialog::backdrop { background:#080b18bb; backdrop-filter:blur(8px); }
#appInstallDialog img { display:block; border-radius:16px; margin-bottom:20px; }
#appInstallDialog h2 { font-size:22px; }
#appInstallDialog p { font:400 15px/1.6 var(--body); color:#d5c9e0; }
#appInstallDialog .app-install-detail { font-size:12px; color:#bcb1c8; }
#appInstallDialog .btn { width:100%; min-height:48px; }
.app-dialog-close { position:absolute; right:12px; top:12px; width:44px; height:44px; border:0; border-radius:12px; color:#d5c9e0; background:transparent; font-size:26px; cursor:pointer; }
body.mobile-app { height:var(--app-height); }
body.mobile-app #app { height:var(--app-height); padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
body.mobile-app #menuOv { height:var(--app-height); inset:0; padding-top:max(14px,env(safe-area-inset-top,0px)); padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); gap:18px; overscroll-behavior-y:contain; }
body.mobile-app.app-nav-visible #menuOv { padding-bottom:calc(var(--app-nav-height) + 18px); }
body.mobile-app #menuOv .home-bottom-nav { display:none; }
body.mobile-app #mobileAppNav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); position:fixed; left:0; right:0; bottom:0; height:var(--app-nav-height); z-index:25; box-sizing:border-box; padding:6px max(8px,env(safe-area-inset-left)) env(safe-area-inset-bottom,0px) max(8px,env(safe-area-inset-right)); background:rgba(20,20,38,.97); border-top:1px solid rgba(208,164,236,.18); backdrop-filter:blur(16px); }
body.mobile-app #mobileAppNav button { min-width:0; min-height:54px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; border:0; border-radius:12px; color:#aba2bf; background:none; font:500 10px var(--body); cursor:pointer; touch-action:manipulation; }
body.mobile-app #mobileAppNav svg { width:23px; height:23px; }
body.mobile-app #mobileAppNav button[aria-current] { color:#ffd166; background:rgba(255,209,102,.065); }
body.mobile-app.app-keyboard #mobileAppNav { display:none; }
.mobile-shop-icon { display:none; }
body.mobile-app.app-keyboard { --app-nav-height:0px; }
body.mobile-app .overlay { height:var(--app-height); bottom:auto; padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); box-sizing:border-box; background:#111426ee; backdrop-filter:none; -webkit-backdrop-filter:none; }
body.mobile-app.app-nav-visible .overlay { padding-bottom:calc(var(--app-nav-height) + 12px); }
body.mobile-app .overlay > .panel { width:100%; max-width:720px; max-height:100%; padding:20px; border-radius:22px; gap:18px; background:linear-gradient(145deg,#1d1b32,#141426); overflow-x:hidden; overscroll-behavior-y:contain; }
body.mobile-app .overlay .head { flex-shrink:0; gap:12px; }
body.mobile-app .back { min-height:44px; padding:10px 4px; font-size:13px; }
body.mobile-app .overlay .btn, body.mobile-app .overlay .chip, body.mobile-app .overlay .segs button, body.mobile-app .home-action, body.mobile-app .home-close { min-height:48px; touch-action:manipulation; }
body.mobile-app .overlay input:not([type=checkbox]):not([type=range]):not([type=file]), body.mobile-app .overlay textarea, body.mobile-app .overlay select { font-size:16px; min-height:48px; box-sizing:border-box; max-width:100%; }
body.mobile-app .overlay textarea { min-height:96px; }
body.mobile-app .overlay input[type=range] { min-height:40px; }
body.mobile-app .overlay .opt { min-height:48px; padding:6px 0; align-items:center; }
body.mobile-app .overlay .opt input { flex-shrink:0; }
body.mobile-app .overlay .row { gap:10px; }
body.mobile-app .overlay h2 { font-size:24px; line-height:1.2; }
body.mobile-app #menuOv .home-account-bar { padding:10px 12px; gap:10px; display:flex; flex-wrap:nowrap; min-height:64px; background:#171629d9; }
body.mobile-app .home-identity { flex:1; min-width:0; gap:9px; }
body.mobile-app .home-identity-text b { font-size:12px; }
body.mobile-app .home-identity-text small { font-size:10px; }
body.mobile-app .home-avatar { width:34px; height:34px; border-radius:11px; }
body.mobile-app .home-gem-balance { padding:8px 10px; gap:6px; }
body.mobile-app .home-gem-balance .wallet { font-size:12px; }
body.mobile-app .home-gem-balance small { font-size:10px; }
body.mobile-app .home-account-buttons { display:contents; }
body.mobile-app #menuOv #mAcct { display:none; }
body.mobile-app #menuOv #mShop { min-height:44px; width:44px; padding:0; display:flex; align-items:center; justify-content:center; font-size:0; flex-shrink:0; }
body.mobile-app #menuOv #mShop::before { display:none; }
body.mobile-app #mShop .mobile-shop-icon { display:block; width:22px; height:22px; }
body.mobile-app #menuOv #mAdmin { padding:8px; font-size:10px; min-height:44px; }
body.mobile-app #menuOv .home-content { flex:1 0 auto; gap:14px; }
body.mobile-app #menuOv .home-hero { padding-top:0; gap:12px; }
body.mobile-app #menuOv #logo { margin-bottom:0; }
body.mobile-app #menuOv .home-primary-actions .home-action { min-height:52px; font-size:12px; }
body.mobile-app #menuOv .home-world-art { min-height:120px; height:clamp(110px,18vh,170px); }
body.mobile-app #menuOv #menuArt { min-height:100px; }
body.mobile-app #menuOv .home-feature { min-height:84px; }
body.mobile-app #menuOv .home-social-buttons { display:grid; grid-template-columns:1fr 1fr; }
body.mobile-app #menuOv .home-social-buttons .chip { min-width:0; min-height:64px; white-space:normal; }
body.mobile-app #menuOv .home-browse-grid .mcard { min-height:145px; }
body.mobile-app #worldsOv .world-map-panel { padding:18px; }
body.mobile-app .world-map-heading { margin:4px 0 16px; }
body.mobile-app .world-map-heading p { font-size:13px; }
body.mobile-app #worldList.world-map { grid-template-columns:repeat(var(--map-cols,2),minmax(0,1fr)); grid-template-rows:repeat(var(--map-rows),180px) auto; }
body.mobile-app .world-island b { font:600 12px/1.45 var(--body); }
body.mobile-app .world-island small { font-size:11px; }
body.mobile-app .world-island .island-scene { width:min(145px,100%); }
body.mobile-app .world-map-viewport { min-height:320px; max-height:46vh; }
body.mobile-app .world-detail { padding:20px; gap:16px; }
body.mobile-app .map-route { height:calc(100% - 90px); }
body.mobile-app .levels { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body.mobile-app .lvl { min-height:120px; padding:16px; border-radius:16px; }
body.mobile-app .lvl .nm { font-size:12px; }
body.mobile-app #shopOv .tabs { position:sticky; top:-20px; z-index:2; padding:12px 0; background:#1a182f; gap:6px; flex-shrink:0; min-height:68px; box-sizing:border-box; touch-action:pan-x; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
body.mobile-app #shopOv .tabs > button { min-width:84px; min-height:44px; flex-shrink:0; }
body.mobile-app #shopGrid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body.mobile-app .item { min-width:0; padding:14px 10px; }
body.mobile-app .item b { font-size:12px; overflow-wrap:anywhere; }
body.mobile-app .item .btn { width:100%; font-size:12px; white-space:normal; padding:10px 8px; }
body.mobile-app .rankhero { gap:16px; }
body.mobile-app .quests { gap:12px; }
body.mobile-app .quests li { gap:10px; }
body.mobile-app .quests button { min-width:78px; font-size:12px; }
body.mobile-app .home-profile-controls .home-social-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.mobile-app .home-profile-controls .chip { min-height:48px; max-width:none; text-align:center; }
body.mobile-app .segs { display:flex; flex-wrap:wrap; gap:6px; }
body.mobile-app .segs button { flex:1; min-width:70px; padding:10px; font-size:12px; }
body.mobile-app #edOv .edpanel { max-width:820px; }
body.mobile-app #edOv #edTools { display:flex; flex-wrap:wrap; }
body.mobile-app #edOv .edlayout { display:flex; flex-direction:column; gap:16px; }
body.mobile-app #edOv #edPal { grid-auto-columns:76px; gap:8px; touch-action:pan-x; }
body.mobile-app #edOv .et { min-height:64px; }
body.mobile-app #edOv #edGrid { width:100%; gap:4px; padding:8px; }
body.mobile-app #edOv #edGrid button { min-width:0; min-height:0; }
body.mobile-app #studioOv .songgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body.mobile-app #studioOv .bpmrow { flex-wrap:wrap; }
body.mobile-app #resultOv .result-panel { max-width:560px; overflow:hidden; }
body.mobile-app #resultOv .result-actions .result-secondary .btn { min-height:44px; }
body.mobile-app #resultOv #rShare { min-height:48px; }
body.mobile-app #app .hud { padding:12px 0 4px; gap:8px; }
body.mobile-app #app .hud-c { min-width:80px; }
body.mobile-app #app .hudbtns { gap:6px; }
body.mobile-app #app #pauseBtn { min-height:44px; padding:8px 14px; border-radius:12px; font-size:12px; }
body.mobile-app #app #ghostBtn { min-height:40px; }
body.mobile-app #app .streak { font-size:34px; }
body.mobile-app #app .num { font-size:18px; }
body.mobile-app #app .sub { font-size:10px; }
body.mobile-app #app .touch-controls { flex-shrink:0; padding:8px 0 14px; gap:12px; }
body.mobile-app .touch-player-controls { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
body.mobile-app #app .touch-controls .pad { --b:clamp(44px,14vw,56px); grid-template-rows:repeat(3,48px); flex-shrink:0; }
body.mobile-app #app .touch-controls .dir { height:48px; border-radius:14px; min-height:44px; background:rgba(24,23,46,.65); border-color:rgba(255,248,238,.3); }
body.mobile-app #app .touch-controls .dir.j-perfect { background:#fff5e9; }
body.mobile-app #app .touch-controls .swipepad { flex:1; height:152px; min-width:0; max-width:400px; border-radius:22px; background:rgba(24,23,46,.35); }
body.mobile-app #app .touch-controls .sp-hint { font-size:9px; letter-spacing:.06em; white-space:normal; text-align:center; }
body.mobile-app #app .touch-controls.duo .touch-player-controls { flex-direction:column; gap:8px; }
body.mobile-app #app .touch-controls.duo .pad { --b:44px; grid-template-rows:repeat(3,44px); }
body.mobile-app #app .touch-controls.duo .dir { height:44px; }
body.mobile-app #app .touch-controls.duo .swipepad { width:100%; flex:auto; height:90px; }
body.mobile-app #app .touch-controls.duo .sp-cross { width:36px; height:36px; }
body.mobile-app #app .touch-controls.duo .sp-hint { margin-top:52px; }
body.mobile-app #toast { max-width:calc(100vw - 40px); width:max-content; box-sizing:border-box; font:500 12px/1.5 var(--body); text-align:center; }
@media (max-width:360px) {
  body.mobile-app .overlay > .panel { padding:16px; }
  body.mobile-app .home-avatar { display:none; }
  body.mobile-app .home-gem-balance small { display:none; }
  body.mobile-app #app .hud-c { min-width:64px; }
  body.mobile-app #app .streak { font-size:28px; }
  body.mobile-app .home-identity-text small { font-size:9px; }
  body.mobile-app .world-island b { font-size:11px; }
}
@media (max-height:540px) and (orientation:landscape) {
  body.mobile-app #menuOv .home-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px 24px; }
  body.mobile-app #menuOv .home-world-art { height:200px; }
  body.mobile-app #menuOv .home-feature-cards { grid-template-columns:1fr 1fr; }
  body.mobile-app .overlay > .panel { max-width:820px; padding:16px; }
  body.mobile-app .world-map-layout { grid-template-columns:minmax(0,1fr) 260px; }
  body.mobile-app .world-map-viewport { min-height:140px; max-height:44vh; }
  body.mobile-app #app { max-width:none; padding-inline:max(16px,env(safe-area-inset-left)); }
  body.mobile-app #app .hud { padding-top:6px; }
  body.mobile-app #app #stage { margin:0 210px 0 12px; }
  body.mobile-app #app .touch-controls { position:fixed; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); padding:0; width:190px; }
  body.mobile-app #app .touch-player-controls { flex-direction:column-reverse; gap:6px; }
  body.mobile-app #app .touch-controls .pad { --b:44px; grid-template-rows:repeat(3,44px); }
  body.mobile-app #app .touch-controls .dir { height:44px; }
  body.mobile-app #app .touch-controls .swipepad { flex:auto; width:170px; height:80px; }
  body.mobile-app #app .touch-controls .sp-cross { width:36px; height:36px; }
  body.mobile-app #app .touch-controls .sp-hint { margin-top:48px; }
  body.mobile-app #app .touch-controls.duo { left:12px; right:12px; width:auto; justify-content:space-between; }
  body.mobile-app #app .touch-controls.duo .touch-player-controls { width:150px; }
  body.mobile-app.coop #app #stage { margin-left:170px; }
}
@media (prefers-reduced-motion:reduce) {
  body.mobile-app .overlay, body.mobile-app button { scroll-behavior:auto; }
}

@media (max-width:760px) and (max-height:740px) and (orientation:portrait) {
  body.mobile-app #menuOv { gap:12px; }
  body.mobile-app #menuOv .home-world-art { min-height:90px; height:90px; }
  body.mobile-app #menuOv #menuArt { min-height:90px; }
  body.mobile-app #menuOv .home-world-name { padding:4px; font-size:10px; }
  body.mobile-app #menuOv .home-feature { min-height:72px; padding:14px 16px; gap:12px; }
  body.mobile-app #menuOv .home-feature b { font-size:12px; }
  body.mobile-app #menuOv .home-feature small { font-size:11px; margin-top:5px; }
  body.mobile-app #menuOv .home-feature-cards { gap:10px; }
}

body.mobile-app #app #hint { max-width:72%; margin-inline:auto; font-size:12px; line-height:1.4; }

@media (max-width:360px) { body.mobile-app #app .touch-controls.duo { gap:6px; } }

body.mobile-app #menuOv #menuArt { flex:1; height:auto; min-height:0; }
@media (max-width:760px) { body.mobile-app #menuOv #logo { font-size:clamp(28px,10.5vw,70px); } }
@media (max-height:540px) and (orientation:landscape) {
  body.mobile-app #resultOv .result-panel { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); height:calc(var(--app-height) - 24px); max-height:100%; max-width:820px; gap:12px 24px; }
  body.mobile-app #resultOv .result-heading { grid-column:1; grid-row:1; gap:8px; }
  body.mobile-app #resultOv #rTitle { font-size:22px; }
  body.mobile-app #resultOv .result-body { grid-column:1; grid-row:2; height:100%; }
  body.mobile-app #resultOv .result-actions { grid-column:2; grid-row:1 / 3; border-top:0; border-left:1px solid rgba(208,164,236,.15); padding:0 0 0 18px; justify-content:center; }
}