/* Owner's fighter screen: CSS frames keep the painted pieces crisp. */
.armory.fighter-sheet {
  --cream: #fff2cc;
  --gold: #ffc529;
  --navy: #0a1d36;
  --ease: cubic-bezier(.2,.8,.2,1);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--hall) center top/cover #392719;
  color: var(--cream);
  font: 400 14px/1.1 'Lilita One',sans-serif;
  -webkit-text-stroke: 1px #30200f;
  paint-order: stroke;
  text-shadow: 0 2px 1px #0009;
  background-size: 100% auto;
  background-position: center -65px;
  background-repeat: no-repeat;
  background-color: #493019;
}

.armory * {
  box-sizing: border-box;
}

.armory h1,.armory h2,.armory h3,.armory p {
  margin: 0;
  font-weight: 400;
}

.armory b,.armory strong {
  font-weight: 400;
}

.armory img {
  object-fit: contain;
}

.armory button {
  font: inherit;
  color: inherit;
  -webkit-text-stroke: inherit;
  paint-order: stroke;
  text-shadow: inherit;
  cursor: pointer;
  touch-action: manipulation;
  min-width: 44px;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s,filter .2s;
}

.armory button:disabled {
  cursor: default;
}

.armory button:active:not(:disabled) {
  transform: translateY(2px);
}

.armory button:focus-visible {
  outline: 3px solid #fff6be;
  outline-offset: 3px;
}

#info-dialog.fighter-sheet-mode {
  width: min(100vw,480px);
  height: 100dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #14243b;
  overflow: hidden;
}

#info-dialog.fighter-sheet-mode> .dialog-close {
  display: none;
}

#info-dialog.fighter-sheet-mode #dialog-content {
  height: 100%;
  padding: 0;
  margin: 0;
}

.armory .screen-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 8px 10px;
  overflow: hidden;
  gap: 11px;
}

.armory .hero {
  position: relative;
  flex: 0 0 35%;
  margin: 0 -8px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.armory .round {
  position: absolute;
  top: 8px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 36px;
  z-index: 8;
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

.armory .round img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.armory .close {
  left: 12px;
  background: linear-gradient(#b61d21,#790008);
}

.armory .info {
  right: 12px;
}

.armory .identity {
  position: absolute;
  top: 6px;
  left: 60px;
  right: 60px;
  text-align: center;
  z-index: 5;
}

.armory .identity h1 {
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-text-stroke: 2px #62350e;
  text-shadow: 0 3px 1px #351d0d;
  font-size: 48px;
}

.armory .rarity {
  display: block;
  margin: 3px auto 4px;
  width: 110px;
  border: 2px solid var(--gold);
  border-radius: 30px;
  background: linear-gradient(#173f8e,#071c51);
  box-shadow: inset 0 1px 2px #fff8,0 2px 2px #0007;
  font-size: 16px;
  padding: 2px;
}

.armory .rarity .fc-rar {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
}

.armory .rays {
  position: absolute;
  inset: 30% 5% 5%;
  background: radial-gradient(#ffe3a465,transparent 65%);
}

.armory .torch-glow {
  position: absolute;
  top: 45%;
  left: 0;
  width: 25%;
  height: 45%;
  background: radial-gradient(#ffc04b55,transparent 67%);
  animation: armory-flicker 3.1s infinite;
}

.armory .torch-glow.right {
  left: auto;
  right: 0;
  animation-delay: -1.2s;
}

.armory .floor-light {
  display: none;
}

.armory .pedestal {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 5px 3px #21120799);
  width: 46%;
  left: 27%;
  height: auto;
  bottom: 4%;
  object-fit: contain;
}

.armory .figure {
  position: absolute;
  z-index: 4;
  animation: armory-breathe 3.6s ease-in-out infinite;
  pointer-events: none;
  width: 40%;
  left: 30%;
  height: 50%;
  bottom: 17%;
}

.armory .figure-swap,.armory .figure svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.armory .contact-shadow {
  position: absolute;
  z-index: 3;
  height: 5%;
  border-radius: 50%;
  background: #40231188;
  filter: blur(4px);
  animation: armory-shadow-breathe 3.6s ease-in-out infinite;
  bottom: 20%;
  width: 22%;
  left: 39%;
}

.armory .level-seal {
  position: absolute;
  z-index: 5;
  left: 6%;
  bottom: 11%;
  width: 17%;
  height: 24%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--lv-shield) center/100% 100% no-repeat;
  white-space: nowrap;
  background-size: contain;
  font-size: 24px;
  padding-bottom: 8px;
}

.armory .level-seal small {
  font-size: 11px;
}

.armory .power {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 32%;
  width: 36%;
  height: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 3px solid var(--gold);
  border-radius: 40px;
  background: linear-gradient(#073da9,#00125d);
  box-shadow: inset 0 1px 1px #fff9,inset 0 0 0 1px #b16a05,0 3px 4px #0009;
  font-size: 28px;
}

.armory .bolt {
  width: 23px;
  height: 90%;
  display: grid;
  place-items: center;
  font-size: 35px;
  color: #ffd51c;
  -webkit-text-stroke: 1px #9b5700;
}

.armory .stats,.armory .tabs,.armory #tab-panel {
  background: radial-gradient(ellipse at top,#203b5e55,transparent 80%),linear-gradient(115deg,#102744,#07172e);
  border: 3px solid var(--gold);
  box-shadow: inset 0 0 0 1px #fff0a4,inset 0 0 15px #4872b035,0 2px 0 #a05905,0 5px 6px #0006;
  border-radius: 18px;
}

.armory .stats {
  height: 62px;
  flex-shrink: 0;
  display: flex;
  padding: 7px 4px;
}

.armory .stats>div {
  display: grid;
  grid-template-columns: 36px auto;
  grid-template-rows: 26px 15px;
  column-gap: 3px;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

.armory .stats>div+div {
  border-left: 1px solid #7998c2;
}

.armory .stat-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}

.armory .stats .stat-icon {
  grid-row: 1/3;
  align-self: center;
}

.armory .stats b {
  font-size: 29px;
  line-height: 28px;
}

.armory .stats small {
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
}

.armory .tabs {
  flex: 0 0 49px;
  display: flex;
  margin-top: 3px;
  padding: 0;
  border-radius: 17px;
  z-index: 6;
}

.armory .tabs button {
  flex: 1;
  min-width: 0;
  position: relative;
  border: 0;
  background: none;
  border-radius: 14px;
  font-size: 26px;
  padding: 0;
}

.armory .tabs button+button {
  box-shadow: -1px 0 #4e6d94;
}

.armory .tabs button[aria-selected=true] {
  background: linear-gradient(#1457dc,#002caa 75%,#1851b1);
  border: 3px solid var(--gold);
  margin: -3px;
  box-shadow: inset 0 0 0 1px #ffeca1,inset 0 -3px 4px #ffc93d99,0 2px 3px #0009;
  z-index: 1;
}

.armory #tab-panel {
  flex: 1;
  min-height: 0;
  position: relative;
  border-width: 4px;
  border-radius: 26px;
}

.armory .panel-slot {
  position: absolute;
  inset: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d9a525 #12233b;
  padding: 9px 12px 10px;
}

.armory .level-panel,.armory .moves-panel,.armory .skins-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  min-height: 100%;
  height: 100%;
}

.armory .painted-panel {
  height: 100%;
  min-height: 0;
}

/* Panel contents share the available frame height. */
.armory .moves-content {
  height: auto;
  min-height: 100%;
}

.armory .ribbon {
  text-align: center;
  line-height: 1.08;
  flex-shrink: 0;
  -webkit-text-stroke: 1.5px #40240c;
  text-shadow: 0 3px 2px #000;
  font-size: 34px;
}

.armory .level-transition {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 24px;
}

.armory .level-arrow {
  color: #ffca10;
  width: 35px;
  height: 30px;
  font-size: 34px;
}

.armory .card-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #637fa077;
  border-radius: 8px;
  padding-top: 9px;
}

.armory .card-stack {
  width: 61px;
  height: 63px;
  flex: 0 0 61px;
}

.armory .progress-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.armory .card-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  font-size: 17px;
  white-space: nowrap;
}

.armory .card-count b {
  font-size: 22px;
}

.armory .cards-bar {
  height: 21px;
  border: 2px solid #6483a9;
  border-radius: 20px;
  background: #030f20;
  box-shadow: inset 0 2px 4px #000;
  padding: 2px;
  overflow: hidden;
  position: relative;
}

.armory .cards-bar>span {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  background: linear-gradient(#8aff04,#38cc00 65%,#1a9e00);
  box-shadow: inset 0 1px 2px #eaff75;
  transform: scaleX(var(--progress,1));
  transform-origin: left;
}

.armory .cards-needed {
  text-align: center;
  font-size: 14px;
}

.armory .gain {
  display: flex;
  gap: 8px;
  min-height: 54px;
}

.armory .reward-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  border: 2px solid #ffbe24;
  border-radius: 12px;
  background: linear-gradient(#142e50,#07192d);
  box-shadow: inset 0 1px 0 #fff4ad,0 3px 3px #0008;
}

.armory .reward-chip>span {
  display: flex;
  flex-direction: column;
}

.armory .reward-chip b {
  font-size: 22px;
}

.armory .reward-chip small {
  font-size: 13px;
}

.armory .mini {
  width: 30px;
  height: 34px;
}

.armory .upgrade-row {
  display: flex;
  gap: 14px;
  height: 54px;
}

.armory .gold {
  border: 3px solid #ffcf35;
  border-radius: 32px;
  background: linear-gradient(#ffed9b,#e9a82e);
  box-shadow: inset 0 1px 0 #fff9,0 4px 0 #7e4c17,0 6px 6px #0007;
  padding: 3px 10px;
}

.armory .upgrade {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.armory .upgrade strong {
  font-size: 14px;
}

.armory .upgrade>span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 32px;
}

.armory .currency {
  width: 34px;
  height: 34px;
}

.armory .upgrade:disabled {
  background: linear-gradient(#a69b88,#797367);
  border-color: #b1a898;
  box-shadow: inset 0 1px 1px #fff8,0 4px 0 #645e52,0 6px 6px #0007;
  color: #e6d8b4;
}

.armory .upgrade:disabled .currency {
  filter: grayscale(1);
}

.armory .ticket {
  flex: 0 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 2px solid #ffc529;
  border-radius: 15px;
  background: linear-gradient(#164080,#081d3b);
  box-shadow: inset 0 1px #fff3a2,0 3px 3px #0009;
  padding: 2px;
}

.armory .ticket>img {
  width: 43%;
  height: 38px;
}

.armory .ticket>span {
  display: flex;
  flex-direction: column;
}

.armory .ticket b {
  font-size: 28px;
}

.armory .ticket small {
  font-size: 12px;
}

.armory .ticket:disabled {
  filter: saturate(.6);
}

.armory .road {
  width: 100%;
  border: 0;
  background: none;
  flex-shrink: 0;
  padding: 6px 12px 0;
  min-height: 88px;
}

/* Equal columns put each line endpoint exactly under a milestone centre. */
.armory .road-nodes {
  position: relative;
  justify-content: space-between;
  isolation: isolate;
  min-height: 81px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
}

.armory .road-nodes:before {
  content: '';
  position: absolute;
  top: 20px;
  height: 6px;
  border: 1px solid #ffda43;
  background: #ffb900;
  box-shadow: inset 0 1px #fff6a0,0 2px 2px #0008;
  z-index: -1;
  left: calc(100% / 6);
  right: calc(100% / 6);
}

.armory .milestone {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  white-space: nowrap;
}

.armory .node {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  font-size: 28px;
  border: 3px solid #ffc329;
  border-radius: 50%;
  background: linear-gradient(#0845bd,#001e65);
  box-shadow: inset 0 0 0 1px #fff69a,0 3px 2px #0008;
  filter: brightness(.8);
}

.armory .node.done {
  filter: none;
}

.armory .node.current {
  filter: none;
  box-shadow: inset 0 0 0 1px #fff69a,0 0 13px #ffbf54;
}

.armory .road-icon,.armory .road .lock {
  height: 20px;
  width: 23px;
}

.armory .lock {
  width: 16px;
  height: 18px;
  vertical-align: middle;
}

.armory .moves {
  display: flex;
  align-items: center;
  gap: 9px;
}

.armory .move {
  flex: 1;
  min-width: 0;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  min-height: 44px;
}

.armory .move-art,.armory .move-art>img {
  display: block;
  width: 100%;
  height: auto;
}

.armory .move.selected {
  filter: drop-shadow(0 0 6px #ffe070);
}

.armory .move.locked .move-art {
  filter: brightness(.65) saturate(.8);
}

.armory .move.watching:not(.selected) {
  filter: drop-shadow(0 0 4px #83cdff);
}

.armory .check-badge {
  position: absolute;
  right: -1px;
  top: -5px;
  border-radius: 50%;
  font-size: 24px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  box-shadow: none;
  width: 30px;
  height: 30px;
}

.armory .check-badge img {
  width: 100%;
  height: 100%;
}

/* Widen the plate instead of shrinking its label on narrow phones. */
.armory .equipped-plate {
  position: absolute;
  border: 2px solid #ffc72e;
  border-radius: 15px;
  background: #061d48;
  bottom: 1px;
  line-height: 1;
  padding: 1px 2px;
  border-width: 1.5px;
  left: 12%;
  right: 12%;
  font-size: 11px;
  white-space: nowrap;
}

.armory .move-lock {
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid #ffca28;
  border-radius: 5px;
  background: #06162d;
  font-size: 12px;
  padding: 2px;
}

.armory .watched-title {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  text-align: center;
  font-size: 27px;
}

.armory .watched-title:before,.armory .watched-title:after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,transparent,#ffc900);
}

.armory .watched-title:after {
  transform: rotate(180deg);
}

.armory .scrying-window {
  position: relative;
  width: 100%;
  aspect-ratio: 2.85;
  border: 3px solid #ffc529;
  border-radius: 19px;
  overflow: hidden;
  background: #142d48;
  box-shadow: inset 0 0 0 1px #fff4a0,0 3px 4px #0009;
  flex-shrink: 0;
}

/* Arena sand colour behind the live preview, so the box never flashes empty before its first frame. */
.armory .viewport-action {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #e9c88f, #d6a96a 70%);
}

.armory .viewport-action .sheet-clip {
  display: block;
  background: transparent;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}

.armory .viewport-label {
  display: none;
}

.armory .move-description {
  text-align: center;
  font-size: 15px;
  line-height: 1.15;
  min-height: 20px;
}

.armory .skin-box {
  margin: auto 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  width: 100%;
}

.armory .skin-head,.armory .skin-note,.armory .skin-tile>b {
  display: none;
}

.armory .skin-tiles {
  display: flex;
  gap: 8px;
}

.armory .skin-tile {
  flex: 1;
  min-width: 0;
  height: 240px;
  position: relative;
  padding: 0;
  border: 3px solid #ffc22c;
  border-radius: 15px;
  background: radial-gradient(ellipse,#355271,#0c203a 75%);
  box-shadow: inset 0 0 0 1px #fff1a2,0 4px 3px #0009;
  overflow: visible;
  color: var(--cream);
}

.armory .skin-tile.is-on {
  box-shadow: inset 0 0 0 1px #fffacc,0 0 0 2px #ffe36e,0 0 14px #ffd142;
}

/* The skin card picture (skin-picker.js skinCard) fills the whole card; the labels sit on top of it. */
.armory .skin-tile .skin-art {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  filter: none;
}

.armory .skin-tile .skin-card {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.armory .skin-tile .skin-tier,.armory .skin-tile .skin-state,.armory .skin-tile .skin-off {
  z-index: 2;
}

.armory .skin-tile .skin-tier {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 400 19px/1 'Lilita One',sans-serif;
  color: var(--cream);
  letter-spacing: 0;
}

.armory .skin-tier img,.armory .skin-tier svg {
  width: 20px;
  height: 22px;
}

.armory .skin-tile .skin-state {
  position: absolute;
  bottom: 4px;
  left: 2px;
  right: 2px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: 400 20px/1 'Lilita One',sans-serif;
  color: var(--cream);
  background: linear-gradient(#155ce0,#002481);
  border: 2px solid #ffd029;
  border-radius: 12px;
  box-shadow: inset 0 1px 1px #c0eaff88,0 3px 2px #0008;
  font-size: 18px;
}

.armory .skin-tile.is-on .skin-state {
  background: linear-gradient(#73d400,#178c00 65%,#136600);
}

.armory .skin-tile .skin-state.is-buy {
  background: linear-gradient(#aa28d1,#51008a);
  font-size: 28px;
}

.armory .skin-tile .skin-state.is-locked {
  background: linear-gradient(#47627d,#1a304a);
  font-size: 18px;
}

.armory .skin-state svg {
  width: 24px;
  height: 26px;
}

.armory .worn-check {
  color: #abff00;
  width: 18px;
  font-size: 25px;
  flex-shrink: 0;
}

.armory .skin-state s {
  font-size: 12px;
}

.armory .skin-tile .skin-off {
  position: absolute;
  top: 36px;
  right: -3px;
  left: auto;
  background: #a92370;
  border: 1px solid #ffd262;
  border-radius: 5px;
  font: 400 12px/1 'Lilita One',sans-serif;
  padding: 4px;
  z-index: 3;
  color: #fff2cc;
}

.armory .cosmetic {
  text-align: center;
  font-size: 16px;
}

.armory .skins-panel>.cosmetic {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 2px solid #6788b5;
  border-radius: 30px;
  background: linear-gradient(#2c4568,#122844);
  box-shadow: inset 0 1px 1px #a4c5f2,0 3px 3px #0009;
  padding: 9px 12px;
  margin: 10px 5px 24px;
  flex-shrink: 0;
}

.armory .mask {
  width: 30px;
  height: 24px;
  font-size: 25px;
}

.armory .skins-panel>.cosmetic>span:last-child {
  border-left: 1px solid #779ac5;
  padding-left: 12px;
}

.armory .unowned-copy {
  margin: auto;
  text-align: center;
  font: 600 14px/1.5 'DM Sans',sans-serif;
  -webkit-text-stroke: 0;
}

.armory .unowned-copy p {
  margin-bottom: 18px;
}

.armory .overlay-host {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.armory .scrim {
  position: absolute;
  inset: 0;
  background: #1b110bb8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
  animation: armory-fade-in .2s;
}

.armory .sheet {
  position: relative;
  width: 100%;
  max-height: 100%;
  border: 4px solid #ffc529;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: radial-gradient(at top,#304a6c,#091a30);
  box-shadow: inset 0 0 0 1px #fff1b3,0 8px 30px #0009;
}

.armory .sheet>.ribbon {
  margin: 0 28px 12px;
  font-size: 26px;
}

.armory .dismiss {
  right: -8px;
  top: -16px;
  background: none;
}

.armory .sheet-content {
  text-align: center;
  overflow: auto;
  scrollbar-width: thin;
}

.armory .sheet p {
  font: 600 14px/1.5 'DM Sans',sans-serif;
  -webkit-text-stroke: 0;
  margin: 8px 0;
}

.armory .full-road {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.armory .road-stop {
  display: flex;
  align-items: center;
  text-align: left;
  gap: 8px;
  min-height: 32px;
}

.armory .road-stop>b {
  border: 2px solid #ffc529;
  border-radius: 50%;
  background: #113578;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 20px;
}

.armory .road-stop>span {
  font-size: 13px;
}

.armory .stage-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(#fff5b5cc,transparent 65%);
  opacity: 0;
  z-index: 6;
  pointer-events: none;
}

.armory .level-up-text {
  position: absolute;
  z-index: 10;
  top: 45%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #ffe393;
  animation: armory-level .6s ease-out both;
  pointer-events: none;
}

.armory .level-up-flash .stage-flash {
  animation: armory-flash .6s ease-out both;
}

.reduce-motion .armory *,.reduce-motion .armory :before,.reduce-motion .armory :after {
  animation: none!important;
  transition: none!important;
  scroll-behavior: auto!important;
}

.armory .skin-state img {
  width: 25px;
  height: 27px;
  object-fit: contain;
}

.armory .skin-state .lock {
  width: 17px;
  height: 20px;
}

.armory .level-panel {
  height: auto;
  min-height: 100%;
  gap: 8px;
}

.armory .level-panel>* {
  flex-shrink: 0;
}

.armory .road .milestone>span:last-child {
  line-height: 16px;
}

.armory .move-mark {
  object-fit: contain;
}

.armory .reward-chip .move-mark {
  padding: 3px;
  border: 2px solid #ffca2d;
  border-radius: 6px;
  background: #073c9b;
  box-shadow: inset 0 0 0 1px #fff4ae;
}

.armory .moves-panel {
  height: auto;
  min-height: 100%;
  gap: 7px;
}

.armory .moves-panel>* {
  flex-shrink: 0;
}

@keyframes armory-breathe {50%{transform:translateY(-4px)}}
@keyframes armory-shadow-breathe {50%{transform:scale(.86);opacity:.7}}
@keyframes armory-flicker {0%,100%{opacity:.6}30%{opacity:.85}75%{opacity:.95}}
@keyframes armory-level {0%{opacity:0;transform:scale(.5)}30%{opacity:1;transform:scale(1.12)}80%{opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes armory-flash {30%{opacity:1}100%{opacity:0}}
@keyframes armory-fade-in {from{opacity:0}to{opacity:1}}


/* Size against the usable sheet, after iOS safe areas, rather than phone models. */
.armory.fighter-sheet {
  container-type: size;
  padding-top: var(--sheet-safe-top,env(safe-area-inset-top,0px));
  padding-bottom: var(--sheet-safe-bottom,env(safe-area-inset-bottom,0px));
  box-sizing: border-box;
  background-position: center top;
}
.armory .screen-body {padding:0 8px 6px;gap:clamp(3px,1cqh,8px);}
.armory .hero {flex:0 0 clamp(150px,calc(100cqh - 430px),300px);}
.armory .identity h1 {font-size:clamp(29px,5.7cqh,46px);}
.armory .identity {top:4px;}
.armory .rarity {font-size:clamp(11px,1.9cqh,15px);padding:1px;margin:1px auto 2px;}
.armory .round {width:44px;height:44px;top:4px;}
.armory .pedestal {width:clamp(105px,calc(100cqh - 442px),185px);left:50%;transform:translateX(-50%);height:auto;bottom:13%;}
.armory .figure {width:40%;height:clamp(45px,calc(100cqh - 500px),144px);left:30%;bottom:12%;animation:none;}
/* A grounded idle squash keeps the body in contact with the stage. */
.armory .figure-swap {animation:armory-grounded 3.6s ease-in-out infinite;transform-origin:50% 100%;}
@keyframes armory-grounded {50% {transform:scale(1.015,.985);filter:brightness(1.035);}}
.armory .contact-shadow {animation:none;bottom:23%;height:3%;}
.armory .level-seal {width:19%;height:clamp(60px,10cqh,82px);bottom:11%;padding:0 0 9px;gap:0;line-height:1;}
.armory .level-text {display:block;line-height:1;}
.armory .level-seal small {font-size:11px;line-height:1;}
.armory .power {height:clamp(25px,4cqh,34px);font-size:clamp(20px,3.4cqh,28px);}
.armory .stats {height:clamp(44px,7cqh,60px);padding:3px;}
.armory .stats>div {grid-template-columns:27px auto;grid-template-rows:24px 12px;align-content:center;}
.armory .stats .stat-icon {width:27px;height:29px;}
.armory .stats b {font-size:clamp(23px,3.8cqh,29px);line-height:24px;}
.armory .stats small {font-size:11px;}
.armory .tabs {flex:0 0 50px;margin-top:0;}
.armory .tabs button {font-size:clamp(22px,3.7cqh,26px);}
.armory #tab-panel {overflow:hidden;container-type:size;}
.armory .panel-slot {overflow:hidden;padding:4px 9px 5px;}
.armory .level-panel,.armory .moves-panel,.armory .skins-panel {
  height:100%;min-height:0;gap:clamp(1px,.6cqh,6px);justify-content:space-between;
}
.armory .painted-panel,.armory .moves-content {height:100%;min-height:0;}
.armory .ribbon {font-size:clamp(23px,7.6cqh,34px);line-height:1.05;}
.armory .level-transition {font-size:clamp(18px,5.5cqh,24px);line-height:1;gap:8px;}
.armory .level-arrow {width:36px;height:23px;}
.armory .card-progress {gap:8px;padding-top:4px;}
.armory .card-stack {width:40px;flex-basis:40px;height:43px;}
.armory .progress-copy {gap:3px;}
.armory .card-count {font-size:clamp(11px,3.8cqh,16px);}
.armory .card-count b {font-size:clamp(15px,4.5cqh,21px);}
.armory .cards-bar {height:clamp(13px,4.5cqh,20px);padding:1px;}
.armory .cards-needed {font-size:clamp(11px,3.5cqh,14px);line-height:1.05;}
.armory .gain {min-height:38px;gap:6px;}
.armory .reward-chip {padding:3px 2px;gap:3px;border-radius:10px;}
.armory .reward-chip b {font-size:clamp(16px,5cqh,22px);}
.armory .reward-chip small {font-size:11px;}
.armory .reward-chip .stat-icon,.armory .mini {width:23px;height:27px;}
.armory .upgrade-row {height:clamp(44px,13cqh,55px);gap:9px;margin-bottom:5px;}
.armory .upgrade>span {font-size:clamp(23px,7cqh,31px);}
.armory .upgrade strong {font-size:11px;line-height:1;}
.armory .currency {width:27px;height:27px;}
.armory .ticket {flex-basis:32%;border-width:2px;box-shadow:inset 0 2px 1px #fff8b7,inset 0 -3px 0 #061331,0 4px 0 #9b5b12,0 6px 5px #0009;}
.armory .ticket>img {width:31%;height:29px;}
.armory .ticket b {font-size:clamp(18px,6cqh,26px);line-height:.95;}
.armory .ticket small {font-size:11px;line-height:1;}
.armory .ticket:active:not(:disabled) {transform:translateY(3px);box-shadow:inset 0 1px #fff8b7,inset 0 -2px #061331,0 1px 0 #9b5b12;}
.armory .ticket:disabled {filter:grayscale(.9);opacity:.6;box-shadow:inset 0 1px #fff6,0 2px 0 #353f50;}
.armory .road {min-height:58px;padding:0 8px;}
.armory .road-nodes {min-height:58px;}
.armory .node {width:30px;height:30px;font-size:22px;border-width:2px;}
.armory .road-nodes:before {top:13px;height:5px;}
.armory .milestone {gap:1px;font-size:11px;}
.armory .road-icon,.armory .road .lock {height:13px;width:17px;}
.armory .road .milestone>span:last-child {line-height:12px;}
/* Badge, lock and EQUIPPED sit on the tile itself (corner inside the frame, plate across its bottom edge), so nothing pokes into the title above, the next tile or the name below. */
.armory .moves {gap:7px;flex:0 1 auto;min-height:44px;--move-height:clamp(68px,28cqh,125px);--plate-height:18px;margin-bottom:clamp(2px,1.2cqh,6px);}
.armory .move {height:var(--move-height);padding-bottom:calc(var(--plate-height) / 2);}
.armory .move-art {display:grid;place-items:center;}
/* Square art: as tall as the tile allows, but never wider than a third of the row (tall, narrow screens). */
.armory .move-art>img {height:min(calc(var(--move-height) - var(--plate-height) / 2),calc((100cqw - 32px) / 3));width:auto;max-width:100%;object-fit:contain;}
.armory .equipped-plate {bottom:0;height:var(--plate-height);display:grid;place-items:center;left:50%;right:auto;transform:translateX(-50%);width:min(80%,calc(var(--move-height) - var(--plate-height) / 2 - 8px));box-sizing:border-box;}
.armory .check-badge {top:3px;right:max(3px,calc(50% - (var(--move-height) - var(--plate-height) / 2) / 2 + 3px));width:26px;height:26px;}
.armory .move-lock {top:3px;right:max(3px,calc(50% - (var(--move-height) - var(--plate-height) / 2) / 2 + 3px));font-size:11px;padding:1px 3px;line-height:1.1;}
.armory .watched-title {font-size:clamp(20px,6.5cqh,27px);gap:8px;}
.armory .scrying-window {flex:0 0 auto;min-height:0;max-height:none;aspect-ratio:2.6;}
.armory .move-description {font-size:clamp(11px,3.7cqh,15px);line-height:1.15;min-height:0;}
.armory .skin-box {margin:0;flex:1;min-height:0;display:flex;flex-direction:column;}
/* Cards keep the design's tall-card shape (about 3:5) on tall screens instead of stretching, and shrink on short ones. */
.armory .skin-tiles {height:100%;min-height:0;flex:1;align-items:center;}
.armory .skin-tile {height:auto;aspect-ratio:3/5.4;max-height:100%;min-height:44px;}
/* Heading, cards and the note sit together in the middle; spare height on tall screens goes around them, not inside the cards. */
.armory .skins-panel {justify-content:center;gap:clamp(4px,2.4cqh,14px);}
.armory .skins-panel .skin-box {flex:0 1 auto;}
.armory .skin-tier img {width:16px;height:19px;}
.armory .skin-tile .skin-tier {font-size:clamp(13px,4.3cqh,19px);gap:1px;top:0;padding:7px 0 12px;border-radius:12px 12px 0 0;background:linear-gradient(#06123aee,#06123a00);text-shadow:0 2px 2px #000a;}
.armory .skin-tile .skin-state {font-size:clamp(11px,3.8cqh,18px);height:36px;gap:1px;}
.armory .skin-tile .skin-state.is-buy {font-size:clamp(20px,6cqh,28px);}
.armory .skin-tile .skin-state.is-locked {font-size:clamp(13px,4.5cqh,18px);}
.armory .skin-state img {width:19px;height:21px;}
.armory .skin-tile .skin-off {top:30px;font-size:11px;padding:2px;}
.armory .skins-panel>.cosmetic {font-size:clamp(11px,4cqh,16px);margin:3px 0 2px;padding:5px;gap:7px;}
.armory .mask {height:20px;width:25px;}
.armory .skins-panel>.cosmetic>span:last-child {padding-left:7px;}
/* Max level (Crowned Seal, Eddy's pick 2026-11-05): sizes follow the panel height (cqh) so 360x640 and tall phones both fill without scrolling. */
.armory .level-panel.is-mastered {justify-content:space-between;}
.armory .mastery-top {flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:10px;padding:0 4px;}
.armory .mastery-seal {position:relative;flex:0 0 42%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.armory .mastery-crown {height:30%;width:auto;margin-bottom:-6%;position:relative;z-index:1;filter:drop-shadow(0 3px 2px #0009);}
.armory .mastery-shield {position:relative;height:62%;aspect-ratio:.86;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--lv-shield) center/contain no-repeat;filter:drop-shadow(0 0 10px #ffc23f);}
.armory .mastery-shield:after {content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,#fff7cc99 50%,transparent 58%) 100% 0/300% 100% no-repeat;-webkit-mask:var(--lv-shield) center/contain no-repeat;mask:var(--lv-shield) center/contain no-repeat;animation:mastery-glint 3.5s ease-in-out infinite;}
.armory .mastery-shield b {font-size:clamp(26px,11cqh,46px);line-height:.9;}
.armory .mastery-shield small {font-size:clamp(10px,3.4cqh,14px);color:#ffe36b;}
.armory .mastery-spark {position:absolute;width:7px;height:7px;background:#fff6c0;border-radius:50%;box-shadow:0 0 8px 3px #ffd34d;animation:mastery-twinkle 2.4s calc(var(--i) * -.5s) infinite ease-in-out;}
.armory .mastery-list {list-style:none;margin:0;padding:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(2px,1.6cqh,9px);}
.armory .mastery-list li {display:flex;align-items:center;gap:7px;font-size:clamp(13px,4.6cqh,19px);padding-bottom:clamp(1px,1cqh,5px);border-bottom:1px solid #6483a955;}
.armory .mastery-check {width:clamp(14px,5cqh,20px);height:auto;flex:none;}
.armory .mastery-list .mastery-power {border:0;}
.armory .mastery-bolt {height:clamp(22px,8cqh,34px);width:auto;}
.armory .mastery-power b {font-size:clamp(20px,7cqh,30px);color:#ffe36b;}
.armory .mastery-power small {font-size:11px;line-height:1;color:#ffefc0;}
.armory .mastery-moves {display:flex;gap:6px;}
.armory .mastery-move {flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:3px 2px;border:2px solid #ffbe24;border-radius:12px;background:linear-gradient(#142e50,#07192d);box-shadow:inset 0 1px #fff4ad,0 3px 3px #0008;color:inherit;font:inherit;}
.armory .mastery-move:active {transform:translateY(2px);}
.armory .mastery-move img {height:clamp(24px,13cqh,70px);width:100%;object-fit:contain;}
.armory .mastery-move small {font-size:clamp(9px,2.9cqh,11px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.armory .mastery-coins {display:flex;align-items:center;justify-content:center;gap:6px;padding:3px 12px;margin:0 0 3px;border:3px solid #ffcf35;border-radius:30px;background:linear-gradient(#ffed9b,#e9a82e);box-shadow:inset 0 1px #fff9,0 3px 0 #7e4c17;color:#5a2c00;font-size:clamp(12px,4cqh,16px);-webkit-text-stroke:0;text-shadow:0 1px #fff6;}
.armory .mastery-cards {height:clamp(20px,7cqh,30px);width:auto;}
.armory .mastery-arrow {width:22px;height:auto;filter:brightness(.6);}
@keyframes mastery-glint {0%,50% {background-position:100% 0;} 100% {background-position:0 0;}}
@keyframes mastery-twinkle {0%,100% {opacity:0;transform:scale(.3);} 50% {opacity:1;transform:scale(1);}}