/* Shared mobile presentation. The existing game owns authentication and gameplay. */
html.mobile-polish #city-backdrop {
  background: #bce7eb url('login-coast.png') center / cover no-repeat;
}
html.mobile-polish #auth-overlay.bright-auth {
  inset: 0; width: 100%; height: 100%; padding: 0;
  overflow-x: hidden; overflow-y: auto;
}
html.mobile-polish .bright-auth .auth-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(285px, 47%, 360px);
  align-items: center; justify-content: center; gap: clamp(18px, 4vw, 60px);
  min-height: 100%; max-width: 1100px; margin: 0 auto;
  padding: 16px clamp(18px, 4vw, 48px);
}
html.mobile-polish .bright-auth .auth-masthead {
  top: 8px; left: 10px; right: auto;
}
html.mobile-polish .bright-auth :is(.portal-wordmark,.portal-footer,.city-eyebrow,.neighbors-caption) {
  display: none;
}
html.mobile-polish .bright-auth #login-motion {
  width: 34px; min-height: 34px; height: 34px; font-size: 16px;
}
html.mobile-polish .bright-auth .auth-intro {
  display: flex; flex-direction: column; align-items: center; padding: 0; gap: 0;
}
html.mobile-polish .bright-auth .city-logo {
  font-size: clamp(30px, 4.8vw, 48px); line-height: 1.05; margin: 0 0 8px;
}
html.mobile-polish .bright-auth .city-tagline {
  font-size: 12px; line-height: 1.45; margin: 0;
}
html.mobile-polish .bright-auth .android-download {
  margin-top: 8px; min-height: 44px; padding: 7px 16px; gap: 9px;
}
html.mobile-polish .bright-auth .android-download strong { font-size: 12px; }
html.mobile-polish .bright-auth .android-download small { font-size: 9px; }
html.mobile-polish .login-neighbors {
  width: 100%; max-width: 390px; min-height: 0; height: auto;
  gap: 4px; margin: 16px 0 0; padding: 0 0 8px;
}
html.mobile-polish .login-neighbor {
  --portrait-offset: 0px; --portrait-angle: 0deg;
  border-radius: 42px 42px 12px 12px; border-width: 1px;
}
html.mobile-polish .neighbor-portrait { margin-top: 4px; }
html.mobile-polish .login-neighbor figcaption { font-size: 9px; padding: 5px 0; }
html.mobile-polish .bright-auth .auth-card.city-card {
  width: 100%; max-width: 360px; padding: 18px 20px; margin: 0;
  border-radius: 22px; overflow: visible;
  background: #fffef7f5; box-shadow: 0 14px 42px #1d584d30;
}
html.mobile-polish .bright-auth .city-card .card-kicker { display: none; }
html.mobile-polish .bright-auth .city-card h2 {
  font-size: 27px; line-height: 1.15; margin: 0 0 12px;
}
html.mobile-polish .bright-auth .city-card[data-auth-mode="login"] .auth-description { display: none; }
html.mobile-polish .bright-auth .city-card .auth-description {
  font-size: 12px; line-height: 1.5; margin: 0 0 12px;
}
html.mobile-polish .bright-auth .city-card label {
  font-size: 12px; line-height: 18px; margin: 0 0 5px;
}
html.mobile-polish .bright-auth .city-card .field-wrap input {
  height: 44px; min-height: 44px; font-size: 16px; padding-top: 9px; padding-bottom: 9px;
}
html.mobile-polish .bright-auth .city-card :is(#auth-primary-group,#auth-recovery-group,#auth-primary-confirm-group,#auth-recovery-confirm-group) {
  position: relative; margin-top: 12px;
}
html.mobile-polish .bright-auth .city-card #password-visibility { top: 0; height: 44px; width: 44px; }
html.mobile-polish .bright-auth .city-card .auth-login-links {
  position: absolute; top: -10px; right: 0; margin: 0;
}
html.mobile-polish .bright-auth .city-card .auth-login-links button {
  min-height: 32px; padding: 0 0 4px 8px; font-size: 11px;
}
html.mobile-polish .bright-auth .city-card .auth-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px;
}
html.mobile-polish .bright-auth .city-card .auth-actions button {
  width: 100%; min-height: 44px; padding: 8px 6px; font-size: 13px; margin: 0;
}
html.mobile-polish .bright-auth .city-card .signup-divider { display: none; }
html.mobile-polish .bright-auth .city-card:not([data-auth-mode="login"]) .auth-actions { grid-template-columns: 1fr; }
html.mobile-polish .bright-auth .city-card #auth-message {
  font-size: 12px; line-height: 1.4; margin: 8px 0 0;
}
html.mobile-polish .bright-auth .city-card #auth-message[data-android-initial-hint="true"] { display: none; }
html.mobile-polish .bright-auth .auth-intro .auth-health-warning {
  display: flex; align-items: center; gap: 9px; width: 100%; max-width: 340px;
  margin: 12px 0 0; padding: 8px 10px; border: 1px solid #fff9;
  border-radius: 12px; background: #143f3ee8; color: #fff; text-align: left;
}
html.mobile-polish .bright-auth .auth-intro .auth-age-badge {
  display: grid; place-items: center; align-self: stretch; flex: 0 0 42px;
  min-height: 42px; font-size: 23px; background: #a62c34; border-radius: 8px;
}
html.mobile-polish .bright-auth .auth-intro .auth-health-warning > div { min-width: 0; }
html.mobile-polish .bright-auth .auth-intro .auth-health-warning > div > strong {
  display: block; font-size: 10px; line-height: 1.4;
}
html.mobile-polish .bright-auth .auth-intro .auth-health-warning p {
  color: #fff; font-size: 10px; line-height: 1.4; margin: 3px 0 0;
}
html.mobile-polish .bright-auth .auth-intro .auth-health-warning b { color: #ffda75; white-space: nowrap; }
@media (orientation: landscape) and (max-height: 350px) {
  html.mobile-polish .bright-auth .auth-layout { padding-top: 10px; padding-bottom: 10px; }
  html.mobile-polish .bright-auth .auth-card.city-card { padding: 12px 18px; }
  html.mobile-polish .bright-auth .city-logo { font-size: 32px; }
  html.mobile-polish .bright-auth .city-tagline { display: none; }
  html.mobile-polish .login-neighbors { max-width: 300px; margin-top: 12px; }
  html.mobile-polish:not(.android-shell) .bright-auth .auth-intro .login-neighbors { margin-top: 4px; padding-bottom: 2px; }
  html.mobile-polish .bright-auth .auth-intro .android-download { margin-top: 4px; }
  html.mobile-polish:not(.android-shell) .bright-auth .auth-intro .auth-health-warning { margin-top: 6px; }
}
@media (max-width: 700px) { html.mobile-polish .login-neighbor figcaption { display: none; } }
@media (orientation: landscape) and (max-height: 450px) {
  html.mobile-polish:not(.android-shell) .bright-auth .city-tagline { display: none; }
  html.mobile-polish:not(.android-shell) .login-neighbors { max-width: 300px; margin-top: 8px; padding-bottom: 2px; }
  html.mobile-polish:not(.android-shell) .bright-auth .auth-intro .auth-health-warning { margin-top: 6px; }
}
/* Keyboard / large accessibility text: retain reachable inputs with natural scrolling. */
@media (max-height: 270px) {
  html.mobile-polish .bright-auth .auth-layout { display: flex; padding: 10px 20px; align-items: flex-start; }
  html.mobile-polish .bright-auth .auth-intro,html.mobile-polish .bright-auth .auth-masthead { display: none; }
  html.mobile-polish .bright-auth .auth-card.city-card { max-width: 430px; }
}
/* A portrait phone stays one column when the keyboard makes it wider than tall. */
@media (max-width: 520px), (orientation: portrait) {
  html.mobile-polish .bright-auth .auth-layout { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
  html.mobile-polish .bright-auth .auth-intro { width: 100%; max-width: 360px; }
  html.mobile-polish .bright-auth .city-logo { font-size: 32px; }
  html.mobile-polish .bright-auth .city-tagline,html.mobile-polish .login-neighbors { display: none; }
  html.mobile-polish .bright-auth .auth-intro .auth-health-warning { max-width: 360px; }
}

html.mobile-polish #auth-overlay.bright-auth { top: var(--visual-top,0px); height: var(--visual-height,100dvh); bottom: auto; }
html.mobile-polish .bright-auth .portal-fullscreen { width:34px; height:34px; }

/* Keep these rules more specific than the regular mobile two-column layout. */
html.mobile-polish #auth-overlay.bright-auth { scroll-padding-block: 12px; }
html.mobile-polish #auth-overlay.auth-editing :is(.auth-intro,.auth-masthead,.portal-footer) { display: none; }
html.mobile-polish #auth-overlay.auth-editing .auth-layout {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 0; padding: max(12px, var(--app-safe-top, 0px)) max(12px, var(--app-safe-right, 0px)) max(20px, var(--app-safe-bottom, 0px)) max(12px, var(--app-safe-left, 0px));
}
html.mobile-polish #auth-overlay.auth-editing .auth-card.city-card {
  width: 100%; max-width: 360px; flex: none; margin: 0;
}
html.mobile-polish #auth-overlay .field-wrap input { scroll-margin-block: 28px; }

/* Sized in CSS pixels of the visible WebView; native has already removed IME/cutout space. */
html.mobile-polish body.in-game #chat-widget.chat-widget {
  position: fixed; inset: auto;
  left: var(--app-chat-x, 8px); top: var(--app-chat-y, 8px);
  width: var(--app-chat-width, 300px); height: var(--app-chat-height, 190px);
  max-width: none; max-height: none; min-width: 0; min-height: 0;
  box-sizing: border-box; display: flex; flex-direction: column;
  padding: 8px; gap: 6px; margin: 0; overflow: hidden;
  z-index: 110; pointer-events: auto; overscroll-behavior: contain;
  background: rgba(12, 12, 12, .9)!important;
  color: #f5f5f5;
  border: 1px solid #eeeeee99!important; border-radius: 8px!important;
  box-shadow: 0 3px 16px #0005!important;
}
html.mobile-polish body:not(.in-game) #chat-widget,
html.mobile-polish #chat-widget[hidden] { display: none!important; }
/* The selected tab supplies the visible heading. Retain the title/count for AT. */
html.mobile-polish #chat-widget > .social-title {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
html.mobile-polish #chat-widget .android-chat-header {
  display: flex; align-items: stretch; gap: 4px; flex: 0 0 36px; min-height: 0;
}
html.mobile-polish #chat-widget .chat-channels {
  display: flex; flex: 1; gap: 3px; min-width: 0; margin: 0;
}
html.mobile-polish #chat-widget .chat-channel {
  height: 100%; min-height: 0; padding: 0 3px; font-size: 12px;
  border: 0!important; border-radius: 3px!important; background: #ffffff0a!important;
  color: #f4f4f4!important;
}
html.mobile-polish #chat-widget .chat-channel.is-active {
  background: #ffffff14!important; box-shadow: inset 0 -2px 0 #ffffff;
}
html.mobile-polish #chat-widget #android-chat-close {
  width: 36px; flex: 0 0 36px; padding: 0; margin: 0; min-height: 0;
  font: 24px/1 system-ui; color: #f7f7f7; border: 1px solid #cccccc66;
  border-radius: 4px; background: #ffffff0a; cursor: pointer;
}
html.mobile-polish #chat-widget #chat-log.chat-log {
  flex: 1 1 0; height: auto; min-height: 0; max-height: none; width: 100%;
  margin: 0; padding: 3px 4px; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  background: transparent!important; border: 0!important; border-radius: 0!important;
  font: 13px/1.45 system-ui, sans-serif; text-align: left;
  color: #f5f5f5!important; scrollbar-color: #b3b3b3 #111;
}
html.mobile-polish #chat-widget .chat-entry {margin: 0 0 3px; overflow-wrap: anywhere;}
html.mobile-polish #chat-widget .chat-time {font-size: 10px; color: #aaa; margin-right: 6px;}
html.mobile-polish #chat-widget .chat-name {color: #fff; font-weight: 700;}
html.mobile-polish #chat-widget .chat-form {
  flex: 0 0 42px; display: flex; min-height: 0; margin: 0; gap: 6px;
  padding: 0; width: 100%;
}
html.mobile-polish #chat-widget .chat-form input {
  flex: 1 1 0; min-width: 0; width: 0; height: 100%; min-height: 0; margin: 0;
  padding: 0 10px; font: 16px/normal system-ui; border: 1px solid #d0d0d080!important;
  border-radius: 5px!important; background: #0a0a0aa6!important; color: #fff!important;
}
html.mobile-polish #chat-widget .chat-form input:focus {
  border-color: #fff!important; outline: none!important;
}
html.mobile-polish #chat-widget .chat-form button {
  flex: 0 0 48px; width: 48px; height: 100%; min-height: 0; padding: 0; margin: 0;
  font: 700 14px/1 system-ui; background: #202020!important; color: #fff!important;
  border: 1px solid #ffffffa6!important; border-radius: 5px!important;
}
html.mobile-polish #chat-widget .chat-target-row {
  flex: 0 0 28px; display: flex; align-items: center; gap: 5px;
  min-height: 0; margin: 0; padding: 0; font: 12px/1.2 system-ui;
}
html.mobile-polish #chat-widget #chat-friend-target {
  flex: 1; min-width: 0; min-height: 0; height: 28px; padding: 0 5px;
  font: 12px system-ui; border-color: #cccccc80!important; border-radius: 3px!important;
  background: #111!important;
}
html.mobile-polish #chat-widget :is(.chat-channel-hint, #chat-feedback) {
  flex: 0 0 auto; min-height: 0; max-height: 30px; overflow-y: auto;
  padding: 0; margin: 0; font: 11px/15px system-ui;
  color: #eee!important;
}
html.mobile-polish #chat-widget #chat-feedback:empty,
html.mobile-polish #chat-widget [hidden] {display: none!important;}
html.mobile-polish body.in-game #chat-widget.android-chat-short {padding: 5px; gap: 4px; border-radius: 8px!important;}
html.mobile-polish #chat-widget.android-chat-short .android-chat-header {flex-basis: 30px;}
html.mobile-polish #chat-widget.android-chat-short .chat-form {flex-basis: 36px;}
html.mobile-polish #chat-widget.android-chat-short #chat-log {font-size: 12px; line-height: 1.4;}
html.mobile-polish #chat-widget.android-chat-short .chat-channel {font-size: 11px;}
html.mobile-polish #chat-widget.android-chat-tiny .android-chat-header {flex-basis: 28px;}
html.mobile-polish #chat-widget.android-chat-tiny .chat-form {flex-basis: 34px;}
html.mobile-polish #chat-widget.android-chat-tiny .chat-entry {margin-bottom: 1px;}
/* The panel has its own close button. Clear controls behind the readable history. */
html.mobile-polish body.in-game.android-chat-open :is(.hud-tools, #settings-toggle, #chat-toggle,
  .left-status-stack, .vitals-hud, #quickbar, .actions, #move-joystick) {
  visibility: hidden!important; pointer-events: none!important;
}
html.mobile-polish #chat-widget .chat-form input::placeholder {color: #b8b8b8!important;}

/* PC: giữ cỡ quen thuộc trên Full HD, co tối đa 30% theo cả rộng/cao cửa sổ. */
@media (hover:hover) and (pointer:fine){
  html:not(.android-shell) body.in-game #chat-widget.chat-widget {
    width:clamp(259px,min(19.28vw,34.26vh),370px);
    height:clamp(221.2px,min(16.46vw,29.26vh),316px);
  }
  /* Cửa sổ PC hẹp có thể đã bật bố cục gọn; vẫn co theo màn hình khi kéo rộng lại. */
  html.mobile-polish:not(.android-shell) body.in-game #chat-widget.chat-widget {
    max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);
  }
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget.chat-widget {
  max-width:calc(100% - 84px);
  display:flex;flex-direction:column;gap:5px;padding:8px;overflow:hidden;
  background: rgba(12, 12, 12, .77)!important;
  border: 1px solid #eeeeee99!important;
  border-radius: 8px!important;
  box-shadow: 0 3px 16px #0005!important;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget > :not(#chat-log) {
  flex:0 0 auto;margin:0;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget .chat-channel {
  min-height:28px;padding:4px 3px;
  background: #ffffff0a!important;
  border: 0!important;
  border-radius: 3px!important;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget .chat-channel.is-active {
  background: #ffffff14!important;
  box-shadow: inset 0 -2px 0 #ffffff;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget #chat-log.chat-log {
  flex:1 1 0;height:auto;min-height:24px;padding:4px;overflow-x:hidden;
  background: transparent!important;
  border: 0!important;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget .chat-form input {
  padding:6px 8px;
  background: #0a0a0aa6!important;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget .chat-form button {
  padding:6px 10px;font-size:12px;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget :is(.chat-channel-hint,#chat-feedback) {
  max-height:28px;overflow-y:auto;
}
html:not(.mobile-polish):not(.android-shell) body.in-game #chat-widget #chat-feedback:empty {display:none;}
/* APK is already immersive. No change is made to the site's fullscreen button. */
html.android-shell [data-fullscreen] {display: none!important;}
/* Money/diamonds are read-only overlays: touches reach the game underneath. */
html.mobile-polish body.in-game #status-hud,
html.mobile-polish body.in-game #status-hud * {
  pointer-events: none!important; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

/* Personal menus: shared phone/WebView layout, including wide landscape phones. */
html:is(.compact-hud,.android-shell) #panel.player-menu{
 --menu-gap:10px;--menu-width:360px;
 padding:max(var(--menu-gap),var(--app-safe-top,0px)) max(var(--menu-gap),var(--app-safe-right,0px)) max(var(--menu-gap),var(--app-safe-bottom,0px)) max(var(--menu-gap),var(--app-safe-left,0px));
 overflow:hidden;box-sizing:border-box;
}
html:is(.compact-hud,.android-shell) #panel.player-menu .panel-card{
 display:flex;flex-direction:column;width:var(--menu-width);max-width:100%;min-width:0;min-height:0;height:auto;
 max-height:min(360px,calc(var(--visual-height,100dvh) - max(var(--menu-gap),var(--app-safe-top,0px)) - max(var(--menu-gap),var(--app-safe-bottom,0px))));
 padding:10px;margin:auto;overflow:hidden;box-sizing:border-box;font-size:12px;line-height:1.35;
}
html:is(.compact-hud,.android-shell) #panel.player-menu .panel-head{flex:none;align-items:center;gap:6px;margin:0 0 6px;padding:0;border:0}
html:is(.compact-hud,.android-shell) #panel.player-menu .panel-head h2{font-size:16px;line-height:1.25;margin:0;letter-spacing:0}
html:is(.compact-hud,.android-shell) #panel.player-menu #close-panel{width:40px;height:40px;min-width:40px;min-height:40px;padding:0;font-size:20px;flex:none}
html:is(.compact-hud,.android-shell) #panel.player-menu #panel-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:2px;scroll-padding:6px}
html:is(.compact-hud,.android-shell) #panel.player-menu button{font-size:12px;line-height:1.25;min-height:40px;padding:6px 8px;touch-action:manipulation}
html:is(.compact-hud,.android-shell) #panel.player-menu :is(.empty,.friend-empty,.gang-muted,.gang-feedback,.skin-job-note,.garage-impound-notice){font-size:11px;line-height:1.4;margin:6px 0}
html:is(.compact-hud,.android-shell) #panel.player-menu :is(.gang-feedback:empty,.rooms-message:empty){display:none}
html:is(.compact-hud,.android-shell) #panel.player-menu :is(.friend-section-title,.gang-section-title){font-size:12px;line-height:1.3;margin:8px 0 4px}

/* Fixed-size artwork and short cards replace large empty catalogue cells. */
html:is(.compact-hud,.android-shell) #panel.owned-grid-panel{--menu-width:426px}
html:is(.compact-hud,.android-shell) #panel.owned-grid-panel:has(.owned-grid>:last-child:nth-child(-n+2)){--menu-width:254px}
html:is(.compact-hud,.android-shell) #panel.owned-grid-panel:has(.owned-grid>:last-child:nth-child(3)){--menu-width:326px}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile{gap:2px;min-height:104px;padding:6px 4px;line-height:1.2}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile-art{display:flex;flex:none;align-items:center;justify-content:center;height:46px;width:100%;margin:0;padding:0}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile-art .shop-item-image{display:block;width:44px;height:44px;max-height:100%;padding:0;margin:0;flex:none}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile-art .vehicle-shop-preview{display:block;width:100%;max-width:100px;height:46px;max-height:100%;padding:0;margin:0;flex:none}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile>strong{font-size:11px;line-height:1.2;overflow-wrap:normal}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile>small{font-size:10px;line-height:1.25;margin:0}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-tile-action{font-size:10px;line-height:1.2;padding-top:3px}
html:is(.compact-hud,.android-shell) #panel.player-menu :is(.owned-quantity,.owned-slot-badge){top:3px;padding:2px 4px;font-size:9px}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-quantity{right:3px}
html:is(.compact-hud,.android-shell) #panel.player-menu .owned-slot-badge{left:3px}
html:is(.compact-hud,.android-shell) #panel.inventory-panel[data-inventory-view="slots"]{--menu-width:300px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-picker{gap:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-selected{gap:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-selected .shop-item-image{width:44px;height:44px;margin:0;padding:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-selected strong{font-size:13px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-selected small{font-size:11px;margin-top:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-picker h3{font-size:13px;margin:0}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-grid{gap:5px;padding:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-choice{min-height:86px;padding:6px 2px;font-size:9px;gap:4px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-choice b{font-size:11px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-slot-icon{width:24px;height:24px}
html:is(.compact-hud,.android-shell) #panel.player-menu .inventory-back{padding:5px 10px}

/* The active clothing tile already identifies what is being worn. */
html:is(.compact-hud,.android-shell) #panel.wardrobe-panel{--menu-width:326px}
html:is(.compact-hud,.android-shell) #panel.player-menu .skin-intro{display:none}
html:is(.compact-hud,.android-shell) #panel.player-menu .skin-job-note{padding:6px 8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .skin-shop-tabs{gap:4px;margin:0 0 6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .skin-shop-tabs button{font-size:12px;padding:5px 4px;min-height:40px}
html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile{gap:3px;padding:5px 3px;min-height:104px}
html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile .skin-preview{width:38px;height:50px;min-height:0;flex:none}
html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile strong{font-size:11px;line-height:1.2}
html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile small{font-size:10px;line-height:1.2}

/* Friends show one list at a time. Long lists scroll below the close button. */
html:is(.compact-hud,.android-shell) #panel.friends-panel{--menu-width:340px}
html:is(.compact-hud,.android-shell) #panel.player-menu .friend-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 0 6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .friend-tabs button{font-size:11px;padding:5px 3px;white-space:normal}
html:is(.compact-hud,.android-shell) #panel.player-menu .friend-row{gap:5px;padding:5px 0}
html:is(.compact-hud,.android-shell) #panel.player-menu .friend-row>span{font-size:12px;min-width:70px}
html:is(.compact-hud,.android-shell) #panel.player-menu .friend-row button{font-size:10px;padding:5px 6px}

/* Team creation uses one input row; management keeps every existing action. */
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-panel{font-size:12px;line-height:1.35}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-intro{font-size:11px;line-height:1.4;margin:0 0 6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-create{display:grid;grid-template-columns:minmax(0,1fr) 105px;grid-template-areas:'label label' 'name submit' 'note note';gap:5px;padding:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-create label{grid-area:label;font-size:12px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-create input{grid-area:name;height:40px;min-height:40px;padding:6px 8px;font-size:16px;letter-spacing:2px;scroll-margin-block:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-create button{grid-area:submit;min-width:0;margin:0}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-create small{grid-area:note;margin:0;font-size:10px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-summary{padding:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-summary-name{gap:8px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-summary p{font-size:11px;margin:4px 0 0}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-member-list{max-height:none;overflow:visible}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-member-row{gap:5px;padding:6px 0;flex-wrap:wrap}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-member-info{gap:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-member-info strong{font-size:12px}
html:is(.compact-hud,.android-shell) #panel.player-menu :is(.gang-role,.gang-online){font-size:10px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-row-actions{gap:4px;max-width:100%;justify-content:flex-start}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-row-actions button{font-size:10px;padding:5px 6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-invite-card{padding:8px;margin-bottom:6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .gang-footer{margin-top:8px;padding-top:6px}

/* Five servers fit in a short list; status and joining rules stay visible. */
html:is(.compact-hud,.android-shell) #panel.rooms-panel{--menu-width:350px}
html:is(.compact-hud,.android-shell) #panel.rooms-panel .panel-card{position:relative}
html:is(.compact-hud,.android-shell) #panel.rooms-panel .panel-head h2{max-width:calc(100% - 116px)}
html:is(.compact-hud,.android-shell) #panel.rooms-panel #panel-content{overflow:hidden}
html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-toolbar{gap:6px;margin-bottom:6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-toolbar p{font-size:10px;line-height:1.3;max-width:none}
html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-toolbar button{position:absolute;top:10px;right:57px;padding:5px 8px;font-size:11px}
html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-list{gap:4px}
html:is(.compact-hud,.android-shell) #panel.player-menu .room-row{grid-template-columns:8px minmax(0,1fr) 88px;gap:7px;min-height:46px;padding:3px 6px}
html:is(.compact-hud,.android-shell) #panel.player-menu .room-dot{width:8px;height:12px;border-radius:3px}
html:is(.compact-hud,.android-shell) #panel.player-menu .room-row strong{font-size:12px;line-height:1.2}
html:is(.compact-hud,.android-shell) #panel.player-menu .room-row small{font-size:10px;line-height:1.3;margin-top:2px}
html:is(.compact-hud,.android-shell) #panel.player-menu .room-row button{font-size:11px;padding:5px 4px}
html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-message{font-size:11px;margin:5px 0 0}
@media(orientation:portrait){
 html:is(.compact-hud,.android-shell) #panel.player-menu .panel-card{max-width:340px}
}
@media(max-height:300px){
 html:is(.compact-hud,.android-shell) #panel.player-menu{--menu-gap:5px}
 html:is(.compact-hud,.android-shell) #panel.player-menu .panel-card{padding:6px 8px}
 html:is(.compact-hud,.android-shell) #panel.player-menu .rooms-toolbar button{top:6px;right:55px}
}
@layer rp-theme{
 html:is(.compact-hud,.android-shell) #panel.player-menu{--ui-radius-card:12px;--ui-radius-control:8px;--ui-radius-small:5px}
 html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile{background:var(--ui-raised)!important;color:var(--ui-text)!important;box-shadow:none!important}
 html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile[aria-pressed="true"]{background:#554329!important;box-shadow:inset 0 0 0 1px var(--ui-gold-soft)!important}
 html:is(.compact-hud,.android-shell) #panel.player-menu .outfit-tile:hover:not(:disabled){background:#30291f!important}
}