/* Phone travel services use the original metal/wood perimeter. The source
   centre contains an inset rectangle at y=70; omitting its fill lets the
   scroll well and its stationary footer share one uninterrupted surface. */
body.desktop-client.touch-client #panel[data-native-panel=npc] .native-npc-service-pane[data-npc-service=travel]{
 border-image-slice:28 28 22;
 border-image-width:28px 28px 22px;
 border-image-repeat:stretch;
 padding-bottom:0;
 background:linear-gradient(#111710ed,#12180fed),url('/assets/ui/native-detail-wood.png') #12180f;
 background-clip:padding-box;
 isolation:isolate;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .native-npc-service-pane[data-npc-service=travel]::before{
 content:'';position:absolute;inset:7px 7px 0;z-index:-1;pointer-events:none;
 border:1px solid #776e51;border-radius:3px;
 background:linear-gradient(115deg,#514a2b20,#080d0859),url('/assets/ui/native-detail-wood.png') #1b2117;
 box-shadow:inset 0 2px 5px #050805a6,0 1px #c2ac7133;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-service-title{
 left:22px;width:calc(100% - 45px);font-size:12px;letter-spacing:.015em;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-services{
 display:flex;flex-direction:column;gap:0;
 margin:8px 8px 0;padding:8px 10px;
 overflow-x:hidden;overflow-y:auto;contain:paint;isolation:isolate;
 scroll-padding-block:10px;overscroll-behavior:contain;
 color:#e6d7b6;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-services>*{flex-shrink:0}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] [data-npc-feedback]{order:-2}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .npc-travel-balance,
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] h3:has(+.npc-travel-destinations){display:none}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-services>h3{
 margin:12px 0 8px;font:600 12px/1.6 var(--font-title);letter-spacing:.04em;color:#e8cf99;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-destinations{
 --npc-travel-row:clamp(30px,calc((var(--npc-pane-height,336px) - 146px)/5),38px);
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(var(--npc-travel-row),auto);
 order:-1;align-items:stretch;gap:4px 6px;width:100%;margin:0 0 14px;padding:0;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-destinations>button,
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-footer>button{
 box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-width:0;min-height:var(--npc-travel-row,36px);width:100%;margin:0;padding:4px 5px;
 border:1px solid #817354;border-image:none;border-radius:2px;
 background:linear-gradient(#403c2bbd,#211f17d9),url('/assets/ui/native-control-metal.png') center/auto 100% repeat-x;
 color:#f0dfb8;font:600 12px/1.4 var(--font-title);letter-spacing:.015em;
 white-space:normal;overflow-wrap:anywhere;text-align:center;text-shadow:0 1px 1px #0d1009;
 box-shadow:inset 0 1px #d4bd803d,inset 0 -2px #080b0873,0 1px #080b08a6;
 touch-action:manipulation;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-name{display:block;max-width:100%}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-current{
 display:block;margin-top:1px;color:#baad8a;font:400 9px/1.2 var(--font);letter-spacing:.08em;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-destinations>button:disabled{
 opacity:1;filter:none;color:#d3c5a4;border-color:#615b43;
 background:linear-gradient(#141b12dc,#232a1be8),url('/assets/ui/native-detail-wood.png');
 box-shadow:inset 0 2px 4px #060a0699,inset 0 -1px #b49a5633;cursor:default;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-destinations>button:hover:not(:disabled),
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-footer>button:hover{
 border-color:#b49a65;filter:brightness(1.16);
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-destinations>button:focus-visible,
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-footer>button:focus-visible{
 outline:2px solid #ebcc85;outline-offset:-3px;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-footer{
 position:relative;flex:none;align-items:center;justify-content:space-between;gap:8px;min-height:0;margin:0 8px;padding:5px 10px;
 border-top:1px solid #8b794442;
 background:linear-gradient(#0d130c70,#15190fbb);box-shadow:0 -1px #080c0859;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] [data-npc-service=travel] .native-npc-footer>button{
 flex:none;width:112px;max-width:55%;min-width:0;min-height:32px;
}
body.desktop-client.touch-client #panel[data-native-panel=npc] .npc-travel-footer-balance{min-width:0;margin:0;color:#c9bc9c;font:11px/1.4 var(--font);overflow-wrap:anywhere}
/* The 504 x 326 source already draws its X in the 28px right corner.
   Retain that complete corner slice and centre an invisible 44px hit area
   on the source socket (14px from the right, 16px from the top). */
body.desktop-client.touch-client #panel[data-native-panel=npc]:has([data-npc-service=travel]) .dialog-head{
 right:0;top:0;width:0;height:0;min-height:0;padding:0;border:0;background:none;box-shadow:none;
}
body.desktop-client.touch-client #panel[data-native-panel=npc]:has([data-npc-service=travel]) .dialog-head #close-panel{
 right:-8px;top:-6px;width:44px;height:44px;min-height:44px;margin:0;padding:0;
 border:0;border-image:none;border-radius:50%;background:none;box-shadow:none;
 font-size:0;color:transparent;text-shadow:none;transform:none;filter:none;touch-action:manipulation;
}
body.desktop-client.touch-client #panel[data-native-panel=npc]:has([data-npc-service=travel]) #close-panel::before,
body.desktop-client.touch-client #panel[data-native-panel=npc]:has([data-npc-service=travel]) #close-panel::after{content:none}
body.desktop-client.touch-client #panel[data-native-panel=npc]:has([data-npc-service=travel]) #close-panel:focus-visible{
 outline:1px solid #ebcc85;outline-offset:-10px;
}
/* Keep the desktop destination skin and dimensions independently controlled. */
body.desktop-client:not(.touch-client) #panel[data-native-panel=npc] :is(.npc-travel-current,.npc-travel-footer-balance){display:none}