/* Official v0.3.2 increment merged with this server visual rules; GPL-3.0-or-later. */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --tap-min: 44px;
}

html, body {
  overscroll-behavior: none;
}

html {
  touch-action: pan-x pan-y;
}

body {

}

button, a, label, summary, [role="button"], [role="tab"], [role="option"], .scard, .lvcard, .dband, .bond, .pavatar {
  touch-action: manipulation;
}

img {
  -webkit-user-drag: none;
}

.gm__field, .gm__field canvas, .ff, .fwheel, .fwheel__dia {
  touch-action: none;
}

.ff-piece, .ff-slot, .ff-tile {
  touch-action: none;
  user-select: none;
}

input, textarea, select {
  user-select: text;
}

.gm__hud {
  top: var(--sa-t);
  right: var(--sa-r);
  bottom: var(--sa-b);
  left: var(--sa-l);
}

.gm__hud > .uframe {
  margin-left: calc(-1 * var(--sa-l));
  margin-top: calc(-1 * var(--sa-t));
}

.gm__hud > .shopbar {
  bottom: calc(.2rem - var(--sa-b));
}

.gm > .spov {
  left: calc(2.8rem + var(--sa-l));
  right: var(--sa-r);
}

.screen:not(.gm) {
  top: var(--sa-t);
  right: var(--sa-r);
  bottom: var(--sa-b);
  left: var(--sa-l);
}

.guide, .awayov {
  padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l);
}

html:not(.sp-in-match) .toast-host {
  margin-top: var(--sa-t);
}

.conn-banner {
  margin-bottom: var(--sa-b);
}

.rotate-hint {
  padding: calc(24px + var(--sa-t)) calc(24px + var(--sa-r)) calc(24px + var(--sa-b)) calc(24px + var(--sa-l));
}

:where(.sp-coarse) :where(.tapx, .gtop__exit, .gtop__iconbtn, .enemybtn, .readybtn, .gm__gear, .fsbtn, .ewheel__btn, .ewheel__nav, .toolbtn, .funds__collapse, .team__btn, .effect, .bslot .bond, .vswitch__arrow, .edrawer__close, .dpanel__close, .bpop__close, .modal__close, .uf__btn, .chud__back, .tabs__tab, .btn, .pill-btn, .stephead__guide, .set-toggle, .set-seg button) {
  position: relative;
}

.sp-coarse :is(.tapx, .gtop__exit, .gtop__iconbtn, .enemybtn, .readybtn, .gm__gear, .fsbtn, .ewheel__btn, .ewheel__nav, .toolbtn, .funds__collapse, .team__btn, .effect, .bslot .bond, .vswitch__arrow, .edrawer__close, .dpanel__close, .bpop__close, .modal__close, .uf__btn, .chud__back, .tabs__tab, .btn, .pill-btn, .stephead__guide, .set-toggle, .set-seg button)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: max(100%, var(--tap-min));
  height: max(100%, var(--tap-min));
  transform: translate(-50%, -50%);
  background: transparent;
  border: 0px;
  box-shadow: none;
  clip-path: none;
  pointer-events: auto;
}

.sp-coarse .ewheel__panel .ewheel__nav::before {
  top: 0.03rem;
  bottom: -0.15rem;
  height: auto;
  transform: none;
}

.sp-coarse .ewheel__panel .ewheel__nav.is-prev::before {
  left: auto;
  right: 0px;
}

.sp-coarse .ewheel__panel .ewheel__nav.is-next::before {
  left: 0px;
  right: auto;
}

.sp-coarse .ewheel__dot::before {
  inset: -0.02rem -0.05rem -0.2rem;
  width: auto;
  height: auto;
  transform: none;
}

@media (max-height: 600px) and (pointer: coarse), (max-height: 600px) and (any-pointer: coarse) {
  .readybtn {
    height: max(.56rem, calc(34px * var(--ui)));
  }

  .toolbtn {
    min-height: max(.5rem, calc(30px * var(--ui)));
  }

  .gm__gear {
    width: max(.56rem, calc(34px * var(--ui)));
    height: max(.56rem, calc(34px * var(--ui)));
  }

  .gm__corner .gm__gear .icon {
    width: max(.28rem, calc(17px * var(--ui)));
    height: max(.28rem, calc(17px * var(--ui)));
  }

  .gtop__exit {
    min-width: max(.56rem, calc(34px * var(--ui)));
    min-height: max(.56rem, calc(34px * var(--ui)));
  }

  .gtop__iconbtn.has-sprite, .enemybtn.has-sprite {
    height: max(.46rem, calc(26px * var(--ui)));
    width: calc(max(.46rem, calc(26px * var(--ui))) * 35 / 29);
  }

  .gtop__iconbtn.has-sprite.is-wide, .enemybtn.has-sprite.is-wide {
    width: calc(max(.46rem, calc(26px * var(--ui))) * 61 / 29);
  }

  .gtop__iconbtn:not(.has-sprite), .enemybtn:not(.has-sprite) {
    height: max(.46rem, calc(26px * var(--ui)));
    min-width: max(.46rem, calc(26px * var(--ui)));
  }

  .ewheel__panel {
    scale: 1.3;
    transform-origin: 0px 100%;
  }

  .fwheel__cancel {
    min-height: 30px;
  }

  .set-toggle, .set-seg button {
    height: max(.38rem, calc(30px * var(--ui)));
  }

  .set-range {
    height: 30px;
    border-width: 11px 0px;
    border-style: solid;
    border-color: transparent;
    border-image: none;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px var(--line-2);
  }

  .field--lg .field__box {
    height: max(.68rem, calc(40px * var(--ui)));
  }
}

.fsbtn {
  display: grid;
  place-items: center;
  padding: 0px;
  background: rgba(8, 11, 10, 0.85);
  border: 1px solid var(--line-2);
  color: var(--text-lo);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.fsbtn .icon {
  width: 0.26rem;
  height: 0.26rem;
}

.fsbtn:hover, .fsbtn[aria-pressed="true"] {
  color: var(--mint-400);
  border-color: var(--mint-700);
}

.sp-standalone .rotate-hint__micro::after {
  content: " · PWA";
}

@media (prefers-reduced-motion: reduce) {
  .team__status.is-gold, .ff-tile--gate, .boot__hex {
    animation: auto ease 0s 1 normal none running none !important;
  }
}

.sp-reduced-motion .team__status.is-gold, .sp-reduced-motion .ff-tile--gate {
  animation: auto ease 0s 1 normal none running none;
}

@media (max-width: 767px) {
  .gm__corner {
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: max(calc(72px * var(--ui)), calc(3 * .56rem + .2rem));
  }

  .dpanel:not(.dpanel--right) {
    bottom: calc(.44rem + max(1.51rem, calc(72px * var(--ui))) * 55 / 151 + .56rem);
  }
}

@media (max-width: 767px) and (pointer: coarse), (max-width: 767px) and (any-pointer: coarse) {
  .gm__corner {
    width: max(calc(96px * var(--ui)), calc(3 * max(.56rem, calc(34px * var(--ui))) + .2rem));
  }

  .dpanel:not(.dpanel--right) {
    bottom: calc(.44rem + max(1.51rem, calc(96px * var(--ui))) * 55 / 151 + max(.56rem, calc(34px * var(--ui))));
  }

  .gm.has-sp > .spov {
    left: calc(max(2.8rem, .24rem + max(32px, calc(96px * var(--sp-ui, 1)), calc(3 * max(.56rem, 32px, calc(34px * var(--sp-ui, 1))) + .2rem)) + 2px) + var(--sa-l));
  }
}

@media (max-width: 767px) {
  .gm.is-collapsed .gm__corner {
    flex-wrap: nowrap;
    width: auto;
  }
}

@media (max-height: 460px) {
  .dhead__art {
    height: 1.66rem;
  }

  .dhead__en {
    display: none;
  }
}

.rotate-hint__pwa {
  pointer-events: auto;
  margin-top: 6px;
}

.rotate-hint__pwa[hidden] {
  display: none;
}

@media (max-height: 600px) and (pointer: coarse), (max-width: 767px) {
  .gm:not(.is-collapsed) .gm__corner {
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: calc(148px * var(--ui));
  }

  .gm .dpanel:not(.dpanel--right) {
    bottom: calc(.44rem + max(1.51rem, calc(96px * var(--ui))) * 55 / 151 + max(.56rem, calc(34px * var(--ui))));
  }

  .gm .shopbar {
    max-width: calc(100% - calc(164px * var(--ui)) - .26rem);
  }

  .gm .ticker {
    top: calc(1rem - calc(4px * var(--ui)));
    height: calc(20px * var(--ui));
  }

  .gm .ticker__line {
    font-size: calc(11px * var(--ui));
    padding: 0 calc(12px * var(--ui));
  }

  .gm .shopbar__row {
    max-width: 100%;
    min-width: 0px;
    gap: calc(4px * var(--ui));
    padding: calc(4px * var(--ui));
    align-items: flex-end;
  }

  .gm .shopbar__cards, .gm .shopbar__rwcards {
    min-width: 0px;
    gap: calc(4px * var(--ui));
    overflow-x: auto;
    padding: calc(10px * var(--ui)) calc(4px * var(--ui)) calc(4px * var(--ui));
    touch-action: pan-x;
    overscroll-behavior: contain;
  }

  .gm .shopbar__cards {
    flex: 0 1 auto;
  }

  .gm .shopbar__reward {
    min-width: 0px;
    flex: 0 1 auto;
    gap: calc(4px * var(--ui));
    padding: 0px;
  }

  .gm .shopbar__reward::before {
    inset: 0px;
  }

  .gm .rwtag {
    flex: 0 0 auto;
    width: calc(44px * var(--ui));
  }

  .gm .rwtag__later {
    min-height: calc(44px * var(--ui));
    font-size: calc(12px * var(--ui));
  }

  .gm .shopbar .scard {
    flex: 0 0 auto;
    width: max(1.56rem, calc(80px * var(--ui)));
    height: max(2.24rem, calc(112px * var(--ui)));
  }

  .gm .shopbar .scard-wrap, .gm .shopbar__item {
    flex: 0 0 auto;
  }

  .gm .shopbar__item {
    gap: calc(4px * var(--ui));
    padding-left: calc(4px * var(--ui));
  }

  .gm .lvcard {
    flex: 0 0 auto;
    width: max(1.24rem, calc(52px * var(--ui)));
    height: max(2.24rem, calc(112px * var(--ui)));
  }

  .gm .lvcard__num {
    font-size: max(calc(.66 * var(--t)), calc(32px * var(--ui)));
  }

  .gm .funds {
    flex: 0 0 auto;
    width: max(1.18rem, calc(56px * var(--ui)));
    align-self: stretch;
  }

  .gm .funds__num {
    font-size: max(calc(.36 * var(--t)), calc(24px * var(--ui)));
  }

  .gm .funds__hex {
    width: max(1rem, calc(44px * var(--ui)));
    height: max(.9rem, calc(40px * var(--ui)));
  }

  .gm .shopbar .hex {
    --hex-h: max(.32rem, calc(20px * var(--ui)));
  }

  .gm .shopbar .tier {
    --tier-h: max(.28rem, calc(16px * var(--ui)));
  }

  .gm .scard__skill {
    width: max(.3rem, calc(18px * var(--ui)));
    height: max(.3rem, calc(18px * var(--ui)));
  }

  .gm .scard__confirm b {
    font-size: max(.18rem, calc(12px * var(--ui)));
    letter-spacing: 0.04em;
  }

  .gm .scard__confirm small {
    font-size: max(.11rem, calc(10px * var(--ui)));
  }

  .gm .scard__name {
    font-size: max(.19rem, calc(13px * var(--ui)));
  }

  .gm .lvcard__label, .gm .toolbtn, .gm .readybtn__label {
    font-size: max(.19rem, calc(12px * var(--ui)));
  }

  .gm .scard__class, .gm .scard__bond, .gm .scard__idesc, .gm .lvcard__micro, .gm .funds__label, .gm .shopbar__remain {
    font-size: max(.13rem, calc(10px * var(--ui)));
  }

  .gm .funds__collapse, .gm .shopbar-tab__btn {
    min-height: calc(44px * var(--ui));
    font-size: calc(12px * var(--ui));
  }

  .gm .chud__prog, .gm .chud__pname {
    font-size: calc(12px * var(--ui));
  }

  .gm .chud__progress {
    max-height: calc(96px * var(--ui));
    overflow-y: auto;
    pointer-events: auto;
    touch-action: pan-y;
  }

  .gm .chud__prog .num {
    font-size: calc(12px * var(--ui));
  }

  .set-row__label {
    font-size: max(calc(.17 * var(--t)), calc(13px * var(--ui)));
  }

  .set-row .set-toggle, .set-row .set-seg button {
    min-height: calc(44px * var(--ui));
    font-size: calc(12px * var(--ui));
  }

  .set-row {
    gap: calc(10px * var(--ui));
  }

  .set-hint {
    font-size: max(calc(.14 * var(--t)), calc(12px * var(--ui)));
  }
}

html[data-fit] :is(.app-root, .st, .sw, .proto, .lo, .guide, .ach) {
  left: var(--fit-l, 0px);
  right: var(--fit-r, 0px);
  top: var(--fit-t, 0px);
  bottom: var(--fit-b, 0px);
}

.set-fit {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.set-fit__body {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
}

.set-fit__toggle {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  min-width: 0px;
  padding: 0px;
  border: 0px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.set-fit__badge {
  flex: 0 0 auto;
  padding: 0.01rem 0.08rem;
  border: 1px solid var(--gold-2);
  color: var(--gold-2);
  font-size: calc(.13 * var(--t));
  white-space: nowrap;
}

.set-fit__chev {
  flex: 0 0 auto;
  width: 0.12rem;
  height: 0.12rem;
  min-width: 8px;
  min-height: 8px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform var(--t-fast);
}

.set-fit.is-open .set-fit__chev {
  transform: rotate(-135deg);
}

.set-fit__row {
  grid-template-columns: minmax(0px, 1.5rem) auto minmax(0.8rem, 1fr) auto minmax(0.36rem, auto);
  gap: 0.1rem;
}

.set-fit__step {
  flex: 0 0 auto;
  width: 0.4rem;
  min-width: 28px;
  height: 0.34rem;
  min-height: 26px;
  padding: 0px;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-hi);
  font-size: calc(.2 * var(--t));
  line-height: 1;
  cursor: pointer;
}

.set-fit__step:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 767px) {
  .gm.is-collapsed.has-sp .gm__corner {
    flex-wrap: wrap-reverse;
    width: max(32px, calc(72px * var(--sp-ui, 1)), calc(3 * .56rem + .2rem));
  }
}

@media (max-width: 767px) and (pointer: coarse), (max-width: 767px) and (any-pointer: coarse) {
  .gm.is-collapsed.has-sp .gm__corner {
    width: max(32px, calc(96px * var(--sp-ui, 1)), calc(3 * max(.56rem, 32px, calc(34px * var(--sp-ui, 1))) + .2rem));
  }
}

.set-fit__row.is-disabled {
  opacity: 0.5;
}