/* Shared phone interface; desktop keeps its existing layout. */
.mobile-load-meta{display:none}
@media (max-width:600px), (pointer:coarse) and (max-width:1100px){
  button,a,input,select,summary{ -webkit-tap-highlight-color:transparent }
  button,a{touch-action:manipulation}
  header{gap:8px;padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
  .brand-logo,.logo-img{width:94px;height:52px;object-fit:contain}
  .header-right,.garage-nav{gap:6px;flex-wrap:wrap;justify-content:flex-end}
  .icon-button,.sound-button,.garage-nav a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;padding:8px;letter-spacing:.3px}
  .primary,.secondary,.text-button,.buy-button,.room-entry button,.room-list-heading button{min-height:44px;border-radius:12px;font-size:12px;letter-spacing:.4px}
  .primary{min-width:0;padding:12px 16px;gap:12px}
  .account-screen,.room-screen{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));overflow:auto;align-items:flex-start}
  .account-card,.room-panel{width:min(100%,620px);margin:auto;padding:20px;border-radius:22px;border:1px solid #ffffff24;background:linear-gradient(145deg,#202b34,#10171e);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
  .account-logo{width:100px;height:68px;margin:0 auto 10px;display:block}
  .account-card h1,.room-heading h2{font-size:36px;line-height:.95;margin:12px 0}
  .account-card p,.room-panel>p{font-size:12px;line-height:1.5;margin:10px 0}
  .account-card input,.room-setting select,.host-bot-controls select,.room-create input{font-size:16px;min-height:46px;border-radius:10px;width:100%;min-width:0}
  .account-card label{font-size:11px;letter-spacing:.7px}
  .account-card .eyebrow{font-size:9px;letter-spacing:1px}
  .room-heading{align-items:flex-start;gap:10px;flex-wrap:wrap}
  .room-heading-actions{display:flex;flex-wrap:wrap;gap:4px}
  .room-heading-actions button{font-size:10px;padding:8px}
  .room-create{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
  .room-create>input,.room-create>.primary{grid-column:1/-1;width:100%}
  .room-setting{display:flex;flex-direction:column;align-items:stretch;gap:5px;font-size:10px}
  .rooms-list{max-height:32dvh;min-height:70px}
  .room-entry{padding:12px;border-radius:12px;gap:8px}
  .room-entry>div{min-width:0}.room-entry strong{overflow-wrap:anywhere}
  .room-entry span{font-size:10px;letter-spacing:0;line-height:1.5}
  .room-entry button{flex-shrink:0;padding:8px 12px}
  .selected-room{border-radius:14px;padding:12px}
  .host-bot-controls{border-radius:10px;gap:8px}.host-bot-controls select{width:auto;flex:1}
  .host-bot-controls button{width:100%;min-height:44px}
  .room-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .room-actions button{padding:10px 8px;font-size:10px}
  .room-actions .primary{grid-column:1/-1;width:100%;min-width:0}
  /* Phone loading screen: lightweight CSS illustration and real download progress. */
  #asset-loader{display:grid;align-items:center;justify-items:center;padding: max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow:auto;background:radial-gradient(ellipse at 85% 10%,#9e273f66,transparent 50%),radial-gradient(ellipse at 0 85%,#16494f66,transparent 50%),#0b1119}
  #asset-loader .asset-loader-card{position:relative;width:min(100%,420px);padding:26px 22px;border:1px solid #ffffff22;border-radius:26px;background:linear-gradient(155deg,#26313ce8,#111a24f5);box-shadow:0 24px 70px #0007;text-align:left;overflow:hidden}
  #asset-loader .asset-loader-card:before{content:'';display:block;position:absolute;right:-35px;top:32px;width:160px;height:84px;border:14px solid #ffffff08;outline:1px dashed #ffffff29;outline-offset:-7px;border-radius:60px;transform:rotate(-28deg);pointer-events:none}
  #asset-loader .asset-loader-card:after{content:'';position:absolute;width:28px;height:4px;top:73px;right:48px;background:#ff4a69;border-radius:8px;box-shadow:0 0 16px #ff4a69;margin:0;animation:mobile-track-glow 1.6s ease-in-out infinite}
  #asset-loader .asset-loader-card>img{position:relative;width:132px;height:94px;margin:0 0 24px;animation:none;filter:drop-shadow(0 6px 12px #0007)}
  #asset-loader .asset-kicker{display:block;font-size:10px;letter-spacing:2px;color:#ffb5a4}
  #asset-loader .asset-loader-card h1{font-size:42px;line-height:.96;margin:12px 0 18px;letter-spacing:-.5px}
  #asset-loader .asset-loader-card h1 em{color:#ff536d}
  #asset-loader .asset-loader-card p{font-size:12px;line-height:1.6;min-height:38px;margin:0;color:#d8e1e8;overflow-wrap:anywhere}
  #asset-loader .mobile-load-meta{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:#a7bdcd;font-size:10px;letter-spacing:1px}
  #asset-loader .mobile-load-meta output{font:800 24px 'Barlow Condensed',Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:0}
  #asset-loader progress{appearance:none;display:block;width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;background:#ffffff15;margin:10px 0 16px;accent-color:#ff536d}
  #asset-loader progress::-webkit-progress-bar{background:#ffffff15;border-radius:8px}
  #asset-loader progress::-webkit-progress-value{background:linear-gradient(90deg,#e33350,#ffab86);border-radius:8px}
  #asset-loader progress::-moz-progress-bar{background:linear-gradient(90deg,#e33350,#ffab86);border-radius:8px}
  #asset-loader .asset-loader-card small{font-size:11px;color:#92a8b8;line-height:1.5}
  #asset-loader .asset-loader-card .primary{margin:12px 0;font-size:12px;min-height:46px}
  #roster button{min-height:48px;flex-basis:78px;font-size:10px;border-radius:10px}
  #roster b{font-size:20px}.garage-nav{font-size:10px}
  .details{padding:12px 16px 20px}.collection{font-size:10px}
  #selection-status{font-size:11px;line-height:1.4;min-height:16px;margin-top:8px}
  .view-controls button,.orbit-tools button{min-height:40px;font-size:10px;padding:8px}
  #shop-panel .shop-layout{padding:12px 14px 24px;min-width:0}
  #shop-panel #kart-list button{min-height:46px;padding:8px 12px;font-size:11px;border-radius:10px}
  #shop-panel #kart-list span{font-size:11px}
  #shop-panel .exclusive-kart{flex-basis:180px;padding:14px;border-radius:14px}
  #shop-panel .exclusive-kart .eyebrow{font-size:9px}#shop-panel .exclusive-kart h3{font-size:26px}
  #shop-panel .exclusive-kart>strong{font-size:16px}#shop-panel .exclusive-kart>strong small{font-size:9px}
  #shop-panel .exclusive-kart .buy-button,#shop-panel .upgrade-card .buy-button,#shop-panel .paint-card button{min-height:44px;font-size:11px;padding:10px 6px}
  #shop-panel .upgrade-card{flex-basis:260px;padding:14px;border-radius:14px}
  #shop-panel .upgrade-card h3{font-size:23px}#shop-panel .upgrade-card p{font-size:11px;line-height:1.4}
  #shop-panel .level-label,#shop-panel .part-stat{font-size:11px}#shop-panel .paint-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  #shop-panel .paint-card{padding:10px;border-radius:12px}#shop-panel .paint-card h3{font-size:11px}
  #shop-panel .paint-swatch{height:32px}#shop-panel .earn>summary{padding:14px 0;font-size:10px;min-height:44px}
  #shop-panel .earn-content p,#shop-panel .earn-content dl,#shop-panel .save-note,#shop-status{font-size:11px;line-height:1.5}
  @keyframes mobile-track-glow{50%{opacity:.4;transform:translateX(12px)}}
}
@media (max-width:600px) and (orientation:portrait), (pointer:coarse) and (max-width:1100px) and (orientation:portrait){
  .menu{inset:88px 18px max(18px,env(safe-area-inset-bottom));width:auto;max-width:none;overflow-y:auto;padding:6px 0 18px}
  .menu h1{font-size:clamp(36px,10vw,54px);margin:14px 0}.menu p{font-size:13px;margin-bottom:18px;line-height:1.5}
  .menu>.primary,.menu>.shop-entry{width:100%;min-height:48px;border-radius:14px}
  .menu .eyebrow{font-size:10px;letter-spacing:1.4px}.menu-controls{margin-top:12px}
  body:not(.playing) .track-card,body:not(.playing) footer{display:none}
  #garage-panel .model-stage{height:32svh;min-height:200px;max-height:320px}
  #garage-panel .stage-heading h1{font-size:28px}.view-controls{bottom:12px}.orbit-tools{bottom:12px}
  .garage-nav{gap:2px}header:has(.garage-nav){height:auto;min-height:64px}
  #garage-panel .name-row h2{font-size:32px}
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:600px){
  #asset-loader .asset-loader-card{width:min(620px,100%);padding:18px 24px;display:grid;grid-template-columns:150px 1fr;column-gap:24px}
  #asset-loader .asset-loader-card>img{grid-column:1;grid-row:1/7;align-self:center;width:150px;height:120px;margin:0}
  #asset-loader .asset-loader-card>:not(img){grid-column:2}
  #asset-loader .asset-loader-card h1{font-size:30px;margin:7px 0}
  #asset-loader .asset-loader-card p{min-height:0;font-size:11px}
  #asset-loader .mobile-load-meta{margin-top:6px}#asset-loader progress{margin:5px 0 8px}
  #asset-loader .asset-loader-card:before,#asset-loader .asset-loader-card:after{display:none}
  .account-card{padding:14px 20px}.account-logo{display:none}
  .account-card h1{font-size:26px}.room-heading h2{font-size:28px}
}
@media (prefers-reduced-motion:reduce){#asset-loader .asset-loader-card:after{animation:none}}