/* Arena Core 0.5.3 — Recovery UI Pack 005: map and inventory */
:root{
  --ui005-dock-clearance:calc(var(--ui002-dock-height,76px) + var(--ui002-safe-bottom,10px) + 22px);
  --ui005-panel:#091522;
  --ui005-panel-2:#0d1c2c;
  --ui005-line:#294761;
  --ui005-blue:#68beff;
  --ui005-gold:#f5cd62;
}

/* Shared safe scrolling: the fixed dock must never cover the last control. */
html.ui002-touch-layout body[data-screen="map"] #screen-map.active,
html.ui002-touch-layout body[data-screen="inventory"] #screen-inventory.active{
  padding-bottom:var(--ui005-dock-clearance)!important;
  scroll-padding-bottom:var(--ui005-dock-clearance)!important;
}
html.ui002-touch-layout body[data-screen="map"] .map-menu-actions,
html.ui002-touch-layout body[data-screen="inventory"] .character-advanced{
  scroll-margin-bottom:var(--ui005-dock-clearance);
}

/* MAP — quieter header and a viewport-sized two-column workspace on iPad. */
html.ui002-touch-layout body[data-screen="map"] #screen-map>.card:first-child{
  padding:12px 15px!important;
  background:linear-gradient(180deg,#0d1c2c,#08131f)!important;
  border-color:#2b4b67!important;
}
html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head{margin:0!important;align-items:center!important}
html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head h2{font-size:25px!important}
html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head p{max-width:720px!important;margin-top:4px!important;color:#9eb2c7!important}
html.ui002-touch-layout body[data-screen="map"] .city-map-layout{gap:12px!important;align-items:start!important}
html.ui002-touch-layout body[data-screen="map"] .city-map-canvas,
html.ui002-touch-layout body[data-screen="map"] .map-detail-panel{
  border-color:#31536f!important;
  box-shadow:0 16px 34px rgba(0,0,0,.34)!important;
}
html.ui002-touch-layout body[data-screen="map"] .city-map-canvas{
  background-color:#06101a!important;
}
html.ui002-touch-layout body[data-screen="map"] .city-map-shade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,10,17,.80) 0,rgba(4,10,17,.24) 44px,transparent 110px),
    linear-gradient(90deg,rgba(4,10,17,.58) 0,transparent 84px),
    linear-gradient(180deg,transparent 70%,rgba(3,8,14,.38) 100%)!important;
}
html.ui002-touch-layout body[data-screen="map"] .city-map-picture,
html.ui002-touch-layout body[data-screen="map"] .city-map-picture img{position:absolute;inset:0;width:100%;height:100%}
html.ui002-touch-layout body[data-screen="map"] .city-map-picture img{
  object-fit:cover!important;
  object-position:center center!important;
  filter:saturate(.90) contrast(1.04) brightness(.86)!important;
}

/* Small precise map points; only the selected/current point carries a text label. */
html.ui002-touch-layout body[data-screen="map"] .map-hotspot{
  width:30px!important;height:30px!important;
  margin:-15px 0 0 -15px;
  border:2px solid rgba(239,202,104,.88)!important;
  background:rgba(5,13,22,.78)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.38),inset 0 0 0 3px rgba(4,10,17,.82)!important;
  overflow:visible!important;
  transform:none!important;
}
html.ui002-touch-layout body[data-screen="map"] .map-hotspot:before{
  inset:7px!important;border:0!important;background:#d9b652;border-radius:50%;box-shadow:0 0 12px rgba(239,202,104,.55)
}
html.ui002-touch-layout body[data-screen="map"] .map-hotspot:hover,
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.selected,
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.current{
  width:38px!important;height:38px!important;margin:-19px 0 0 -19px;
  border-color:#76c8ff!important;
  background:rgba(8,31,50,.90)!important;
  box-shadow:0 0 0 6px rgba(63,166,229,.15),0 0 25px rgba(71,179,244,.46),inset 0 0 0 4px rgba(4,12,20,.82)!important;
}
html.ui002-touch-layout body[data-screen="map"] .map-hotspot:hover:before,
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.selected:before,
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.current:before{background:#76c8ff;box-shadow:0 0 15px rgba(98,190,255,.75)}
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.current:after{display:none!important}
.ui005-map-label{
  display:none;position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  min-width:max-content;max-width:140px;padding:5px 8px;border:1px solid #43647f;border-radius:9px;
  background:rgba(4,13,22,.94);color:#edf7ff;font-size:9px;font-weight:850;letter-spacing:.02em;
  box-shadow:0 8px 20px rgba(0,0,0,.42);pointer-events:none;white-space:nowrap;
}
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.selected .ui005-map-label,
html.ui002-touch-layout body[data-screen="map"] .map-hotspot.current .ui005-map-label{display:block}

/* Location card becomes a compact information panel rather than a second giant picture. */
html.ui002-touch-layout body[data-screen="map"] .map-detail-panel{
  background:linear-gradient(180deg,#0c1a29,#07111c)!important;
}
html.ui002-touch-layout body[data-screen="map"] .map-detail-image{
  height:142px!important;min-height:142px!important;
  background-position:center 42%!important;
  filter:saturate(.72) contrast(1.03) brightness(.70);
}
html.ui002-touch-layout body[data-screen="map"] .map-detail-image:after{
  background:linear-gradient(180deg,rgba(5,12,20,.10),rgba(7,17,28,.96))!important;
}
html.ui002-touch-layout body[data-screen="map"] .map-detail-copy{padding:14px!important;gap:9px!important}
html.ui002-touch-layout body[data-screen="map"] .map-detail-copy h3{font-size:22px!important}
html.ui002-touch-layout body[data-screen="map"] .map-detail-description{font-size:11px!important;line-height:1.5!important}
html.ui002-touch-layout body[data-screen="map"] .map-service-grid{gap:6px!important}
html.ui002-touch-layout body[data-screen="map"] .map-service-grid div{padding:8px!important;background:#0a1725!important}
html.ui002-touch-layout body[data-screen="map"] .map-route-line{padding:8px!important}
html.ui002-touch-layout body[data-screen="map"] .map-menu-actions .action{min-height:44px!important}

/* INVENTORY — stable iPad workspace, compact equipment hall and scrollable bag. */
html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head{
  padding:12px 16px!important;
  background:linear-gradient(180deg,#0d1c2c,#08131f)!important;
  border-color:#2b4b67!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head h2{font-size:25px!important}
html.ui002-touch-layout body[data-screen="inventory"] .character-workspace{
  grid-template-columns:minmax(350px,.78fr) minmax(0,1.62fr)!important;
  gap:12px!important;align-items:start!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-sheet,
html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-panel{
  height:650px!important;min-height:650px!important;max-height:650px!important;
  border-color:#2c4a65!important;background:linear-gradient(180deg,#0c1928,#07111c)!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-sheet{
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-sheet-title,
html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-title{min-height:43px!important;padding-top:0!important;padding-bottom:0!important}
html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall{margin-top:8px!important;min-height:0!important;flex:1 1 auto}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body{min-height:382px!important;height:382px!important}
html.ui002-touch-layout body[data-screen="inventory"] .mannequin{transform:translate(-50%,-50%) scale(.86)!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-slot{min-height:56px!important;padding:6px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .hall-slot{min-height:52px!important;width:104px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-head{top:7px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-necklace{top:68px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-chest{top:129px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-belt{top:190px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-legs{top:251px!important}
html.ui002-touch-layout body[data-screen="inventory"] .hall-body .slot-feet{bottom:7px!important}
html.ui002-touch-layout body[data-screen="inventory"] .character-sheet-stats{flex:0 0 auto!important}
html.ui002-touch-layout body[data-screen="inventory"] .character-detail-button{flex:0 0 44px!important;margin-top:8px!important}
html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-panel{
  display:flex!important;flex-direction:column!important;overflow:hidden!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-toolbar{flex:0 0 auto!important}
html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-content{
  flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#345879 transparent;
}
html.ui002-touch-layout body[data-screen="inventory"] #inventory-list{
  min-height:180px!important;height:auto!important;padding-bottom:12px!important;
}
html.ui002-touch-layout body[data-screen="inventory"] #inventory-list.ui005-empty-list{
  display:grid!important;place-items:center!important;color:#9eb0c4!important;
  background:radial-gradient(circle at 50% 35%,rgba(72,139,190,.08),transparent 48%)!important;
}
html.ui002-touch-layout body[data-screen="inventory"] .character-advanced{margin-top:10px!important}

.ui005-gold-coin{
  display:inline-grid;place-items:center;width:17px;height:17px;margin-left:5px;vertical-align:-3px;
  border:1px solid #ffe68a;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fffbd1 0 8%,#ffe27a 9% 28%,#d79b27 58%,#75450a 100%);
  box-shadow:inset 0 0 0 2px rgba(113,66,5,.22),0 0 9px rgba(246,198,72,.30);
}

/* Low landscape phones: top dock, compact headers, then scrollable content below it. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
  html.ui002-touch-layout body[data-screen="map"]>nav,
  html.ui002-touch-layout body[data-screen="inventory"]>nav{
    top:0!important;bottom:auto!important;width:min(100%,760px)!important;
    min-height:52px!important;height:52px!important;padding:3px 7px!important;
    border-top:0!important;border-bottom:1px solid #2b4964!important;border-radius:0 0 15px 15px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.48)!important;
  }
  html.ui002-touch-layout body[data-screen="map"]>nav button,
  html.ui002-touch-layout body[data-screen="inventory"]>nav button{
    min-height:44px!important;padding:3px 5px!important;flex-direction:row!important;gap:5px!important;font-size:9px!important;
  }
  html.ui002-touch-layout body[data-screen="map"]>nav button b,
  html.ui002-touch-layout body[data-screen="inventory"]>nav button b{font-size:17px!important}
  html.ui002-touch-layout body[data-screen="map"] .app,
  html.ui002-touch-layout body[data-screen="inventory"] .app{
    padding-top:62px!important;padding-bottom:18px!important;
  }
  html.ui002-touch-layout body[data-screen="map"] #screen-map.active,
  html.ui002-touch-layout body[data-screen="inventory"] #screen-inventory.active{
    padding-bottom:18px!important;scroll-padding-top:60px!important;scroll-padding-bottom:18px!important;
  }
  html.ui002-touch-layout body[data-screen="map"] #screen-map>.card:first-child,
  html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head{padding:8px 12px!important}
  html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head p,
  html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head p{display:none!important}
  html.ui002-touch-layout body[data-screen="map"] .city-map-canvas,
  html.ui002-touch-layout body[data-screen="map"] .map-detail-panel{height:470px!important;min-height:470px!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-sheet,
  html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-panel{height:600px!important;min-height:600px!important;max-height:600px!important}
}

/* Portrait phone: replace the 740px mannequin with a compact 15-slot grid. */
@media (max-width:560px) and (orientation:portrait){
  html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head{align-items:flex-start!important}
  html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head h2{font-size:23px!important}
  html.ui002-touch-layout body[data-screen="map"] #screen-map .ui-page-head p{font-size:11px!important;line-height:1.45!important}
  html.ui002-touch-layout body[data-screen="map"] .city-map-canvas{height:500px!important;min-height:500px!important}
  html.ui002-touch-layout body[data-screen="map"] .map-detail-panel{min-height:0!important}
  html.ui002-touch-layout body[data-screen="map"] .map-detail-image{height:118px!important;min-height:118px!important}
  html.ui002-touch-layout body[data-screen="map"] .map-detail-copy{padding:12px!important;gap:8px!important}
  html.ui002-touch-layout body[data-screen="map"] .map-detail-description{font-size:10px!important}
  html.ui002-touch-layout body[data-screen="map"] .map-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html.ui002-touch-layout body[data-screen="map"] .map-hotspot{width:26px!important;height:26px!important;margin:-13px 0 0 -13px}
  html.ui002-touch-layout body[data-screen="map"] .map-hotspot.selected,
  html.ui002-touch-layout body[data-screen="map"] .map-hotspot.current{width:34px!important;height:34px!important;margin:-17px 0 0 -17px}
  .ui005-map-label{font-size:8px;padding:4px 6px;max-width:112px}

  html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head{padding:12px!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head h2{font-size:23px!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-screen-head p{font-size:11px!important;line-height:1.42!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-workspace{display:block!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-sheet,
  html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-panel{
    height:auto!important;min-height:0!important;max-height:none!important;margin-bottom:10px!important;
  }
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important;
    margin-top:8px!important;padding:0!important;
  }
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-side,
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-body,
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-overlay{display:contents!important}
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .mannequin{display:none!important}
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-slot,
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-body .hall-slot{
    position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;width:auto!important;min-width:0!important;min-height:58px!important;
    grid-template-columns:26px minmax(0,1fr)!important;gap:5px!important;padding:6px!important;
  }
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-slot-icon{width:26px!important;height:26px!important;font-size:15px!important}
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-slot-label{font-size:7px!important}
  html.ui002-touch-layout body[data-screen="inventory"] #equipment-hall .hall-slot-title{font-size:8px!important;-webkit-line-clamp:2!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-sheet-stats{margin-top:8px!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-panel{display:flex!important}
  html.ui002-touch-layout body[data-screen="inventory"] .catalog-controls{grid-template-columns:1fr!important}
  html.ui002-touch-layout body[data-screen="inventory"] #inventory-filters{
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:none;
  }
  html.ui002-touch-layout body[data-screen="inventory"] #inventory-filters::-webkit-scrollbar{display:none}
  html.ui002-touch-layout body[data-screen="inventory"] #inventory-filters .chip{flex:0 0 auto!important}
  html.ui002-touch-layout body[data-screen="inventory"] .character-inventory-content{min-height:230px!important;max-height:430px!important}
  html.ui002-touch-layout body[data-screen="inventory"] #inventory-list{min-height:210px!important}
}

@media (min-width:900px) and (orientation:landscape) and (min-height:700px){
  html.ui002-touch-layout body[data-screen="map"] .city-map-canvas,
  html.ui002-touch-layout body[data-screen="map"] .map-detail-panel{height:640px!important;min-height:640px!important;max-height:640px!important}
}

@media(prefers-reduced-motion:reduce){
  html.ui002-touch-layout body[data-screen="map"] .map-hotspot{transition:none!important}
}