/* =====================================================================================================================
   Equipment window (js/ui/pages/hangar.js, id 'hangar', layout 'stage'). Page agent P-HANGAR.
   Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page (hg- prefix).
   Regions (windows.js): left = slot list, stage = transparent (live robot), detail = item card + candidates + actions
   (portrait: a bottom sheet), foot = DPS / hull / DR / weight.
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- left: slots */
.gscroll.hg-left {
  flex: 1 1 auto;
  min-height: 0;
  padding: calc(2 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(2 * var(--u));
}
.hg-left .ghead {
  margin-bottom: calc(8 * var(--u));
}
.hg-left .ghead + .hg-slots + .ghead,
.hg-slots.is-w + .ghead {
  margin-top: calc(14 * var(--u));
}
.hg-slots {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
}
.gcard.hg-slot {
  display: grid;
  grid-template-columns: calc(58 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--u));
  width: 100%;
  min-height: calc(70 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
}
.hg-cellbox {
  display: block;
  width: calc(58 * var(--u));
}
.hg-cellbox .gcell {
  width: 100%;
}
.hg-st {
  display: flex;
  flex-direction: column;
  gap: calc(1 * var(--u));
  min-width: 0;
}
.hg-slotname {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.hg-sl {
  font: 600 var(--fs-label) / 1.3 var(--f-head);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.hg-fixtag {
  display: inline-flex;
  align-items: center;
  gap: calc(3 * var(--u));
  flex: none;
  padding: 0 calc(5 * var(--u));
  font: 600 var(--fs-label) / 1.35 var(--f-head);
  color: var(--accent);
  background: var(--accent-a08);
  box-shadow: inset 0 0 0 1px var(--accent-dim);
}
.hg-fixtag .gglyph {
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
}
.hg-iname {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 600 var(--fs-body) / 1.3 var(--f-head);
  color: var(--text);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.hg-sub {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  font-size: var(--fs-label);
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.hg-sub .g-num {
  margin-left: auto;
  color: var(--faint);
}
.hg-rar.r-tuned {
  color: var(--r-tuned);
}
.hg-rar.r-special {
  color: var(--r-special);
}
.hg-invite {
  color: var(--accent);
  font-weight: 500;
}
.hg-slot.is-vacant {
  --fill: linear-gradient(90deg, var(--accent-a08), transparent 55%), var(--panel-a72);
  --bd: var(--line);
}
.hg-slot.is-vacant .hg-iname {
  color: var(--dim);
}
.hg-slot.is-fixed {
  --fill: linear-gradient(90deg, transparent calc(100% - 3px), var(--accent-dim) 0), linear-gradient(180deg, var(--text-a04), transparent 70%), var(--panel2-a90);
}
.hg-slot.is-selected,
.hg-slot[aria-pressed="true"] {
  --bd: var(--accent);
  --fill: linear-gradient(90deg, var(--accent-a16), transparent 70%), var(--panel2-a90);
}
.hg-slot .hg-count {
  top: 50%;
  right: calc(10 * var(--u));
  margin-top: calc(-9 * var(--u));
  background: var(--accent);
  color: var(--accent-ink);
}
.hg-slot.is-vacant .hg-st {
  padding-right: calc(18 * var(--u));
}
.hg-set {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin: calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--dim);
  background: var(--text-a04);
  box-shadow: inset 2px 0 0 var(--line-strong);
}
.hg-set .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-top: calc(1 * var(--u));
  color: var(--faint);
}
.hg-set.is-on {
  color: var(--text);
  background: var(--good-a14);
  box-shadow: inset 2px 0 0 var(--good);
}
.hg-set.is-on .gglyph {
  color: var(--good);
}

/* ------------------------------------------------------------------------------------------------ stage (centre) */
.hg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.hg-stage.can-rotate {
  cursor: grab;
}
.hg-cam {
  position: absolute;
  top: calc(14 * var(--u));
  left: calc(24 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
.hg-cam i {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  background: var(--danger);
  box-shadow: 0 0 8px var(--danger);
}
.hg-cam .g-eyebrow {
  color: var(--text);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.hg-plate {
  position: absolute;
  left: calc(24 * var(--u));
  bottom: calc(16 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  background: linear-gradient(90deg, rgba(4, 7, 8, 0.72), rgba(4, 7, 8, 0.2));
  box-shadow: inset 2px 0 0 var(--accent);
}
.hg-plate b {
  font: 600 var(--fs-body) / 1.25 var(--f-head);
  color: var(--text);
}
.hg-hint {
  position: absolute;
  bottom: calc(16 * var(--u));
  right: calc(24 * var(--u));
}

/* -------------------------------------------------------------------------------------------- detail (right card) */
.gscroll.hg-dscroll {
  flex: 1 1 auto;
  min-height: 0;
  padding-right: calc(6 * var(--u));
}
.hg-band {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
  margin-bottom: calc(10 * var(--u));
}
.hg-band .g-eyebrow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-headcard {
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--u));
}
.hg-hero {
  --rc: var(--line-strong);
  --rc-a: var(--r-std-a);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: calc(176 * var(--u));
  padding: calc(14 * var(--u));
  flex: none;
}
.hg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  --c: var(--cut-md);
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background:
    linear-gradient(0deg, var(--rc) 0 2px, transparent 2px),
    radial-gradient(60% 70% at 50% 45%, var(--rc-a), transparent 75%),
    repeating-linear-gradient(90deg, var(--text-a04) 0 1px, transparent 1px calc(24 * var(--u))),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hg-hero.r-tuned {
  --rc: var(--r-tuned);
  --rc-a: var(--r-tuned-a);
}
.hg-hero.r-special {
  --rc: var(--r-special);
  --rc-a: var(--r-special-a);
}
.hg-art {
  position: absolute;
  inset: calc(16 * var(--u)) calc(18 * var(--u)) calc(22 * var(--u));
  display: block;
  filter: drop-shadow(0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.6));
}
.hg-art > img,
.hg-art > svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.hg-hero .gpips {
  position: absolute;
  left: calc(12 * var(--u));
  bottom: calc(12 * var(--u));
}
.hg-hero.is-empty {
  color: var(--faint);
}
.hg-hero.is-empty::before {
  background: radial-gradient(70% 70% at 50% 50%, var(--text-a04), transparent), var(--panel-a72);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hg-hero.is-empty::after {
  content: "";
  position: absolute;
  inset: calc(10 * var(--u));
  outline: 1px dashed var(--line);
}
.hg-hero.is-empty .gglyph {
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
}
.hg-flag {
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(12 * var(--u));
  font: 700 var(--fs-label) / 1.2 var(--f-head);
  white-space: nowrap;
}
.hg-flag.is-eq {
  color: var(--accent);
}
.hg-flag.is-cmp {
  color: var(--info);
}
.hg-flag.is-new {
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  color: var(--accent-ink);
  background: var(--info);
  box-shadow: 0 0 calc(10 * var(--u)) var(--info-a22);
}
.hg-titles {
  min-width: 0;
}
.hg-name {
  margin: 0;
  font: 600 var(--fs-title) / 1.2 var(--f-head);
  overflow-wrap: anywhere;
}
.hg-role {
  margin-top: calc(2 * var(--u));
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.4;
}
.hg-desc {
  margin: calc(8 * var(--u)) 0 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
}
.hg-cap {
  margin: calc(14 * var(--u)) 0 calc(2 * var(--u));
}
.hg-cap .g-eyebrow {
  color: var(--info);
}
.hg-stats .gstat:last-child {
  border-bottom: 0;
}
.hg-stats .gstat.hl .gs-val {
  color: var(--accent);
}
.hg-opts {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin-top: calc(10 * var(--u));
}
.hg-notes {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  margin-top: calc(12 * var(--u));
}
.hg-note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--dim);
}
.hg-note .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--accent-dim);
}
.hg-note.is-info .gglyph {
  color: var(--info);
}
.hg-note.is-fixed {
  color: var(--text);
}
.hg-note.is-fixed .gglyph {
  color: var(--accent);
}
.hg-note.is-new {
  color: var(--info);
  font-weight: 600;
}
.hg-note.is-new .gglyph {
  color: var(--info);
}

/* candidates strip */
.hg-fits {
  flex: none;
  padding-top: calc(10 * var(--u));
  border-top: 1px solid var(--line);
  margin-top: calc(8 * var(--u));
  min-width: 0;
}
.hg-fitcap {
  margin-bottom: calc(2 * var(--u));
}
.hg-cands-x {
  min-width: 0;
}
.hg-cands {
  display: flex;
  gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(5 * var(--u)) calc(7 * var(--u));
  width: max-content;
}
.hg-cands .gcell {
  width: calc(64 * var(--u));
  flex: none;
}
.hg-cands .gcell.hg-nofit::before {
  filter: saturate(0.4) brightness(0.8);
}
.hg-cands .gcell.hg-nofit .gc-art {
  opacity: 0.55;
}
.hg-cands .gcell.hg-nofit .gpips::after {
  content: "";
}
.hg-cands .gcell.hg-nofit > .gc-art::after {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: 34%;
  height: 12%;
  background: repeating-linear-gradient(135deg, var(--danger) 0 4px, transparent 0 8px);
}
/* empty slot: what fits here */
.hg-rules {
  display: flex;
  flex-direction: column;
  gap: calc(7 * var(--u));
  margin-top: calc(16 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--text-a04);
  box-shadow: inset 2px 0 0 var(--info-dim);
}
.hg-rules .g-eyebrow {
  color: var(--info);
}
.hg-rules .hg-note .gglyph {
  color: var(--info);
}
.hg-none {
  margin: calc(6 * var(--u)) 0 calc(2 * var(--u));
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.45;
}

/* actions */
.hg-actions {
  flex: none;
  padding-top: calc(10 * var(--u));
}
.hg-btns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: calc(8 * var(--u));
}
.hg-btns.even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hg-btns.one {
  grid-template-columns: minmax(0, 1fr);
}
.hg-btns .gbtn {
  width: 100%;
  min-height: max(var(--tap), calc(46 * var(--u)));
}
.hg-btns .gbtn .gk-label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hg-actions {
  container-type: inline-size;
}
/* a narrow action row (small phones, UI scale 1.3) drops the button glyphs before it cuts a label */
@container (max-width: 240px) {
  .hg-btns .gbtn .gk-g {
    display: none;
  }
}
.hg-warn {
  display: flex;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  margin: 0 0 calc(8 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--bad);
}
.hg-warn .gglyph {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--danger);
}
/* tutorial step 3: the one button to press (a looping highlight ring is allowed for the tutorial, DESIGN §2.3) */
.gbtn.hg-guide::after {
  opacity: 1;
  --bc: var(--info);
  animation: hgGuide 1.2s var(--ease) infinite;
}
@keyframes hgGuide {
  0% {
    inset: calc(-3 * var(--u));
    opacity: 1;
  }
  70% {
    inset: calc(-10 * var(--u));
    opacity: 0;
  }
  100% {
    inset: calc(-10 * var(--u));
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gbtn.hg-guide::after {
    animation: none;
    inset: calc(-5 * var(--u));
  }
}

/* -------------------------------------------------------------------------------------------------------- foot */
.hg-foot {
  display: grid;
  grid-template-columns: repeat(3, auto) minmax(calc(220 * var(--u)), 1fr) auto;
  align-items: center;
  gap: calc(8 * var(--u)) calc(30 * var(--u));
}
.hg-metric {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.hg-mv {
  display: flex;
  align-items: baseline;
  gap: calc(4 * var(--u));
  white-space: nowrap;
}
.hg-mv b {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.05;
}
.hg-mv small {
  font-size: var(--fs-body);
  color: var(--dim);
}
.hg-mv .gs-delta {
  min-width: 0;
  margin-left: calc(4 * var(--u));
  font-size: var(--fs-sm);
}
.hg-metric.is-dps b {
  color: var(--accent);
}
.hg-weight {
  display: flex;
  flex-direction: column;
  gap: calc(5 * var(--u));
  min-width: 0;
}
.hg-wrow {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-width: 0;
}
.hg-wv {
  font-size: var(--fs-body);
  color: var(--dim);
  white-space: nowrap;
}
.hg-wv b {
  font-size: var(--fs-lg);
  color: var(--text);
}
.hg-wv i {
  font-style: normal;
  font-weight: 700;
  margin-left: calc(3 * var(--u));
}
.hg-wv i.up {
  color: var(--accent);
}
.hg-wv i.down {
  color: var(--good);
}
.hg-wv i.bad {
  color: var(--bad);
}
.hg-wnote {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-wnote.is-bad {
  color: var(--bad);
}
.hg-weight.is-over .gbar {
  box-shadow: inset 0 0 0 1px var(--danger);
}
.hg-sysbtn {
  position: relative;
}
.hg-sysbtn .gk-badge {
  background: var(--accent);
  color: var(--accent-ink);
}

/* key numbers beside the title: phone landscape only (the full list is right below on bigger screens) */
.hg-keystats {
  display: none;
  gap: calc(14 * var(--u));
  margin-top: calc(4 * var(--u));
}
.hg-ks {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  column-gap: calc(5 * var(--u));
  min-width: 0;
}
.hg-ks small {
  grid-column: 1 / -1;
}
.hg-ks small {
  font-size: var(--fs-label);
  line-height: 1.25;
  color: var(--dim);
  white-space: nowrap;
}
.hg-ks b {
  font-size: var(--fs-body);
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.hg-ks b em {
  font-style: normal;
  font-size: var(--fs-label);
  color: var(--dim);
  margin-left: calc(2 * var(--u));
}
.hg-ks i {
  font: 700 var(--fs-label) / 1.2 var(--f-num);
  font-style: normal;
  white-space: nowrap;
}
.hg-ks i.good {
  color: var(--good);
}
.hg-ks i.bad {
  color: var(--bad);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-keystats {
  display: flex;
}

/* -------------------------------------------------------------------------------------------------- compact tier */
html[data-tier="compact"] .hg-hero {
  height: calc(132 * var(--u));
}
html[data-tier="compact"] .hg-name {
  font-size: var(--fs-xl);
}
html[data-tier="compact"] .hg-slot {
  min-height: calc(62 * var(--u));
  grid-template-columns: calc(50 * var(--u)) minmax(0, 1fr);
}
html[data-tier="compact"] .hg-cellbox {
  width: calc(50 * var(--u));
}
html[data-tier="compact"] .hg-mv b {
  font-size: var(--fs-title);
}
html[data-tier="compact"] .hg-cands .gcell {
  width: calc(58 * var(--u));
}

/* ------------------------------------------------------------------------------------- phone landscape (844x390) */
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot {
  grid-template-columns: calc(44 * var(--u)) minmax(0, 1fr);
  gap: calc(8 * var(--u));
  min-height: calc(52 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-cellbox {
  width: calc(44 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-sub {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-vacant .hg-sub {
  display: flex;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-vacant .hg-iname {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-iname {
  font-size: var(--fs-sm);
  line-height: 1.25;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-fixed .hg-sl {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-band {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-role {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: 1.25;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-headcard {
  grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr);
  align-items: start;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-hero {
  height: calc(76 * var(--u));
}
html[data-tier="phone"] .hg-left .ghead .g-eyebrow {
  display: none;
}
html[data-tier="phone"] .hg-slots.is-w + .ghead {
  margin-top: calc(8 * var(--u));
}
html[data-tier="phone"] .hg-set {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .hg-cam {
  top: calc(8 * var(--u));
  left: calc(16 * var(--u));
}
html[data-tier="phone"] .hg-plate {
  left: calc(16 * var(--u));
  bottom: calc(10 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
}
html[data-tier="phone"] .hg-plate b {
  font-size: var(--fs-sm);
}
html[data-tier="phone"] .hg-headcard {
  display: grid;
  grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] .hg-hero {
  height: calc(84 * var(--u));
  padding: calc(8 * var(--u));
}
html[data-tier="phone"] .hg-art {
  inset: calc(8 * var(--u)) calc(8 * var(--u)) calc(12 * var(--u));
}
html[data-tier="phone"] .hg-rules {
  margin-top: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  gap: calc(4 * var(--u));
}
html[data-tier="phone"] .hg-hero .gpips {
  left: calc(7 * var(--u));
  bottom: calc(7 * var(--u));
}
html[data-tier="phone"] .hg-flag {
  top: auto;
  bottom: calc(-2 * var(--u));
  right: auto;
  left: 50%;
  transform: translate(-50%, 50%);
  font-size: var(--fs-xs);
  padding: 0 calc(5 * var(--u));
  background: var(--panel);
}
html[data-tier="phone"] .hg-flag.is-new {
  background: var(--info);
}
html[data-tier="phone"] .hg-desc {
  margin-top: calc(12 * var(--u));
  font-size: var(--fs-label);
}
html[data-tier="phone"] .hg-name {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .hg-role {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .hg-band {
  margin-bottom: calc(6 * var(--u));
}
html[data-tier="phone"] .hg-cap {
  margin-top: calc(8 * var(--u));
}
html[data-tier="phone"] .hg-stats .gstat {
  min-height: calc(28 * var(--u));
  padding: calc(3 * var(--u)) 0;
}
html[data-tier="phone"] .hg-fits {
  padding-top: calc(6 * var(--u));
  margin-top: calc(4 * var(--u));
}
html[data-tier="phone"] .hg-cands {
  gap: calc(6 * var(--u));
  padding-top: calc(4 * var(--u));
  padding-bottom: calc(5 * var(--u));
}
html[data-tier="phone"] .hg-cands .gcell {
  width: calc(52 * var(--u));
}
html[data-tier="phone"] .hg-actions {
  padding-top: calc(6 * var(--u));
}
html[data-tier="phone"] .hg-warn {
  margin-bottom: calc(4 * var(--u));
  font-size: var(--fs-label);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-foot {
  grid-template-columns: repeat(3, auto) minmax(0, 1fr) auto;
  gap: calc(4 * var(--u)) calc(16 * var(--u));
}
html[data-tier="phone"] .hg-mv b {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] .hg-mv small {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .hg-mv .gs-delta {
  font-size: var(--fs-label);
}
html[data-tier="phone"] .hg-wnote {
  display: none;
}
html[data-tier="phone"] .hg-weight .gbar.lg {
  --h: calc(14 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .gwin-body[data-layout="stage"] > [data-region="foot"] > .gwin-rin {
  padding-top: calc(6 * var(--u));
  padding-bottom: calc(6 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-sysbtn .gk-label {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-sysbtn {
  padding: 0 calc(10 * var(--u));
}

/* ------------------------------------------------------------------------------------------ portrait (390x844) */
html[data-orient="portrait"] .hg-left {
  padding: 0;
}
html[data-orient="portrait"] .hg-left .ghead {
  display: none;
}
html[data-orient="portrait"] .hg-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(6 * var(--u));
  padding: calc(4 * var(--u));
}
html[data-orient="portrait"] .hg-slots.is-a {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(4 * var(--u));
}
html[data-orient="portrait"] .hg-slot {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(4 * var(--u));
  min-height: 0;
  padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));
}
html[data-orient="portrait"] .hg-slots.is-a .hg-slot {
  grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr);
  justify-items: start;
  padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
}
html[data-orient="portrait"] .hg-cellbox {
  width: min(calc(60 * var(--u)), 100%);
}
html[data-orient="portrait"] .hg-slots.is-a .hg-cellbox {
  width: calc(48 * var(--u));
}
html[data-orient="portrait"] .hg-st {
  align-items: center;
  width: 100%;
  text-align: center;
}
html[data-orient="portrait"] .hg-slots.is-a .hg-st {
  align-items: flex-start;
  text-align: left;
}
html[data-orient="portrait"] .hg-iname,
html[data-orient="portrait"] .hg-sub,
html[data-orient="portrait"] .hg-fixtag {
  display: none;
}
html[data-orient="portrait"] .hg-sl {
  max-width: 100%;
}
html[data-orient="portrait"] .hg-slot.is-fixed .hg-sl::before {
  content: "";
  display: inline-block;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-right: calc(4 * var(--u));
  vertical-align: middle;
  background: var(--accent);
  transform: rotate(45deg);
}
html[data-orient="portrait"] .hg-slot .hg-count {
  top: calc(-6 * var(--u));
  right: calc(-6 * var(--u));
  margin-top: 0;
}
html[data-orient="portrait"] .hg-slot.is-vacant .hg-st {
  padding-right: 0;
}
html[data-orient="portrait"] .hg-set {
  margin: calc(6 * var(--u)) calc(4 * var(--u)) 0;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  font-size: var(--fs-label);
}
html[data-orient="portrait"] .hg-foot {
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: calc(6 * var(--u)) calc(10 * var(--u));
}
html[data-orient="portrait"] .hg-weight {
  grid-column: 1 / -1;
  grid-row: 2;
}
html[data-orient="portrait"] .hg-sysbtn .gk-label {
  display: none;
}
html[data-orient="portrait"] .hg-sysbtn {
  padding: 0 calc(10 * var(--u));
}
html[data-orient="portrait"] .hg-mv b {
  font-size: var(--fs-xl);
}
html[data-orient="portrait"] .hg-wnote {
  display: block;
}
html[data-orient="portrait"] .hg-headcard {
  display: grid;
  grid-template-columns: calc(110 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--u));
}
html[data-orient="portrait"] .hg-hero {
  height: calc(110 * var(--u));
}
html[data-orient="portrait"] .hg-plate {
  bottom: calc(8 * var(--u));
}
html[data-orient="portrait"] .gwin-body[data-layout="stage"] > [data-region="detail"] > .gwin-rin {
  max-height: calc(100% - 0px);
}

/* 2026-10-09 review, phone landscape: weapons as a 2 x 2 grid and armour as one row of three, so the armour slots are
   never below the fold; item names live in the detail panel and the long-press tip. The description keeps one whole
   line (full text on long-press) instead of a line cut in half by the scroll edge. */
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(5 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slots.is-a {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: calc(2 * var(--u));
  min-height: 0;
  padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(2 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-cellbox {
  width: calc(36 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-st {
  align-items: center;
  width: 100%;
  padding-right: 0;
  text-align: center;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-iname,
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-sub,
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-vacant .hg-sub,
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-fixtag {
  display: none;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slotname {
  justify-content: center;
  max-width: 100%;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-sl,
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-fixed .hg-sl {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-label);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot.is-fixed .hg-sl::before {
  content: "";
  display: inline-block;
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  margin-right: calc(4 * var(--u));
  vertical-align: middle;
  background: var(--accent);
  transform: rotate(45deg);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slot .hg-count {
  top: calc(-5 * var(--u));
  right: calc(-5 * var(--u));
  margin-top: 0;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-left .ghead {
  margin-bottom: calc(2 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-slots.is-w + .ghead {
  margin-top: calc(4 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .hg-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
/* short slot labels (EN) on the narrow grids; long ones end in an ellipsis instead of running into the next cell */
.hg-sls {
  display: none;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .hg-slot:has(.hg-sls) .hg-sl:not(.hg-sls) {
  display: none;
}
html:is([data-tier="phone"], [data-orient="portrait"]) .hg-slot .hg-sls {
  display: block;
}
html[data-orient="portrait"] .hg-sl {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}