/* Touch layout. The world owns gestures; panels retain scrolling and pinch zoom.
   manipulation suppresses double-tap zoom, including on delegated UI controls. */
#mobile-controls{display:none}
/* Touch uses the same Menu destinations. Essential touch actions stay in the
   action bar; the desktop return-orb shortcut is also available inside Menu. */
body.mobile #h2status,body.mobile #hud-return-orb{display:none!important}
body.mobile-map #h2 .grp.menu{visibility:visible}
body.mobile{--safe-l:max(12px,env(safe-area-inset-left));--safe-r:max(12px,env(safe-area-inset-right));--safe-t:max(8px,env(safe-area-inset-top));--safe-b:max(10px,env(safe-area-inset-bottom));overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
body.mobile :is(button,a,input,select,summary,[role=button],.btn,.tab,.x){touch-action:manipulation}
body.mobile :is(input,select,textarea){font-size:16px}
body.mobile #c{height:100%;touch-action:none}
body.mobile #mobile-controls{display:block;position:fixed;inset:0;z-index:15;pointer-events:none;font:13px Georgia,serif;color:#f2e4c5;user-select:none;-webkit-user-select:none}
#mobile-controls button{box-sizing:border-box;min-width:44px;min-height:44px;color:inherit;font:inherit;border:1px solid #b6a07299;border-radius:10px;background:linear-gradient(145deg,#29382deb,#101b16ed);box-shadow:inset 0 1px #ffeac02b,0 3px 12px #0005;pointer-events:auto;touch-action:manipulation}
#mobile-pad button,#mobile-actions button{touch-action:none}
#mobile-controls button:focus-visible{outline:2px solid #f3d89a;outline-offset:3px}
#mobile-controls button.pressed,#mobile-controls button:active{background:#6c6039;border-color:#ffe2a0;box-shadow:inset 0 2px 8px #0005}
#mobile-pad{position:absolute;left:var(--safe-l);bottom:var(--safe-b);display:grid;grid-template:repeat(3,44px)/repeat(3,44px);gap:3px;pointer-events:auto;touch-action:none;border-radius:12px;background:radial-gradient(#19231c99,transparent 72%)}
#mobile-pad button{font:24px/1 Georgia,serif;padding:0}
#mobile-actions{position:absolute;right:var(--safe-r);bottom:var(--safe-b);width:138px;height:138px}
#mobile-actions .mobile-attack{position:absolute;right:0;bottom:0;width:82px;height:82px;border-radius:50%;font-size:15px;letter-spacing:.04em;border:2px solid #c5ab72;background:radial-gradient(at 35% 20%,#65583bed,#252c20ed);box-shadow:0 0 0 4px #131c1666,inset 0 1px #ffebbc66,0 4px 20px #0006}
#mobile-actions .mobile-use{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%}
#mobile-controls .mobile-more{position:absolute;right:calc(var(--safe-r) + 150px);top:var(--safe-t);padding:0 7px;z-index:1}
#mobile-controls .mobile-scrim{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;background:#050b0880;box-shadow:none}
#mobile-controls .mobile-scrim[hidden]{display:none}
#mobile-drawer{position:absolute;right:var(--safe-r);top:calc(var(--safe-t) + 52px);bottom:var(--safe-b);box-sizing:border-box;width:min(360px,calc(100% - var(--safe-l) - var(--safe-r)));padding:7px;overflow:auto;overscroll-behavior:contain;pointer-events:auto;border:1px solid #a58c59;border-radius:8px;background:#101b16f7;box-shadow:0 12px 40px #0009;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5px;align-content:start}
#mobile-drawer[hidden]{display:none}#mobile-drawer p{grid-column:1/-1;color:#c5bea9;line-height:1.6;margin:4px}
body.mobile-busy #mobile-pad,body.mobile-busy #mobile-actions{visibility:hidden}
body.mobile-busy #h2 .c>.grp{visibility:hidden}
body.mobile-panel #h2 .glb,body.mobile-panel #h2realm{visibility:hidden}
body.mobile-map #h2 .glb,body.mobile-ledger #h2 .glb,body.mobile-ledger #h2realm{visibility:hidden}
body.mobile-panel #mm,body.mobile-busy #dirdial{visibility:hidden}
body.mobile #h2{inset:0;width:auto;height:auto;transform:none;--u:1px;pointer-events:none}
body.mobile #h2>.stone,body.mobile #h2>.stone+div,body.mobile #h2hint,body.mobile #h2camera,body.mobile #h2tip,body.mobile #h2rose{display:none!important}
body.mobile #h2 .c{position:static;display:contents}
body.mobile #h2 .c>.grp:first-child{position:absolute;left:50%;bottom:calc(var(--safe-b) + 53px);transform:translateX(-50%);gap:4px}
body.mobile #h2 .c>.grp:first-child>.slot:first-child{display:none}
body.mobile #h2 .slot{width:48px;height:48px;min-width:44px;border-width:1px;border-radius:8px;touch-action:none}
body.mobile #h2 .slot .ic{inset:5px 8px 12px}
body.mobile #h2 .slot kbd{font-size:10px;bottom:4px}
body.mobile #h2 .c>.grp:nth-child(2){position:absolute;left:50%;bottom:var(--safe-b);transform:translateX(-50%);gap:4px;border:0;padding:0}
body.mobile #h2 .slot.pot{width:48px}
body.mobile #h2 .slot.pot kbd,body.mobile #h2 .slot.mini kbd{display:none}
body.mobile #h2 .slot[data-mobile-label]:after{content:attr(data-mobile-label);position:absolute;bottom:3px;left:0;right:0;text-align:center;font:10px Georgia,serif;color:#f1dfb6;pointer-events:none}
body.mobile #h2 .grp.menu{position:absolute;right:var(--safe-r);top:var(--safe-t);gap:4px;border:0;padding:0}
body.mobile #h2 .slot.mini{width:44px;height:44px}
body.mobile #h2 .slot.mini .ic{inset:4px 9px 13px}
body.mobile #h2 .glb{top:var(--safe-t);width:44px;height:44px;pointer-events:none}
body.mobile #h2 .glb.life{left:calc(var(--safe-l) + 4px)}body.mobile #h2 .glb.mana{left:calc(var(--safe-l) + 122px);right:auto}
body.mobile #h2 .glb .ring{inset:-2px}
body.mobile #h2 .glb .gt{opacity:1;transform:none;left:50px;top:12px;bottom:auto;padding:0;background:none;border:0;box-shadow:none;font:10px/1.4 Georgia,serif;text-shadow:0 1px 3px #000;letter-spacing:0;white-space:normal;width:68px}
body.mobile #h2top{top:calc(var(--safe-t) + 63px);width:40vw;gap:4px}
body.mobile #h2top .h2p .nm{font-size:11px}body.mobile #h2top .h2p .bar{height:7px}
body.mobile #h2zone{top:27%}body.mobile #h2zone .z{font-size:23px}
body.mobile #h2realm{left:var(--safe-l);top:calc(var(--safe-t) + 53px);font-size:10px}
body.mobile #mm{right:var(--safe-r);top:calc(var(--safe-t) + 57px);width:76px!important;height:76px!important;border-width:2px}
body.mobile #h2toast{bottom:calc(var(--safe-b) + 112px);max-width:45vw;width:max-content}
body.mobile #h2toast div{font-size:11px;padding:4px 6px;max-width:100%;box-sizing:border-box;white-space:normal;text-align:center;overflow-wrap:anywhere}
body.mobile #minebar,body.mobile #chanbar{bottom:calc(var(--safe-b) + 120px);width:180px;font-size:11px}
body.mobile #skills-hud,body.mobile #ledbtn,body.mobile .construction-panel{display:none!important}
body.mobile #dirdial{left:var(--safe-l);top:calc(var(--safe-t) + 74px);transform:scale(.7);transform-origin:top left}
body.mobile #dirheat{display:none!important}
/* Panels use the available height and scroll independently of the world. */
body.mobile #invp,body.mobile #forgep,body.mobile #ledgerp,body.mobile #economyp,body.mobile .skill-panel{inset:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);transform:none;max-height:none;width:auto;box-sizing:border-box;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;z-index:40}
body.mobile #invp{--c:44px;padding:6px 8px;overflow:auto}
body.mobile #invp .hd{position:sticky;top:-6px;background:#18221bf5;z-index:3;padding:4px 0;flex-wrap:nowrap}
body.mobile #invp .hd h3{font-size:15px}
body.mobile #invp .x{background:#29382d;border:1px solid #b6a07299;border-radius:5px;color:#eee1bf}
body.mobile #invp :is(.tab,.btn,.x),body.mobile #forgep :is(.btn,.x){min-height:44px;min-width:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
body.mobile #invp .cols{flex-wrap:nowrap}body.mobile #invp .side{min-width:155px}
body.mobile #invp .inventory-storage{overflow:auto;max-width:100%;overscroll-behavior:contain;padding:2px;box-sizing:border-box}
body.mobile #invp .cols>div:first-child{min-width:0;max-width:100%}
body.mobile #invp .ft{flex-wrap:wrap;gap:5px}body.mobile #invp input{font-size:16px;min-height:40px}
body.mobile #invtip{display:none!important}
body.mobile #invhold{opacity:.6}
body.mobile #ledgerp{overflow:auto;top:var(--safe-t);z-index:40}
body.mobile #forgep h3{position:sticky;top:-10px;background:#18221b;z-index:1;min-height:44px;align-items:center}
body.mobile #h2menu .box{box-sizing:border-box;max-height:calc(100dvh - var(--safe-t) - var(--safe-b));width:min(430px,90vw);min-width:0;padding:7px 12px;overflow:auto;overscroll-behavior:contain}
body.mobile #h2menu .vol label{min-height:36px}body.mobile #h2menu .vol input{height:18px}
body.mobile #h2menu .b{min-height:44px}
body.mobile .skill-panel header{padding:4px 6px;gap:4px}
body.mobile .skill-panel header h2{flex:1;font-size:16px}
body.mobile .skill-panel header nav{order:3;flex:0 0 100%;flex-wrap:nowrap;overflow:auto;padding-bottom:3px;overscroll-behavior:contain}
body.mobile .skill-panel header .spacer{display:none}
body.mobile .skill-panel header>button{flex-shrink:0}
body.mobile .skill-panel button,body.mobile .skill-confirm button{min-height:44px}
body.mobile .skill-panel footer{padding:4px 6px;font-size:10px}
body.mobile .skill-panel .skill-body{flex-direction:row}
body.mobile .skill-panel .skill-main{padding:6px}
body.mobile .skill-panel .skill-detail{width:205px;min-width:180px;max-height:none;padding:6px;border-left:1px solid #514b36;overscroll-behavior:contain}
body.mobile .skill-panel .skill-detail:empty{display:none}
body.mobile .skill-panel .skill-columns{grid-template-columns:repeat(3,155px)}
body.mobile .skill-panel .skill-node>span:last-child{min-width:0;overflow-wrap:anywhere}
body.mobile .skill-panel .skill-ranks{flex-wrap:wrap;gap:1px}
body.mobile .skill-panel .skill-ranks i{flex:0 0 3px}
body.mobile .skill-panel .skill-atlas{min-height:150px}
body.mobile .skill-panel .skill-search{left:6px;right:6px;top:6px;flex-wrap:wrap}
body.mobile .skill-panel .skill-search input{width:100%;min-width:0;box-sizing:border-box;font-size:16px;min-height:44px}
body.mobile .skill-panel .skill-search select{min-width:0;max-width:100%;min-height:44px;font-size:16px}
body.mobile .skill-panel .skill-zoom{display:flex;position:absolute;bottom:8px;left:8px;gap:4px}
body.mobile .skill-panel .skill-zoom button{min-width:44px;font-size:20px;padding:4px 7px}
body.mobile .skill-confirm{box-sizing:border-box;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l)}
body.mobile .skill-confirm .box{box-sizing:border-box;max-height:calc(100dvh - var(--safe-t) - var(--safe-b));overflow:auto;padding:10px}
body.mobile #h2death .p{pointer-events:auto;cursor:pointer}
#invtouch{position:fixed;inset:0;z-index:75;background:#050b08b8;display:flex;align-items:center;justify-content:center;pointer-events:auto;font:14px/1.5 Georgia,serif;color:#e8dcc1;box-sizing:border-box;padding:var(--safe-t,12px) var(--safe-r,12px) var(--safe-b,12px) var(--safe-l,12px)}
#invtouch[hidden]{display:none}
#invtouch .box{box-sizing:border-box;width:min(430px,88vw);max-height:calc(100dvh - var(--safe-t,12px) - var(--safe-b,12px));overflow:auto;padding:10px;background:#17221afc;border:1px solid #ae945f;border-radius:8px;overscroll-behavior:contain}
#invtouch .n{font-size:17px;text-align:center}#invtouch .t{color:#b6b29d;text-align:center}#invtouch .h{display:none}
#invtouch .actions{position:sticky;bottom:-10px;background:#17221a;display:flex;gap:5px;flex-wrap:wrap;padding:7px 0 0}
#invtouch button{flex:1;min-width:75px;min-height:44px;border:1px solid #a58c59;border-radius:5px;background:#35402d;color:#f2e4c5;font:14px Georgia,serif;touch-action:manipulation}
#invtouch .up{color:#88d591}#invtouch .dn{color:#f68f7e}
@media(max-width:700px){body.mobile #invp .side{min-width:145px}}
@media(max-height:350px){body.mobile #mm{width:56px!important;height:56px!important}body.mobile #h2zone{top:22%}body.mobile #h2zone .z{font-size:18px}}
@media(max-width:650px){
  body.mobile #invp{--c:44px}
  body.mobile #invp .cols{flex-wrap:wrap}
  body.mobile #invp .hd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 44px;gap:4px}
  body.mobile #invp .hd h3{grid-column:1/4;grid-row:1}
  body.mobile #invp .hd .x{grid-column:4;grid-row:1}
  body.mobile #invp .hd .tab{grid-row:2;padding:4px}
  body.mobile #invp .cols>div:first-child{width:100%}
  body.mobile #invp .doll{width:100%;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  body.mobile #invp .doll>.sil{display:none}
  body.mobile #invp .doll>.slot{position:relative;inset:auto!important;width:auto!important;height:112px!important;min-width:44px}
  body.mobile #invp .doll>.slot .it{max-width:100%;max-height:100%}
  body.mobile #invp .doll>.slot:has(.it):after{content:attr(data-label);position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:10px;padding:3px 0;color:#e8d6b0;background:#101910df;pointer-events:none}
  body.mobile #invp .side{width:100%}
}
body.mobile-panel #mobile-controls{visibility:hidden}
body:not(.mobile) #h2menu .touch-control,body.mobile #h2menu .keyboard-control,body.mobile .desktop-only{display:none!important}
body.mobile #h2 .slot[data-mobile-label] kbd{display:none}
#mobile-build{display:none;position:absolute;bottom:calc(var(--safe-b) + 110px);left:50%;transform:translateX(-50%);gap:5px;white-space:nowrap}
#mobile-build button{padding:0 7px}
body.mobile-building #mobile-build{display:flex}
body.mobile-building #mobile-actions{visibility:hidden}
body.mobile #h2 .slot[data-mobile-label]:after{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
#mobile-controls .mobile-ledger-close,#mobile-controls .mobile-map-close{display:none;position:absolute;right:var(--safe-r);top:var(--safe-t);padding:0 7px}
body.mobile-ledger #mobile-controls .mobile-ledger-close{display:block}
body.mobile-map #mobile-controls .mobile-map-close{display:block}
body.mobile-ledger #mobile-controls .mobile-more,body.mobile-map #mobile-controls .mobile-more{display:none}
body.mobile-busy #mobile-build{display:none}

/* Portrait has separate thumb zones: movement left, potions in the middle,
   attack/use right, and skills above. No target is smaller than 44 px. */
@media(orientation:portrait){
  body.mobile #h2 .grp.menu{top:calc(var(--safe-t) + 56px)}
  body.mobile #mobile-controls .mobile-more{top:calc(var(--safe-t) + 56px)}
  body.mobile #mobile-drawer{top:calc(var(--safe-t) + 108px)}
  body.mobile #h2 .c>.grp:first-child{left:auto;right:var(--safe-r);bottom:calc(var(--safe-b) + 152px);transform:none}
  body.mobile #h2 .c>.grp:nth-child(2){left:calc(var(--safe-l) + 146px);bottom:var(--safe-b);transform:none;flex-direction:column;gap:4px}
  body.mobile #h2 .slot.pot{width:44px;height:44px}
  body.mobile #mobile-actions{width:82px;height:144px}
  body.mobile #mobile-actions .mobile-use{left:auto;right:0}
  body.mobile #mm{top:calc(var(--safe-t) + 112px);width:64px!important;height:64px!important}
  body.mobile #h2top{top:calc(var(--safe-t) + 190px);width:80vw}
  body.mobile #h2realm{top:calc(var(--safe-t) + 46px);max-width:90vw}
  body.mobile #h2zone{top:30%}
  body.mobile #dirdial{top:calc(var(--safe-t) + 112px)}
  body.mobile #h2toast{bottom:calc(var(--safe-b) + 214px);max-width:86vw}
  body.mobile #minebar,body.mobile #chanbar{bottom:calc(var(--safe-b) + 214px);width:180px}
  body.mobile #mobile-build{bottom:calc(var(--safe-b) + 210px);max-width:calc(100% - var(--safe-l) - var(--safe-r));white-space:normal}
  body.mobile .skill-panel .skill-body{flex-direction:column}
  body.mobile .skill-panel .skill-detail{width:100%;min-width:0;max-height:42%;flex-shrink:0;border-left:0;border-top:1px solid #514b36}
  body.mobile .skill-panel .class-choices{grid-template-columns:1fr}
  body.mobile .skill-panel .class-choices button{padding:10px}
}

/* Town exchange shares the mobile panel and input lifecycle. */
body.mobile #economy-launch{display:none}
body.mobile #economyp :is(button,input,select){min-height:44px}
body.mobile #economyp :is(input,select){font-size:16px}
body.mobile #economyp .eco-header{padding:4px 7px}
body.mobile #economyp .eco-eyebrow{display:none}
body.mobile #economyp h2{font-size:17px}
body.mobile #economyp .eco-wallet{padding:0 7px}
body.mobile #economyp .eco-wallet strong{font-size:16px}
body.mobile #economyp{z-index:61}
body.mobile #economyp .eco-wallet{white-space:nowrap}
body.mobile #economyp .eco-sidebar{min-height:56px}
body.mobile #economyp .eco-filter{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
body.mobile #economyp .eco-search{grid-column:1/-1}
body.mobile #economyp .eco-item-grid{padding:4px;gap:5px}
body.mobile #economyp .eco-section-heading{padding:4px 7px 0}
body.mobile #economyp .eco-content{flex:1;padding:5px 7px;overscroll-behavior:contain}
body.mobile #economyp .eco-actions,body.mobile #economyp .eco-footer{padding:4px 7px;flex-shrink:0}
/* Short screens need a full-height form scroller. Keep its close button and
   trade confirmation reachable while navigation scrolls with the content. */
@media(max-height:450px){
  body.mobile #economyp{overflow:auto}
  body.mobile #economyp>*{flex-shrink:0}
  body.mobile #economyp .eco-shell{min-height:auto;flex:0 0 auto;overflow:visible}
  body.mobile #economyp .eco-main{min-height:auto;overflow:visible}
  body.mobile #economyp .eco-workspace{min-height:0}
  body.mobile #economyp .eco-header{position:sticky;top:0;z-index:2;background:#211e15}
  body.mobile #economyp .eco-content{flex:0 0 auto;overflow:visible}
  body.mobile #economyp .eco-actions{position:sticky;bottom:0;z-index:1}
}

/* The expedition journal is a full scrolling panel on short/touch screens. */
body.mobile #frontierjournal{inset:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);transform:none;width:auto;max-height:none;z-index:61;overflow:auto}
/* Compact headings and full-height scrolling panels on phones. */
body.mobile :is(#invp .hd h3,#h2menu h3,.skill-panel h2,#economyp h2,#ledgerp h3,#forgep h3){font-size:15px;letter-spacing:.08em}
body.mobile #h2menu .box{width:min(430px,calc(100vw - var(--safe-l) - var(--safe-r)))}
body.mobile #h2menu .b{min-height:44px;margin:4px 0}