/* Asset-backed meta controls. HTML owns text, focus and input; SVG owns the plate art. */
.meta-app .ui-plate-button {
  --ui-plate: var(--ui-asset-url, url('./assets/ui/orange-primary.svg?v=m879'));
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 0 26px 8px;
  border: 0 !important;
  border-radius: 18px;
  background: none !important;
  box-shadow: none !important;
  color: #fffbe7;
  cursor: pointer;
  filter: none;
  font-family: inherit;
  font-size: 24px;
  font-weight: 1000;
  letter-spacing: -.025em;
  line-height: 1;
  opacity: 1;
  overflow: visible;
  text-shadow:
    -1px 0 #6f3409,
    1px 0 #6f3409,
    0 -1px #6f3409,
    0 3px #6f3409;
  touch-action: manipulation;
  transform: none !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.meta-app .ui-plate-button::before {
  position: absolute;
  z-index: 0;
  content: '';
  inset: 0;
  border-radius: inherit;
  background: center / 100% 100% no-repeat var(--ui-plate);
  pointer-events: none;
  transform: translateY(0) scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 90ms ease-out;
}

.meta-app .ui-plate-button > * {
  position: relative;
  z-index: 1;
  transition: transform 90ms ease-out;
}

.meta-app .ui-plate-button--primary {
  --ui-plate: var(--ui-asset-url, url('./assets/ui/orange-primary.svg?v=m879'));
}

.meta-app .ui-plate-button--secondary {
  --ui-plate: var(--ui-asset-url, url('./assets/ui/blue-secondary.svg?v=m879'));
  text-shadow:
    -1px 0 #063b72,
    1px 0 #063b72,
    0 -1px #063b72,
    0 3px #063b72;
}

.meta-app .ui-plate-button--positive {
  --ui-plate: var(--ui-asset-url, url('./assets/ui/green-positive.svg?v=m879'));
  text-shadow:
    -1px 0 #285b0b,
    1px 0 #285b0b,
    0 -1px #285b0b,
    0 3px #285b0b;
}

.meta-app .battle-cta.ui-plate-button {
  position: absolute;
  z-index: 40;
  bottom: 18px;
  left: 7%;
  width: 86%;
  min-height: 68px;
}

.meta-app .gacha-button.ui-plate-button {
  position: relative;
  bottom: auto;
  left: auto;
  justify-content: space-between;
  width: 100%;
  min-height: 68px;
  margin: 0 0 4px;
  padding-right: 21px;
  padding-left: 25px;
}

.meta-app .gacha-button.ui-plate-button .gacha-cost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 90px;
  min-height: 38px;
  padding: 0 10px 3px;
  border: 0;
  border-radius: 11px;
  background: center / 100% 100% no-repeat url('./assets/ui/cream-cost-inset.svg?v=m879');
  box-shadow: none;
  color: #432500;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 1000;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

.meta-app .gacha-button.ui-plate-button .gacha-cost svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: #fff1c5;
  stroke: #174f87;
  stroke-width: 1.8;
}

.meta-app .ui-plate-button:active:not(:disabled)::before {
  transform: translateY(3px) scaleY(.94);
}

.meta-app .ui-plate-button:active:not(:disabled) > * {
  transform: translateY(3px);
}

.meta-app .ui-plate-button:focus-visible,
.meta-app .ui-close-button:focus-visible,
.meta-app .meta-nav button:focus-visible,
.meta-app .collection-card:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 3px;
}

.meta-app .gacha-button.ui-plate-button:disabled {
  --ui-plate: url('./assets/ui/gray-disabled.svg?v=m879');
  color: #fffef1;
  cursor: not-allowed;
  filter: none;
  opacity: 1;
  text-shadow:
    -1px 0 #3f4a4f,
    1px 0 #3f4a4f,
    0 -1px #3f4a4f,
    0 3px #3f4a4f;
}

.meta-app .gacha-button.ui-plate-button:disabled .gacha-cost {
  background-image: url('./assets/ui/gray-cost-inset.svg?v=m879');
  color: #202b30;
}

.meta-app .sheet-content .ui-plate-button--compact {
  width: min(100%, 240px);
  min-height: 58px;
  margin: 12px auto 0;
  padding: 0 22px 7px;
  font-size: 20px;
}

/* Bottom navigation uses a calm blue well and an independent selected plate. */
.meta-app .meta-nav button {
  --nav-lift: 0px;
  --nav-plate: var(--ui-asset-url, url('./assets/ui/nav-well.svg?v=m879'));
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 58px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #b9dcff;
  cursor: pointer;
  text-shadow: 0 2px #03204a;
  touch-action: manipulation;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

.meta-app .meta-nav button::before {
  position: absolute;
  z-index: 0;
  content: '';
  inset: 1px 2px 0;
  border-radius: 13px;
  background: center / 100% 100% no-repeat var(--nav-plate);
  pointer-events: none;
  transform: translateY(var(--nav-lift)) scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 90ms ease-out;
}

.meta-app .meta-nav button i,
.meta-app .meta-nav button span {
  position: relative;
  z-index: 1;
  transform: translateY(var(--nav-lift));
  transition: transform 90ms ease-out;
}

.meta-app .meta-nav button i {
  width: 32px;
  height: 31px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #bfe5ff;
}

.meta-app .meta-nav button span {
  margin-top: -1px;
}

.meta-app .meta-nav button[aria-current='page'] {
  --nav-lift: -4px;
  --nav-plate: var(--ui-asset-url, url('./assets/ui/nav-well-selected.svg?v=m879'));
  color: #fff;
  transform: none !important;
}

.meta-app .meta-nav button[aria-current='page'] i {
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}

.meta-app .meta-nav button:active::before {
  transform: translateY(calc(var(--nav-lift) + 2px)) scaleY(.95);
}

.meta-app .meta-nav button:active i,
.meta-app .meta-nav button:active span {
  transform: translateY(calc(var(--nav-lift) + 2px));
}

/* Collection cards keep their rarity frame; only their physical press response is unified. */
.meta-app .collection-card.ui-card-button {
  transform: none;
  transition: box-shadow 80ms ease-out;
  touch-action: pan-y;
}

.meta-app .collection-card.ui-card-button > * {
  transition: transform 80ms ease-out;
}

.meta-app .collection-card.ui-card-button:active {
  box-shadow: inset 0 1px #b9c4cf, 0 2px #03142f;
}

.meta-app .collection-card.ui-card-button:active > * {
  transform: translateY(2px);
}

.meta-app .collection-card.ui-card-button[data-equipped='true'] {
  box-shadow: inset 0 0 0 1px rgb(235 252 255 / 72%), 0 4px #03142f;
}

.meta-app .collection-card.ui-card-button[data-equipped='true']:active {
  box-shadow: inset 0 0 0 1px rgb(235 252 255 / 72%), 0 2px #03142f;
}

/* Circular close keeps its real button and accessible label above the red plate asset. */
.meta-app .sheet-close.ui-close-button {
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 0 0 5px;
  border: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 30px;
  font-weight: 1000;
  line-height: 1;
  text-shadow: 0 2px #72131c;
  touch-action: manipulation;
  transform: none;
}

.meta-app .sheet-close.ui-close-button::before {
  position: absolute;
  z-index: 0;
  content: '';
  inset: 0;
  border-radius: 50%;
  background: center / 100% 100% no-repeat var(--ui-asset-url, url('./assets/ui/red-close.svg?v=m879'));
  pointer-events: none;
  transform: translateY(0) scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 80ms ease-out;
}

.meta-app .sheet-close.ui-close-button > span {
  position: relative;
  z-index: 1;
  transition: transform 80ms ease-out;
}

.meta-app .sheet-close.ui-close-button:active::before {
  transform: translateY(2px) scaleY(.94);
}

.meta-app .sheet-close.ui-close-button:active > span {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .meta-app .ui-plate-button::before,
  .meta-app .ui-plate-button > *,
  .meta-app .meta-nav button::before,
  .meta-app .meta-nav button i,
  .meta-app .meta-nav button span,
  .meta-app .collection-card.ui-card-button,
  .meta-app .collection-card.ui-card-button > *,
  .meta-app .sheet-close.ui-close-button::before,
  .meta-app .sheet-close.ui-close-button > span {
    transition: none;
  }
}