/* Mobile NPC cards: no scrolling. Long shops use small pages, keeping actions intact. */
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel){
 box-sizing:border-box;place-items:center;overflow:hidden;
 padding:max(12px,var(--app-safe-top,0px)) max(12px,var(--app-safe-right,0px)) max(12px,var(--app-safe-bottom,0px)) max(12px,var(--app-safe-left,0px));background:rgba(0,0,0,.42);
}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .panel-card{
 display:flex;flex-direction:column;box-sizing:border-box;width:min(520px,100%);max-width:520px;height:auto;min-height:0;
 max-height:calc(var(--visual-height,100dvh) - max(12px,var(--app-safe-top,0px)) - max(12px,var(--app-safe-bottom,0px)));
 margin:0;padding:10px;overflow:hidden;
}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .panel-head{flex:none;align-items:center;gap:8px;margin:0 0 8px;padding:0 0 6px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .panel-head h2{margin:0;font-size:16px;line-height:1.3;letter-spacing:.5px;overflow-wrap:anywhere}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) #close-panel{flex:none;box-sizing:border-box;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;font-size:24px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) #panel-content{display:block;flex:none;min-height:0;overflow:hidden;padding:0}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) :is(.butler-layout,.npc-service-layout,.butler-conversation,.npc-service-conversation,.npc-service-actions,.npc-redemption-list,.skin-list){display:block;flex:none;min-width:0;min-height:0;max-height:none;overflow:visible;padding:0}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) :is(.butler-art,.npc-service-art,.butler-intro h3,.npc-service-name,.butler-eyebrow,.npc-service-eyebrow,.butler-footer,.npc-service-footer,.butler-speech,.npc-service-speech,.butler-hint,.butler-choice[data-action="chat"],.npc-service-actions>.empty,.pvp-shop-intro){display:none}
html:is(.compact-hud,.android-shell) #panel.pet-owner-panel .butler-choice:nth-child(2){display:none}
html:is(.compact-hud,.android-shell) #panel.pet-owner-panel .butler-hint{display:block}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) [data-npc-mobile-hidden="true"]{display:none!important}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .butler-status{font-size:11px;margin:0 0 6px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) button:not(#close-panel){min-height:44px;padding:7px 9px!important;font-size:12px;line-height:1.35;touch-action:manipulation}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .butler-choice strong{font-size:13px;line-height:1.3}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .butler-choice small{font-size:11px;line-height:1.35;margin-top:2px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) :is(.butler-choices,.farm-goods){gap:6px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) :is(.butler-hint,.butler-warning,.npc-service-warning,.npc-compact-status,.farm-note,.npc-mobile-summary){font-size:12px;line-height:1.4;margin:6px 0}
html:is(.compact-hud,.android-shell) #panel.butler-panel .farm-panel :is(.farm-speech,h4,.butler-conversation>button,.farm-panel>button){display:none}
html:is(.compact-hud,.android-shell) #panel.butler-panel .farm-panel>button{display:none}
html:is(.compact-hud,.android-shell) #panel.butler-panel .farm-goods{grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
html:is(.compact-hud,.android-shell) #panel.butler-panel .farm-offer .farm-note{font-size:11px;margin:5px 0 0}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .npc-compact-guide{font-size:12px;line-height:1.4;margin:0 0 8px;padding-left:16px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .npc-compact-guide li{display:none;margin-bottom:4px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .npc-compact-guide li:nth-child(2),html:is(.compact-hud,.android-shell) #panel.npc-service-panel .npc-compact-guide li:nth-child(3){display:list-item}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel[data-npc-kind="hospital"] .npc-compact-guide li:nth-child(2){display:none}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel[data-npc-kind="hospital"] .npc-compact-guide li:first-child{display:list-item}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .npc-compact-job-buttons{flex-wrap:wrap;margin-top:6px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel :is(.item-row,.fuel-vehicle-row){gap:8px;padding:4px 0}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .shop-quantity button{min-width:44px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .shop-quantity input{min-height:44px;height:44px;font-size:16px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .shop-order{margin:0;gap:4px 8px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .skin-card{margin:0;grid-template-columns:44px minmax(0,1fr) auto;gap:8px}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .skin-card button{grid-column:auto;grid-row:auto}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .skin-preview{width:44px;height:60px;grid-row:auto}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel[data-npc-kind="garage"] .item-row>div:first-child{display:grid;grid-template-columns:64px minmax(0,1fr);gap:3px 8px;align-items:center}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel .vehicle-shop-preview{grid-column:1;grid-row:1 / span 3;width:64px;height:52px;margin:0}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel[data-npc-kind="garage"] .item-row :is(strong,small){grid-column:2}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel :is(.garage-shop-tabs,.skin-shop-tabs){position:static;gap:6px;margin:0 0 6px;align-items:center}
html:is(.compact-hud,.android-shell) #panel.npc-service-panel :is(.garage-shop-tabs,.skin-shop-tabs)>button{padding:4px!important;font-size:12px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .npc-mobile-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;margin:8px 0 0}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .npc-mobile-pager.is-inline{margin:0;gap:4px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .npc-mobile-pager button:not(#close-panel){flex:none;width:44px;min-width:44px;padding:0!important;font-size:22px}
html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .npc-mobile-page{font-size:12px;text-align:center;line-height:1.3;min-width:30px}
@media(orientation:portrait){html:is(.compact-hud,.android-shell) #panel:is(.butler-panel,.npc-service-panel) .panel-card{width:min(340px,100%);max-width:340px}}

/* Keep the combat condition visible before accepting these jobs. */
html:is(.compact-hud,.android-shell) #panel.npc-service-panel:is([data-npc-kind="police"],[data-npc-kind="traffic"]) .npc-compact-guide li:first-child{display:list-item}
@media(orientation:landscape){html:is(.compact-hud,.android-shell) #panel.npc-service-panel .shop-order{width:auto;grid-template-columns:auto auto}}

/* Mobile shops use square catalogues and an explicit transaction step. */
html:is(.compact-hud,.android-shell) #panel:is(.npc-service-panel,.butler-panel)[data-mobile-shop] .panel-card{width:var(--mobile-shop-width,340px);max-width:100%}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-grid{display:grid;grid-template-columns:repeat(var(--mobile-shop-cols,3),var(--mobile-shop-tile,90px));gap:8px;justify-content:center;margin:0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-tile:not(#close-panel){
 display:grid;grid-template-rows:26px minmax(0,1fr) 14px;gap:2px;align-items:center;
 box-sizing:border-box;width:var(--mobile-shop-tile,90px);height:var(--mobile-shop-tile,90px);min-width:0;min-height:0;
 padding:6px!important;margin:0;text-align:center;overflow:hidden;
}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font-size:11px;line-height:13px;align-self:start}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-price{font-size:10px;line-height:14px;white-space:nowrap;font-weight:700}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-picture{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-picture :is(img,canvas){display:block;width:100%;height:100%;min-width:0;min-height:0;max-height:100%;object-fit:contain;padding:0;margin:0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-picture .skin-preview{display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;background:transparent;border:0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-empty{grid-column:1 / -1;font-size:13px;line-height:1.5;margin:6px 0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-question{font-size:16px;text-align:center;margin:8px 0 16px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-mode{min-height:48px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-confirm-head{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:10px;min-height:56px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-confirm-head>.mobile-shop-picture{width:56px;height:56px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-confirm h3{font-size:16px;line-height:1.25;margin:0 0 6px;overflow-wrap:anywhere}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-confirm-price{font-size:15px;font-weight:700;line-height:1.3;margin:0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] :is(.mobile-shop-detail,.mobile-shop-result){font-size:12px;line-height:1.35;margin:4px 0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-quantity{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-quantity button{box-sizing:border-box;flex:0 0 44px;min-width:44px;width:44px;height:44px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-quantity output{flex:0 0 34px;min-width:34px;text-align:center;font-size:16px;font-weight:700}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
html:is(.compact-hud,.android-shell) #panel[data-mobile-shop-view="confirm"]:has(.npc-service-warning:not([hidden])) :is(.mobile-shop-detail,.mobile-shop-result){display:none}
@layer rp-theme{
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-tile{background:var(--ui-raised)!important;color:var(--ui-text)!important;border-radius:10px!important;box-shadow:none!important}
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-tile:is(:hover,:active){background:#30291f!important}
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] :is(.mobile-shop-price,.mobile-shop-confirm-price){color:var(--ui-gold-soft)!important}
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-picture :is(img,canvas){background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-picture .skin-preview{background:transparent!important;border:0!important;box-shadow:none!important}
 html:is(.compact-hud,.android-shell) #panel[data-mobile-shop] .mobile-shop-back{background:var(--ui-bg)!important;color:var(--ui-gold-soft)!important}
}