/* Keep the turntable visible while the lists and details scroll independently. */
@media (orientation:landscape) and (max-height:540px) {
  #armory .ar-hd{flex-wrap:nowrap;gap:8px;padding-bottom:4px;min-width:0}
  #armory #ar-tabs{flex:1 1 0;min-width:0;width:auto;padding:2px;overflow-x:auto;scrollbar-width:thin}
  #armory .ar-hd-r{flex:0 0 auto;flex-wrap:nowrap;gap:5px;margin-left:0}
  #armory .ar-tab{padding:5px 10px;min-height:34px;font-size:11px}
  #armory .ar-hd-r .btn{padding:5px 10px;min-height:34px}
  #armory .ar-gold{padding:4px 7px;font-size:10px}
  #armory #skin-samples{grid-template-columns:minmax(0,1fr) auto;gap:6px;margin:4px 0 2px;padding:3px 8px 3px 12px;min-height:36px;border-radius:10px}
  #armory #skin-sample-label .ss-title{gap:5px}
  #armory #skin-sample-label .ss-title b{font-size:12px}
  #armory #skin-sample-label .ss-meta,#armory #skin-sample-label .ss-tags{display:none}
  #armory #skin-samples .ss-btns{flex-wrap:nowrap;padding:2px;gap:1px;border-radius:8px}
  #armory #skin-samples .ss-btn{flex:0 0 auto;min-width:30px;min-height:30px;padding:3px 6px;gap:4px;font-size:10px}
  #armory #skin-samples .ss-btn svg{width:12px;height:12px}
  #armory #skin-samples .ss-btn[data-sample="stop"] span{display:none}
  #armory #skin-tier-guide{position:relative;margin-top:2px;z-index:10}
  #armory #skin-tier-guide summary{min-height:30px;padding:4px 8px;font-size:10px}
  #armory #skin-tier-guide[open] .skin-tier-scroll{position:absolute;top:100%;left:0;right:0;z-index:1;max-height:min(45dvh,200px);background:#15101c;border:1px solid #5e3857;box-shadow:0 12px 24px #0009}
  #armory #ar-p-gun:not([hidden]){display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"tools view" "guns view" "skins view";gap:6px 10px;padding-top:6px}
  #armory #ar-p-gun .ar-body{display:contents}
  #armory #ar-p-gun .ar-tools{grid-area:tools;gap:4px;flex-wrap:wrap}
  #armory #ar-p-gun .ar-tools .btn{min-height:30px;padding:4px 7px;font-size:10px}
  #armory #ar-p-gun .ar-guns{grid-area:guns;min-width:0;padding:0 0 2px}
  #armory #ar-p-gun .ar-gun{padding:4px 8px;min-height:30px}
  #armory #ar-p-gun .ar-gun b{font-size:11px}
  #armory #ar-p-gun .ar-skins{grid-area:skins;min-width:0;overflow-y:auto;overscroll-behavior:contain}
  #armory #slot-gun{grid-area:view;min-width:0;min-height:0}
  #armory .ar-view{min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;justify-content:stretch;border-radius:12px}
  #armory .ar-view canvas{position:relative;inset:auto;min-width:0;min-height:0;width:100%;height:100%}
  #armory .ar-cap{position:static;min-width:0;max-height:54px;overflow-y:auto;padding:5px 8px;margin:0;font-size:11px;line-height:1.35;letter-spacing:0;overflow-wrap:anywhere;background:#0b0e14b3}
  #armory .ar-cap i{margin-left:5px;padding:1px 5px;font-size:8px}
  #armory .ar-cap em{font-size:9px;margin-top:2px}
  #armory .ar-cap .ar-wish{padding:3px 6px;min-height:30px;font-size:9px}
  #armory .ar-hint{display:none}
  #armory :is(#ar-p-mine,#ar-p-shop):not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);grid-template-areas:"filters side" "list side";gap:6px 10px;min-height:0;padding-top:6px}
  #armory :is(#ar-p-mine,#ar-p-shop) .mi{display:contents}
  #armory :is(#mi-f,#sh-f){grid-area:filters;min-width:0;flex-wrap:nowrap;overflow-x:auto;min-height:32px;gap:5px}
  #armory :is(#mi-f,#sh-f)>*{flex-shrink:0}
  #armory :is(#mi-list,#sh-list){grid-area:list;min-width:0}
  #armory .mi-side{grid-area:side;min-width:0;min-height:0;flex-direction:column;gap:6px}
  #armory .mi-side .ar-slot{min-width:0;min-height:0;height:auto;flex:1 1 auto}
  #armory .mi-side:has(.mi-info h4) .ar-cap{display:none}
  #armory .mi-info{flex:0 0 auto;max-height:76px;overflow-y:auto;padding:6px 8px;gap:4px}
  #armory .mi-info p,#armory .mi-info:not(:has(h4)){display:none}
  #armory .mi-info h4{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
  #armory .mi-info .row{flex-wrap:nowrap;overflow-x:auto;min-height:36px;flex-shrink:0}
  #armory .mi-info .row .btn{flex-shrink:0}
  #armory .mi-info .btn{padding:5px 8px;min-height:36px;font-size:10px}
  #armory #ar-p-champions{overflow:hidden}
  #armory .champions-layout{height:100%;min-height:0;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;align-items:stretch}
  #armory #slot-champions{position:relative;top:auto;height:100%;min-height:0;min-width:0}
  #armory #slot-champions .ar-cap em{display:none}
  #armory #champions-content{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding-right:4px}
}

/* On a landscape phone the skin tier guide took a full row (34 px of 390) in every armory tab. Where the browser
   can anchor it and the bar has room for it beside the tabs (660 px and wider; at 568 px the tabs need the
   space), it becomes a chip in the top bar beside the coins, and its table drops down under the bar's right
   end; other browsers and narrower phones keep the row. */
@supports (anchor-name:--a) and (position-anchor:--a) {
  @media (orientation:landscape) and (max-height:540px) and (min-width:660px) {
    #armory .ar-hd-r{padding-left:96px;anchor-name:--ar-hd-r}
    #armory #skin-tier-guide{position:absolute;position-anchor:--ar-hd-r;top:anchor(top);left:anchor(left);width:88px;margin:0;z-index:12}
    #armory #skin-tier-guide summary{display:flex;align-items:center;gap:4px;box-sizing:border-box;min-height:32px;height:32px;padding:0 8px;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    #armory #skin-tier-guide summary span{display:none}
    #armory #skin-tier-guide[open] .skin-tier-scroll{position:fixed;position-anchor:--ar-hd-r;top:anchor(bottom);right:anchor(right);left:auto;margin-top:6px;width:min(560px,calc(100vw - 24px))}
  }
}

/* the skin preview's rarity chip reads at 11 px on a phone too (it was 8 px); the Champions preview keeps its own */
@media (orientation:landscape) and (max-height:540px) {
  #armory .ar-slot:not(#slot-champions) .ar-cap i{font-size:var(--fs-xs,11px);padding:1px 6px}
}