/* Official v0.3.2 increment merged with this server visual rules; GPL-3.0-or-later. */
.draft__main {
  position: relative;
  z-index: 1;
  flex: 1 1 0%;
  min-height: 0px;
  display: grid;
  grid-template-columns: 7.3rem 0.8rem minmax(0px, 1fr) 0px;
  grid-template-rows: minmax(0px, 1fr);
  padding: 0.04rem 0.5rem 0.3rem 0.46rem;
  transition: grid-template-columns 280ms var(--tr-ease, ease-out);
}

.draft--detail .draft__main {
  grid-template-columns: 4.7rem 0.2rem minmax(0px, 1fr) 4.6rem;
}

.draft--detail .draft-order__rows {
  padding: 0.08rem 0.12rem 0.1rem 0.28rem;
}

.draft--detail .dorder {
  grid-template-columns: minmax(0px, 1fr) 1.1rem 0.42rem;
  gap: 0.06rem;
}

.draft--detail .dorder__box {
  width: 1.1rem;
  height: 1.1rem;
}

.draft--detail .dorder__card {
  padding: 0px 0.1rem 0px 0.14rem;
  gap: 0.1rem;
}

.draft-order {
  grid-column: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0px;
  min-height: 0px;
  padding: 0.3rem 0px 0.24rem 0.3rem;
  background: linear-gradient(rgba(48, 118, 100, 0.26), rgba(20, 46, 40, 0.16) 70%, rgba(14, 24, 22, 0.06));
  clip-path: polygon(0px 0px, calc(100% - 0.5rem) 0px, 100% 0.5rem, 100% 100%, 0px 100%);
  animation: tr-left 460ms var(--tr-ease) 100ms backwards;
}

.draft-order__deco {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.05rem;
  height: 0.34rem;
  overflow: hidden;
}

.draft-order__deco i {
  width: 0.5rem;
  height: 0.18rem;
  background: rgba(63, 230, 180, 0.4);
}

.draft-order__deco i + i {
  width: 0.18rem;
}

.draft-order__deco span {
  margin-left: 0.08rem;
  font-family: var(--font-num);
  font-size: calc(.1 * var(--t));
  line-height: 1.15;
  letter-spacing: 0.08em;
  color: rgba(120, 240, 205, 0.55);
  white-space: nowrap;
}

.draft-order__rows {
  flex: 1 1 0%;
  min-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 0.08rem 0.5rem 0.1rem 0.3rem;
  scrollbar-width: none;
}

.draft-order__tip {
  flex: 0 0 auto;
  margin: 0px;
  padding-right: 0.5rem;
  font-size: calc(.14 * var(--t));
  line-height: 1.55;
  color: var(--text-dim);
}

.draft--detail .draft-order__tip, .draft--detail .draft-order__deco span {
  display: none;
}

.dorder {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0px, 1fr) 1.2rem 0.5rem;
  align-items: center;
  gap: 0.1rem;
  height: 1.26rem;
  animation-delay: calc(180ms + var(--i, 0) * 70ms);
}

.dorder__card {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.16rem;
  min-width: 0px;
  padding: 0px 0.16rem 0px 0.2rem;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(29, 34, 35), rgb(38, 43, 44));
  box-shadow: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
}

.dorder__art {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 2rem;
  max-width: 72%;
  background-size: cover;
  background-position: 50% 12%;
  opacity: 0.7;
  pointer-events: none;
  mask: linear-gradient(90deg, transparent, rgb(0, 0, 0) 40%);
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.dorder__face {
  position: relative;
  flex: 0 0 auto;
}

.dorder .pavatar {
  --pa: .9rem;
  box-shadow: rgb(230, 233, 233) 0px 0px 0px 0.03rem;
  border: 0px;
}

.dorder__me {
  position: absolute;
  left: -0.14rem;
  top: -0.14rem;
  width: 0.32rem;
  height: 0.32rem;
  display: grid;
  place-items: center;
  background: var(--mint-500);
  color: rgb(6, 32, 25);
  box-shadow: rgb(6, 32, 25) 0px 0px 0px 0.02rem;
}

.dorder__me .icon {
  width: 72%;
  height: 72%;
}

.dorder__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0px;
  text-shadow: rgb(0, 0, 0) 0px 1px 3px, rgb(0, 0, 0) 0px 0px 0.1rem;
}

.dorder__name {
  display: flex;
  align-items: baseline;
  gap: 0.06rem;
  min-width: 0px;
  font-size: calc(.24 * var(--t));
  font-weight: 700;
  color: rgb(242, 244, 244);
  white-space: nowrap;
  line-height: 1.2;
}

.dorder__name > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dorder__ai {
  flex: 0 0 auto;
  font-family: var(--font-num);
  font-size: calc(.11 * var(--t));
  padding: 0px 0.04rem;
  background: rgb(169, 195, 216);
  color: rgb(11, 21, 32);
}

.dorder__state {
  font-size: calc(.15 * var(--t));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dorder__box {
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  padding: 0px;
  background: rgb(43, 47, 48);
  color: rgb(118, 124, 126);
  font-size: calc(.2 * var(--t));
  font-weight: 700;
}

.dorder__box.is-wait .icon {
  width: 0.52rem;
  height: 0.52rem;
}

.dorder__box.is-cur {
  background: linear-gradient(rgb(242, 244, 244), rgb(205, 209, 209));
  color: rgb(21, 25, 26);
  box-shadow: rgb(255, 255, 255) 0px 0px 0px 0.03rem, rgba(0, 0, 0, 0.55) 0px 0.04rem 0.14rem;
}

.dorder__box.is-cur .icon {
  width: 0.46rem;
  height: 0.46rem;
}

.dorder__box.is-band {
  cursor: pointer;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgb(31, 74, 64), rgb(12, 21, 19) 75%);
  box-shadow: rgba(120, 240, 205, 0.25) 0px 0px 0px 1px inset;
}

.dorder__box.is-band .bandicon {
  --bi: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
}

.dorder__box.is-band:hover {
  box-shadow: inset 0 0 0 2px var(--mint-400);
}

.dorder__zoom {
  position: absolute;
  left: 50%;
  bottom: 0.04rem;
  width: 0.3rem;
  height: 0.3rem;
  transform: translateX(-50%);
  color: rgb(255, 255, 255);
  filter: drop-shadow(rgb(0, 0, 0) 0px 0px 2px);
}

.dorder__check {
  width: 0.44rem;
  height: 0.44rem;
  display: grid;
  place-items: center;
}

.dorder.is-done .dorder__check {
  border: .03rem solid var(--mint-400);
  border-radius: 0.06rem;
  background: rgba(23, 249, 183, 0.12);
  color: var(--mint-400);
  box-shadow: rgba(23, 249, 183, 0.45) 0px 0px 0.14rem;
}

.dorder__check .icon {
  width: 80%;
  height: 80%;
}

.dorder.is-cur .dorder__card {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 .03rem var(--mint-400), 0 0 .22rem rgba(23, 249, 183, .3);
}

.dorder.is-cur::before {
  content: "";
  position: absolute;
  left: -0.26rem;
  top: 50%;
  transform: translateY(-50%);
  border-top: 0.09rem solid transparent;
  border-bottom: 0.09rem solid transparent;
  border-image: none;
  border-left: .13rem solid var(--mint-400);
  border-right: 0px;
  animation: 1.2s ease-in-out 0s infinite normal none running dorder-mark;
}

@keyframes dorder-mark {
  50% {
    transform: translate(-0.05rem, -50%);
  }
}

.dorder.is-flash::after {
  content: "";
  position: absolute;
  left: 52%;
  right: -1.8rem;
  top: 50%;
  height: 0.8rem;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(210, 255, 242, 0.95), rgba(63, 230, 180, 0.55) 45%, transparent);
  filter: blur(2px);
  transform-origin: 0px 50%;
  animation: 1.1s ease-out 0s 1 normal both running dorder-beam;
}

@keyframes dorder-beam {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.15);
  }

  22% {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scaleX(1.12);
  }
}

.dorder.is-flash .dorder__box {
  animation: 900ms ease-out 0s 1 normal none running tr-glow;
}

.dorder.is-flash .dorder__check {
  animation: tr-pop 320ms var(--tr-ease) 140ms backwards;
}

.draft__link {
  grid-column: 2;
  position: relative;
  pointer-events: none;
  transition: opacity 200ms;
}

.draft__link::before {
  content: "";
  position: absolute;
  right: 0.14rem;
  top: 34%;
  bottom: 34%;
  width: 0.12rem;
  border-width: 1px 1px 1px 0px;
  border-style: solid solid solid none;
  border-color: rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.22) rgba(255, 255, 255, 0.22) currentcolor;
  border-image: none;
}

.draft__link::after {
  content: "";
  position: absolute;
  left: 0.12rem;
  right: 0.26rem;
  top: 50%;
  height: 0.05rem;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--mint-400) .05rem, rgba(255, 255, 255, .5) .05rem calc(100% - .05rem), var(--mint-400) calc(100% - .05rem));
}

.draft--detail .draft__link {
  opacity: 0;
}

.draft-grid {
  grid-column: 3;
  min-width: 0px;
  min-height: 0px;
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1.9rem));
  place-content: start center;
  gap: 0.3rem 0.26rem;
  padding: 0.24rem 0.3rem 0.4rem;
  background: linear-gradient(rgba(18, 22, 22, 0.6), rgba(10, 12, 12, 0.3));
  box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.dband, .dorder__box, .draft-skip, .stephead__info {
  border: 0px;
  font: inherit;
}

.dband {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0px;
  color: var(--text-md);
  background: rgb(14, 18, 18);
  box-shadow: rgb(48, 55, 58) 0px 0px 0px 0.03rem, rgb(0, 0, 0) 0px 0px 0px 0.02rem inset;
  transition: box-shadow var(--t-fast), transform var(--t-fast), filter var(--t-fast);
  animation-delay: calc(220ms + var(--n, 0) * 28ms);
}

.dband__frame {
  position: absolute;
  inset: 0.07rem;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, rgb(30, 63, 55), rgb(11, 18, 17) 72%);
}

.dband__frame .bandicon {
  --bi: 100%;
  width: 100%;
  height: 100%;
  background: transparent;
}

.dband__frame img {
  filter: saturate(0.75) contrast(1.05);
}

.dband__frame::after {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0px, rgba(0, 0, 0, 0.16) 1px, transparent 1px, transparent 3px), radial-gradient(circle at 50% 46%, transparent 48%, rgba(4, 10, 9, 0.78) 74%), linear-gradient(rgba(60, 230, 185, 0.1), rgba(60, 230, 185, 0.2));
}

.dband__name {
  position: absolute;
  left: 0.07rem;
  right: 0.07rem;
  bottom: 0.07rem;
  padding: 0.14rem 0.04rem 0.04rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: calc(.15 * var(--t));
  font-weight: 700;
  color: rgba(225, 240, 236, 0.82);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.dband:hover {
  box-shadow: rgba(120, 240, 205, 0.7) 0px 0px 0px 0.03rem, rgb(0, 0, 0) 0px 0px 0px 0.02rem inset;
  filter: brightness(1.12);
}

.dband:active {
  transform: scale(0.97);
}

.dband:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .04rem var(--mint-400);
}

.dband.is-sel {
  box-shadow: rgba(120, 240, 205, 0.5) 0px 0px 0px 0.03rem;
  filter: brightness(1.15);
}

.dband.is-sel::before {
  content: "";
  position: absolute;
  inset: -0.07rem;
  pointer-events: none;
  --c: var(--mint-400);
  --l: .34rem;
  --w: .05rem;
  background: linear-gradient(var(--c), var(--c)) top left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--l) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--l) no-repeat;
  filter: drop-shadow(rgba(23, 249, 183, 0.7) 0px 0px 0.06rem);
  animation: dband-sel 220ms var(--tr-ease) backwards;
}

@keyframes dband-sel {
  0% {
    opacity: 0;
    transform: scale(1.12);
  }
}

.dband.is-sel::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.2rem;
  transform: translateX(-50%);
  border-right: 0.08rem solid transparent;
  border-left: 0.08rem solid transparent;
  border-image: none;
  border-bottom: .1rem solid var(--mint-400);
  border-top: 0px;
}

.dband__selmark {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0.08rem;
  text-align: center;
  font-family: var(--font-num);
  font-size: calc(.12 * var(--t));
  letter-spacing: 0.1em;
  color: var(--mint-400);
  text-shadow: rgb(0, 0, 0) 0px 0px 3px;
  pointer-events: none;
}

.dband.is-mine {
  box-shadow: 0 0 0 .04rem var(--mint-400), 0 0 .2rem rgba(23, 249, 183, .35);
}

.dband.is-taken {
  cursor: not-allowed;
}

.dband.is-taken .dband__frame {
  filter: grayscale(0.7) brightness(0.55);
}

.dband.is-taken:hover {
  filter: none;
  box-shadow: rgb(90, 42, 38) 0px 0px 0px 0.03rem, rgb(0, 0, 0) 0px 0px 0px 0.02rem inset;
}

.dband.is-taken:active {
  transform: none;
}

.dband__taken {
  position: absolute;
  left: 0.07rem;
  right: 0.07rem;
  bottom: 0.07rem;
  height: 36%;
  display: grid;
  place-items: center;
  pointer-events: none;
  font-size: calc(.21 * var(--t));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(255, 157, 144);
  background: linear-gradient(rgba(140, 20, 16, 0.35), rgba(176, 26, 20, 0.88));
  box-shadow: rgb(255, 74, 58) 0px -0.03rem 0px inset, rgba(255, 60, 40, 0.25) 0px 0px 0.16rem;
  animation: dband-taken 420ms var(--tr-ease) backwards;
}

@keyframes dband-taken {
  0% {
    opacity: 0;
    transform: scaleY(0.2);
    filter: brightness(2);
  }
}

.dband.is-taken .dband__name {
  display: none;
}

.dband__medal {
  position: absolute;
  right: 0.12rem;
  top: 0.12rem;
  width: 0.36rem;
  height: 0.36rem;
  display: grid;
  place-items: center;
  color: rgb(255, 176, 58);
  background: rgba(70, 36, 4, 0.7);
  box-shadow: rgb(255, 154, 31) 0px 0px 0px 0.03rem inset, rgba(255, 150, 30, 0.4) 0px 0px 0.1rem;
  pointer-events: none;
}

.dband__medal .icon {
  width: 70%;
  height: 70%;
}

/* The official badge already contains its orange flag and seal. Its full image
   replaces the old square fallback; both the image and fallback keep one box. */
.dband__medal:has(.sprite) {
  top: 0.07rem;
  right: 0.07rem;
  width: 0.8rem;
  height: 0.82rem;
  background: transparent;
  box-shadow: none;
}

.dband__medal .sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dband__who {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  pointer-events: none;
}

.dband__off {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  font-size: max(calc(.12 * var(--t)), 8px);
  line-height: 1.5;
  padding: 0px 0.05rem;
  color: var(--text-lo);
  background: rgba(0, 0, 0, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.32);
  white-space: nowrap;
  pointer-events: none;
}

.draft-detail__off {
  display: flex;
  align-items: flex-start;
  gap: 0.06rem;
  margin: 0.04rem 0px 0.06rem;
  padding: 0.06rem 0.1rem;
  font-size: max(calc(.15 * var(--t)), 9px);
  line-height: 1.5;
  color: var(--text-lo);
  background: rgba(0, 0, 0, 0.25);
  border-left: 2px solid rgba(255, 255, 255, 0.28);
}

.draft-detail__off .icon {
  width: max(0.16rem, 10px);
  height: max(0.16rem, 10px);
  flex: 0 0 auto;
  margin-top: 0.02rem;
}

.draft-detail__offname {
  color: var(--text-dim);
  text-decoration: line-through rgba(255, 84, 84, 0.6);
}

.draft-detail {
  grid-column: 4;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0px;
  min-height: 0px;
  overflow: hidden;
  margin-left: 0.16rem;
  padding: 0.26rem 0.26rem 0.1rem;
  background: linear-gradient(rgba(30, 84, 72, 0.5), rgba(14, 32, 28, 0.4) 55%, rgba(8, 12, 12, 0.2));
  animation: tr-right 280ms var(--tr-ease) backwards;
}

.draft-detail__body {
  flex: 1 1 0%;
  min-height: 0px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: none;
  animation: 200ms ease-out 0s 1 normal backwards running tr-fade;
}

.draft-tag {
  align-self: flex-start;
  display: inline-block;
  height: 0.13rem;
  margin: 0.08rem 0px 0.05rem;
  padding: 0px 0.06rem;
  font-family: var(--font-num);
  font-size: calc(.09 * var(--t));
  line-height: 0.13rem;
  letter-spacing: 0.12em;
  color: rgb(8, 42, 32);
  background: rgba(63, 230, 180, 0.62);
}

.draft-detail__art, .draft-done__art {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.3rem;
  margin: 0.18rem 0px 0.14rem;
  flex: 0 0 auto;
}

.draft-detail__art::before, .draft-done__art::before {
  content: "";
  position: absolute;
  inset: 0px 0.14rem;
  pointer-events: none;
  border: 0.03rem solid rgba(220, 240, 236, 0.5);
  clip-path: polygon(0px 0px, 0.26rem 0px, 0.26rem 100%, 0px 100%, 0px 0px, 100% 0px, 100% 100%, calc(100% - 0.26rem) 100%, calc(100% - 0.26rem) 0px, 100% 0px);
}

.draft-detail__art::after, .draft-done__art::after {
  content: "+   +";
  position: absolute;
  inset: -0.18rem -0.1rem auto;
  text-align: justify;
  text-align-last: justify;
  font-size: calc(.3 * var(--t));
  line-height: 1;
  color: rgba(220, 240, 236, 0.25);
  pointer-events: none;
}

.draft-detail__art .bandicon, .draft-done__art .bandicon {
  --bi: 2.1rem;
  background: transparent;
}

.draft-detail__art img, .draft-done__art img {
  filter: saturate(0.8) drop-shadow(rgba(63, 230, 180, 0.35) 0px 0px 0.14rem);
}

.draft-detail__medal {
  align-self: center;
  margin-bottom: 0.06rem;
  padding: 0.02rem 0.14rem;
  font-size: calc(.16 * var(--t));
  font-weight: 700;
  color: rgb(255, 194, 92);
  background: rgba(70, 36, 4, 0.7);
  box-shadow: rgb(255, 154, 31) 0px 0px 0px 0.02rem inset;
}

.draft-detail__hp, .draft-done__hp {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: calc(.24 * var(--t));
  color: rgb(232, 236, 236);
}

.draft-detail__hp b, .draft-done__hp b {
  padding: 0px 0.08rem;
  font-size: calc(.22 * var(--t));
  line-height: 1.35;
  color: rgb(6, 32, 25);
  background: var(--mint-500);
}

.draft-detail__name {
  margin: 0px 0px 0.04rem;
  font-size: calc(.36 * var(--t));
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgb(244, 246, 246);
}

.draft-detail__eff {
  min-height: 0px;
}

.draft-detail__desc {
  margin: 0px;
  font-size: calc(.2 * var(--t));
  line-height: 1.55;
  color: rgb(238, 242, 242);
}

.draft-detail__actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  padding: 0.12rem 0px 0.1rem;
}

.draft-detail__status {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  margin: 0px;
  font-size: calc(.16 * var(--t));
  color: var(--text-lo);
}

.draft-detail__status .icon {
  width: 0.2rem;
  height: 0.2rem;
  flex: 0 0 auto;
}

.draft-detail__status--taken {
  color: rgb(255, 143, 128);
}

.draft-detail__btns {
  display: flex;
  gap: 0.1rem;
}

.draft-detail__btns .btn {
  flex: 1 1 0%;
}

.draft-detail__btns .btn--lg {
  height: 0.92rem;
  font-size: calc(.32 * var(--t));
}

.draft-confirm.btn--primary {
  --btn-bg: #d8dbdb;
  --btn-bg-hover: #f2f4f4;
  --btn-fg: #111415;
  --btn-bd: #fff;
  --btn-bd-hover: #fff;
  --btn-glow: rgba(255, 255, 255, .35);
  --bk-c: #fff;
  background-image: none;
  box-shadow: rgba(255, 255, 255, 0.85) 0px 0px 0px 0.03rem, rgba(0, 0, 0, 0.5) 0px 0.06rem 0.2rem;
  letter-spacing: 0.08em;
}

.draft-confirm .btn__icon {
  width: 0.4rem;
  height: 0.4rem;
  padding: 0.03rem;
  border: 0.03rem solid;
  border-radius: 0.04rem;
}

.draft-confirm.btn--primary:disabled {
  --btn-bg: #34393a;
  --btn-fg: #8c9293;
  --btn-bd: #4a5051;
  box-shadow: none;
  opacity: 1;
}

.draft-done {
  grid-column: 3 / 5;
  position: relative;
  min-width: 0px;
  min-height: 0px;
  overflow: auto;
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr);
  grid-template-rows: auto auto minmax(0px, 1fr) auto;
  align-content: center;
  gap: 0.12rem 0.3rem;
  padding: 0.5rem 0.7rem 0.36rem 0.5rem;
  background: linear-gradient(rgba(36, 98, 84, 0.48), rgba(16, 40, 35, 0.42) 60%, rgba(10, 18, 16, 0.3));
  box-shadow: rgba(63, 230, 180, 0.2) 0px 0px 0px 1px inset;
  clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0.5rem 100%, 0px calc(100% - 0.5rem));
  animation: draft-done-in 600ms var(--tr-ease) backwards;
}

.draft-done::after {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(170, 255, 232, 0.1) 0px, rgba(170, 255, 232, 0.1) 2px, transparent 2px, transparent 6px);
  animation: 900ms ease-out 200ms 1 normal both running tr-out;
}

@keyframes draft-done-in {
  0% {
    opacity: 0;
    transform: translateX(1.2rem);
    filter: brightness(2.4) saturate(0.4);
    clip-path: polygon(30% 0px, 100% 0px, 100% 100%, 30% 100%);
  }

  50% {
    opacity: 0.9;
    filter: brightness(1.5);
    clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0.5rem 100%, 0px calc(100% - 0.5rem));
  }
}

.draft-done__art {
  grid-area: 1 / 1;
  justify-self: center;
}

.draft-done__head {
  grid-area: 1 / 2;
  align-self: center;
  display: flex;
  flex-direction: column;
}

.draft-done__title {
  margin: 0px;
  font-size: calc(.6 * var(--t));
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--mint-400);
  text-shadow: rgba(23, 249, 183, 0.35) 0px 0px 0.16rem;
}

.draft-done__name {
  font-size: calc(.36 * var(--t));
  color: rgb(242, 244, 244);
}

.draft-done__hp {
  grid-area: 2 / 1;
}

.draft-done__desc {
  grid-area: 3 / 1 / auto / -1;
  margin: 0.2rem 0px 0px;
  padding: 0px 0.3rem;
  font-size: calc(.24 * var(--t));
  line-height: 1.55;
  color: rgb(238, 242, 242);
}

.draft-done .draft-detail__status {
  grid-area: 4 / 1 / auto / -1;
  justify-content: flex-end;
}

.dturn {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}

.dturn__txt {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}

.dturn__txt b {
  font-size: calc(.28 * var(--t));
  color: rgb(242, 244, 244);
}

.dturn__txt span {
  font-size: calc(.24 * var(--t));
  color: rgb(212, 216, 216);
}

.dturn__glass {
  width: 0.46rem;
  height: 0.46rem;
  color: rgb(236, 238, 238);
  animation: 2.4s ease-in-out 0s infinite normal none running dturn-glass;
}

@keyframes dturn-glass {
  0%, 40% {
    transform: rotate(0deg);
  }

  50%, 90% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

.dturn.is-turn {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.06rem;
  animation: tr-right 380ms var(--tr-ease) backwards;
}

.dturn__go {
  display: flex;
  align-items: center;
  gap: 0.16rem;
}

.dturn__go b {
  white-space: nowrap;
  font-size: min(calc(.4 * var(--t)), .5rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--mint-400);
  text-shadow: rgba(23, 249, 183, 0.4) 0px 0px 0.14rem;
}

.dturn__finger {
  width: 0.42rem;
  height: 0.42rem;
  color: var(--mint-400);
  object-fit: contain;
  animation: 1s ease-in-out 0s infinite normal none running dturn-finger;
}

@keyframes dturn-finger {
  50% {
    transform: translateX(0.05rem);
  }
}

.draft-skip {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  height: 0.44rem;
  padding: 0px 0.3rem 0px 0.24rem;
  border-radius: 0.22rem;
  background: rgba(70, 75, 77, 0.75);
  color: rgb(236, 238, 238);
  font-size: calc(.22 * var(--t));
  font-weight: 700;
  transition: background var(--t-fast);
}

.draft-skip:not(:disabled):hover {
  background: rgba(98, 104, 106, 0.85);
}

.draft-skip:disabled {
  cursor: default;
  color: rgba(236, 238, 238, 0.45);
  background: rgba(50, 54, 56, 0.55);
}

.draft-skip .icon {
  width: 0.28rem;
  height: 0.28rem;
  fill: currentcolor;
}

.draft-skip[aria-busy="true"] {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .draft-order, .dorder, .dorder.is-cur::before, .dorder.is-flash .dorder__box, .dorder.is-flash .dorder__check, .dband, .dband.is-sel::before, .dband__taken, .draft-detail, .draft-detail__body, .draft-done, .dturn.is-turn, .dturn__glass, .dturn__finger {
    animation: auto ease 0s 1 normal none running none;
  }

  .dorder.is-flash::after, .draft-done::after {
    display: none;
  }

  .draft__main {
    transition: none;
  }
}

.modal__box.minfo-dlg {
  width: min(max(17rem, 32px, calc(900px * var(--sp-ui, 1))), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
  max-height: calc(-0.6rem + 100svh);
}

.minfo-dlg .modal__head {
  padding: 0.16rem 0.3rem 0.02rem;
}

.minfo-dlg .modal__head .micro {
  font-size: max(0.11rem, 8px);
}

.minfo-dlg .modal__title {
  font-size: max(0.26rem, 15px);
}

.minfo-dlg .modal__body {
  display: flex;
  flex-direction: column;
  gap: max(.16rem, calc(6px * var(--sp-ui, 1)));
  padding: 0.1rem 0.3rem 0.2rem;
}

.minfo-dlg .modal__actions {
  align-items: center;
  padding: 0.12rem 0.3rem;
}

.minfo-dlg .modal__actions .btn {
  height: max(0.5rem, 30px);
  font-size: max(0.18rem, 12px);
}

.minfo-dlg__status {
  margin-right: auto;
  min-width: 0px;
}

.minfo-dlg__turn {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  font-size: max(0.17rem, 11px);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

.minfo-dlg__turn .icon {
  width: max(0.18rem, 12px);
  height: max(0.18rem, 12px);
}

.minfo-dlg__turn b {
  margin-left: 0.04rem;
  font-size: max(0.22rem, 14px);
}

.minfo-dlg__turn.is-warn {
  color: var(--orange-hi);
}

.minfo-dlg__turn.is-mint {
  color: var(--mint-400);
}

.minfo-dlg__turn.is-dim {
  color: var(--text-lo);
}

.minfo-dlg .brief-bonds, .minfo-dlg .brief-banned {
  padding: max(.16rem, calc(6px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-h {
  font-size: max(0.21rem, 12px);
  margin-bottom: max(.12rem, calc(5px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-h::before {
  width: max(0.06rem, 3px);
  height: max(0.2rem, 11px);
}

.minfo-dlg .brief-bonds__row {
  gap: max(.16rem, calc(6px * var(--sp-ui, 1))) max(.1rem, calc(4px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-bond {
  width: max(1rem, 32px, calc(50px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-bond .bond {
  --disc: max(.66rem, 32px);
}

.minfo-dlg .brief-bond .bond__name {
  font-size: max(0.16rem, 10px);
}

.minfo-dlg .brief-bond__ban {
  font-size: max(0.12rem, 9px);
  padding: 0 max(.05rem, calc(2px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-bond__ban .icon {
  width: max(0.12rem, 9px);
  height: max(0.12rem, 9px);
}

.minfo-dlg .brief-legend {
  margin-top: 0px;
  font-size: max(0.14rem, 10px);
}

.minfo-dlg .brief-legend__off {
  width: max(0.16rem, 9px);
  height: max(0.16rem, 9px);
}

.minfo-dlg .brief-legend__ban {
  width: max(0.2rem, 12px);
  height: max(0.18rem, 11px);
}

.minfo-dlg .brief-legend__ban .icon {
  width: max(0.12rem, 8px);
  height: max(0.12rem, 8px);
}

.minfo-dlg .brief-banned__n {
  font-size: max(0.22rem, 13px);
}

.minfo-dlg .brief-banned__grid {
  grid-template-columns: repeat(auto-fill, minmax(max(.6rem, 32px, calc(34px * var(--sp-ui, 1))), 1fr));
  gap: max(.08rem, calc(3px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-banned__grid .uthumb {
  --ut: max(.6rem, 32px, calc(34px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-banned__diy {
  font-size: max(0.14rem, 12px);
}

.minfo-dlg .t-dim {
  font-size: max(0.16rem, 10px);
}

.draft-order__plan {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  width: auto;
}

.draft--detail .draft-order__plan {
  margin-right: 0.12rem;
}

.dorder__plan {
  align-self: flex-start;
  margin-top: 0.02rem;
  max-width: 100%;
}

.draft-order__tip--repeat {
  font-size: max(calc(.16 * var(--t)), 12px);
  color: var(--mint-400);
}

.dband__more {
  min-width: 0.3rem;
  padding: 0.01rem 0.03rem;
  text-align: center;
  font-size: max(calc(.12 * var(--t)), 11px);
  color: var(--mint-400);
  background: rgba(12, 15, 14, 0.9);
  border: 1px solid var(--mint-800);
}

.pmark {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: currentcolor;
}

.pmark__glyph {
  width: 0.5rem;
  height: 0.5rem;
  fill: currentcolor;
  flex: 0 0 auto;
}

.pmark__type {
  font-family: var(--font-num);
  font-size: calc(.17 * var(--t));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.08em;
}

.tbanner {
  position: fixed;
  inset: 0px;
  z-index: var(--z-banner, 40);
  display: grid;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
}

.tbanner__dim {
  position: absolute;
  inset: 0px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  animation: 1650ms linear 0s 1 normal both running tbanner-dim;
}

@keyframes tbanner-dim {
  0% {
    opacity: 0;
  }

  8%, 88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.tbanner__band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.26rem;
  height: 2.1rem;
  animation: 1650ms cubic-bezier(0.2, 0.7, 0.2, 1) 0s 1 normal both running tbanner-band;
}

@keyframes tbanner-band {
  0% {
    transform: translateX(-46%);
  }

  12% {
    transform: translateX(-1.6%);
  }

  90% {
    transform: translateX(1.2%) scaleY(1);
  }

  97% {
    transform: translateX(1.2%) scaleY(0.06);
  }

  100% {
    transform: translateX(1.2%) scaleY(0);
  }
}

.tbanner__bar {
  position: relative;
  flex: 0 0 auto;
  width: 84vw;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(rgb(213, 215, 218), rgb(184, 187, 191));
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0.06rem 0.3rem;
}

.tbanner__grey {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  padding-left: 1.3rem;
  color: rgb(69, 73, 77);
}

.tbanner__logo {
  transform: scale(1.5);
  transform-origin: left center;
}

.tbanner__map {
  position: absolute;
  inset: 0px 0px 0px 38%;
  pointer-events: none;
  background: repeating-radial-gradient(at 72% 64%, rgba(0, 0, 0, 0.08) 0px, rgba(0, 0, 0, 0.08) 1px, transparent 1px, transparent 14px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 1.2rem);
  mask: linear-gradient(90deg, transparent, rgb(0, 0, 0) 30%);
}

.tbanner__mint {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2.5rem;
  background: linear-gradient(rgb(89, 230, 189), rgb(61, 209, 165));
  clip-path: inset(0px 100% 0px 0px);
  animation: 1650ms cubic-bezier(0.5, 0, 0.2, 1) 0s 1 normal both running tbanner-wipe;
}

@keyframes tbanner-wipe {
  0%, 34% {
    clip-path: inset(0px 100% 0px 0px);
  }

  62%, 100% {
    clip-path: inset(0px);
  }
}

.tbanner__mint .tbanner__map {
  inset: 0px;
  background: repeating-radial-gradient(at 40% 50%, rgba(8, 60, 44, 0.13) 0px, rgba(8, 60, 44, 0.13) 1px, transparent 1px, transparent 16px);
  mask: none;
}

.tbanner__text {
  position: relative;
  padding-bottom: 0.06rem;
  font-size: calc(.52 * var(--t));
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgb(11, 42, 33);
  border-bottom: 0.05rem solid rgb(11, 42, 33);
  animation: 1650ms ease-out 0s 1 normal both running tbanner-text;
}

@keyframes tbanner-text {
  0%, 46% {
    opacity: 0;
    transform: translateX(-0.4rem);
  }

  64% {
    opacity: 1;
    transform: translateX(0px);
  }

  100% {
    opacity: 1;
    transform: translateX(0.14rem);
  }
}

.tbanner__ring {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  border-width: 0.1rem;
  border-style: solid;
  border-color: rgba(11, 42, 33, 0.7) rgba(11, 42, 33, 0.7) transparent transparent;
  border-image: none;
  animation: 1650ms ease-out 0s 1 normal both running tbanner-ring;
}

@keyframes tbanner-ring {
  0%, 40% {
    opacity: 0;
    transform: translateY(-50%) rotate(-150deg);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateY(-50%) rotate(30deg);
  }
}

.tbanner__bot {
  flex: 0 0 auto;
  width: 1.12rem;
  height: 1.12rem;
  display: grid;
  place-items: center;
  background: rgb(61, 209, 165);
  color: rgb(11, 42, 33);
  box-shadow: rgba(61, 209, 165, 0.6) 0px 0px 0.2rem;
  animation: 1650ms ease-out 0s 1 normal both running tbanner-bot;
}

.tbanner__bot .icon {
  width: 70%;
  height: 70%;
}

@keyframes tbanner-bot {
  0%, 4% {
    opacity: 0;
    transform: scale(0.4);
  }

  12% {
    opacity: 1;
    transform: scale(1);
  }
}

.pboot {
  position: fixed;
  inset: 0px;
  z-index: calc(var(--z-conn, 75) - 1);
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(50% 62% at 50% 47%, rgb(28, 90, 75), rgb(11, 39, 34) 58%, rgb(5, 19, 17));
}

.pboot::before {
  content: "";
  position: absolute;
  inset: 0px;
  background: rgb(0, 0, 0);
  opacity: 0;
  animation: 1900ms linear 0s 1 normal backwards running pboot-black;
}

@keyframes pboot-black {
  0%, 58% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }
}

.pboot.is-leaving {
  animation: 360ms ease-in 0s 1 normal forwards running tr-out;
}

.pboot__stage {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  --pq: min(1vw, 1.7778vh);
}

.pboot__bg {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: 500ms ease-out 1150ms 1 normal backwards running tr-fade;
}

.pboot__orbit {
  fill: rgba(40, 150, 122, 0.12);
  stroke: rgba(110, 240, 200, 0.22);
  stroke-width: 3;
}

.pboot__orbit--in {
  fill: none;
  stroke-dasharray: 6, 12;
  stroke-opacity: 0.5;
}

.pboot__topo {
  fill: none;
  stroke: rgba(110, 240, 200, 0.09);
  stroke-width: 2;
}

.pboot__cross {
  fill: none;
  stroke: rgba(110, 240, 200, 0.55);
  stroke-width: 3;
}

.pboot__chip {
  position: absolute;
  left: 50%;
  top: 47.8%;
  width: 40%;
  aspect-ratio: 2 / 1;
  opacity: 0.3;
  transform: translate(-50%, -50%) rotate(-30deg) scale(0.62);
  animation: 1900ms cubic-bezier(0.3, 0.1, 0.2, 1) 0s 1 normal backwards running pboot-chip;
}

.pboot__chip svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pboot__chip rect {
  fill: rgb(70, 228, 182);
  fill-opacity: var(--o);
  stroke: rgb(196, 255, 240);
  stroke-width: 1.5;
  stroke-opacity: 0.75;
  animation-duration: 240ms;
  animation-timing-function: steps(2);
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
  animation-name: pboot-bit;
  animation-timeline: auto;
  animation-range: normal;
  animation-delay: calc(140ms + var(--d, 0ms));
}

.pboot__port {
  fill: none;
  stroke: rgb(166, 255, 230);
  stroke-width: 3;
}

@keyframes pboot-bit {
  0% {
    opacity: 0;
  }
}

@keyframes pboot-chip {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-32deg) scale(2.9);
    filter: brightness(2.1);
  }

  34% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-32deg) scale(2.45);
    filter: brightness(1.7);
  }

  62% {
    opacity: 0.9;
    transform: translate(-50%, -50%) rotate(-31deg) scale(0.66);
    filter: brightness(1.1);
  }
}

.pboot__flash {
  position: absolute;
  left: 50%;
  top: 47.8%;
  width: 62%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(180, 255, 234, 0.95), rgba(63, 230, 180, 0.5) 28%, transparent 64%);
  animation: 1900ms ease-out 0s 1 normal backwards running pboot-flash;
}

@keyframes pboot-flash {
  0%, 56% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }

  64% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.pboot__mark {
  position: absolute;
  left: 36.6%;
  top: 24.5%;
  color: rgba(150, 255, 225, 0.42);
  animation: 400ms ease-out 1300ms 1 normal backwards running tr-fade;
}

.pboot__mark .pmark__glyph {
  width: calc(3.2 * var(--pq));
  height: calc(3.2 * var(--pq));
}

.pboot__mark .pmark__type {
  font-size: calc(1.3 * var(--pq));
}

.pboot__lines {
  position: absolute;
  inset: 0px;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pboot__lines line {
  stroke: rgb(124, 245, 208);
  stroke-width: 3;
  stroke-dasharray: 1;
  animation-duration: 420ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
  animation-name: pboot-line;
  animation-timeline: auto;
  animation-range: normal;
  animation-delay: calc(1520ms + var(--i, 0) * 60ms);
}

@keyframes pboot-line {
  0% {
    stroke-dashoffset: 1;
  }
}

.pboot__node {
  fill: rgb(124, 245, 208);
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
  animation-name: tr-fade;
  animation-timeline: auto;
  animation-range: normal;
  animation-delay: calc(1880ms + var(--i, 0) * 60ms);
}

.pboot__anchor {
  fill: rgb(11, 38, 33);
  stroke: rgb(124, 245, 208);
  stroke-width: 4;
  animation-duration: 200ms;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
  animation-name: tr-fade;
  animation-timeline: auto;
  animation-range: normal;
  animation-delay: calc(1460ms + var(--i, 0) * 60ms);
}

.pcardx {
  position: absolute;
  display: flex;
  align-items: stretch;
  background: linear-gradient(rgb(85, 228, 186), rgb(60, 207, 164));
  box-shadow: 0 0 0 calc(.18 * var(--pq)) rgba(210, 255, 240, .45), 0 calc(.4 * var(--pq)) calc(1.2 * var(--pq)) rgba(0, 0, 0, .35);
  animation-duration: 540ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: backwards;
  animation-play-state: running;
  animation-name: pcardx-in;
  animation-timeline: auto;
  animation-range: normal;
  animation-delay: calc(1260ms + var(--i, 0) * 50ms);
}

.pcardx::before {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-radial-gradient(ellipse at 30% 120%, rgba(8, 60, 44, .14) 0 1px, transparent 1px calc(1.1 * var(--pq)));
}

.pcardx--l {
  flex-direction: row;
  transform-origin: 100% 50%;
}

.pcardx--r {
  flex-direction: row-reverse;
  transform-origin: 0px 50%;
}

.pcardx--c {
  transform-origin: 50% 50%;
}

@keyframes pcardx-in {
  0% {
    opacity: 0;
    transform: scaleX(0.1);
    filter: brightness(2.6) saturate(0);
  }

  40% {
    opacity: 1;
    filter: brightness(2) saturate(0.2);
  }

  75% {
    filter: brightness(1.15);
  }
}

.pcardx__mark {
  position: relative;
  flex: 0 0 auto;
  width: 17%;
  display: grid;
  place-items: center;
}

.pcardx__mark svg {
  width: 52%;
  fill: rgba(8, 56, 42, 0.4);
}

.pcardx__txt {
  position: relative;
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: calc(.15 * var(--pq));
  padding: 0 calc(1.3 * var(--pq));
  color: rgb(11, 42, 33);
}

.pcardx--r .pcardx__txt {
  align-items: flex-start;
}

.pcardx__txt b {
  font-family: var(--font-num);
  font-size: calc(2.6 * var(--pq));
  font-weight: 700;
  line-height: 1;
}

.pcardx__txt span {
  font-family: var(--font-num);
  font-size: calc(.95 * var(--pq));
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}

.pcardx__txt i {
  width: calc(1.5 * var(--pq));
  height: calc(1.5 * var(--pq));
  margin-top: calc(.35 * var(--pq));
  display: grid;
  place-items: center;
  background: rgb(11, 42, 33);
  color: rgb(85, 228, 186);
}

.pcardx__txt i .icon {
  width: 85%;
  height: 85%;
}

.pcardx__face {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgb(11, 38, 33);
  box-shadow: 0 0 0 calc(.2 * var(--pq)) #e8fff7;
}

.pcardx__face .pavatar {
  --pa: 100%;
  border: 0px;
}

.pboot--dense .pcardx__txt {
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: calc(.3 * var(--ch) * var(--pq));
  padding: 0 calc(.45 * var(--ch) * var(--pq));
}

.pboot--dense .pcardx--r .pcardx__txt {
  justify-content: flex-start;
}

.pboot--dense .pcardx__txt b {
  font-size: calc(.68 * var(--ch) * var(--pq));
}

.pboot--dense .pcardx__txt span {
  font-size: calc(.36 * var(--ch) * var(--pq));
}

.pboot--dense .pcardx__txt i {
  width: calc(.5 * var(--ch) * var(--pq));
  height: calc(.5 * var(--ch) * var(--pq));
  margin-top: 0px;
}

.pboot--dense .pcardx__mark svg {
  width: auto;
  height: 72%;
}

.pboot__title {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 66.4%;
  margin: 0px;
  text-align: center;
  font-size: calc(4.4 * var(--pq));
  font-weight: 900;
  letter-spacing: calc(.3 * var(--pq));
  line-height: 1.2;
  color: rgb(79, 240, 192);
  text-shadow: 0 0 calc(1.2 * var(--pq)) rgba(80, 255, 200, .45);
  animation: 520ms cubic-bezier(0.2, 0.8, 0.2, 1) 1400ms 1 normal backwards running pboot-title;
}

@keyframes pboot-title {
  0% {
    opacity: 0;
    transform: scale(1.35);
    filter: brightness(2.2) blur(2px);
  }

  60% {
    opacity: 1;
    filter: brightness(1.4);
  }
}

.pboot__sub {
  position: absolute;
  left: 50%;
  top: 77.4%;
  transform: translateX(-50%);
  padding: calc(.12 * var(--pq)) calc(1.5 * var(--pq));
  font-family: var(--font-num);
  font-size: calc(1.3 * var(--pq));
  font-weight: 700;
  letter-spacing: calc(.08 * var(--pq));
  color: rgb(11, 42, 33);
  background: rgb(79, 224, 184);
  white-space: nowrap;
  animation: 300ms ease-out 1560ms 1 normal backwards running tr-fade;
}

.pboot__conn {
  position: absolute;
  right: 6%;
  bottom: 4.5%;
  font-size: calc(1.6 * var(--pq));
  color: rgba(120, 240, 205, 0.72);
  animation: 400ms ease-out 2000ms 1 normal backwards running tr-fade;
}

.pboot__dots {
  display: inline-block;
  width: 0px;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
  animation: 1.2s steps(4) 0s infinite normal none running tr-dots;
}

.pboot__dots::before {
  content: "...";
}

@media (prefers-reduced-motion: reduce) {
  .pboot::before, .pboot__bg, .pboot__chip, .pboot__chip rect, .pboot__flash, .pboot__mark, .pboot__lines line, .pboot__node, .pboot__anchor, .pcardx, .pboot__title, .pboot__sub, .pboot__conn {
    animation: auto ease 0s 1 normal none running none;
  }

  .pboot__dots {
    width: auto;
    animation: auto ease 0s 1 normal none running none;
  }

  .draft.is-held {
    animation: auto ease 0s 1 normal none running none;
  }
}

.draft--detail .dorder__name {
  gap: 0.04rem;
  font-size: calc(.21 * var(--t));
}

.draft--detail .dorder__medal {
  width: 0.26rem;
  height: 0.26rem;
}

.draft--detail .dorder .pavatar {
  --pa: .74rem;
}

.dorder__name > span:not(.dorder__ai) {
  min-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dorder__medal {
  flex: 0 0 auto;
  width: 0.34rem;
  height: 0.34rem;
  object-fit: contain;
  filter: drop-shadow(rgb(0, 0, 0) 0px 1px 2px);
}

@media (max-height: 520px) {
  .draft.has-status .stephead__name {
    display: none;
  }

  .draft .stephead__mode .dtag {
    font-size: min(calc(.26 * var(--t)), calc(13px + var(--t-step)));
  }

  .draft .stephead__info {
    height: auto;
    min-height: 0.4rem;
    font-size: min(calc(.2 * var(--t)), calc(12px + var(--t-step)));
  }

  :root:not([data-text="sm"]) .draft .stephead__info > span {
    display: none;
  }

  .draft .stephead__title b {
    font-size: min(calc(.54 * var(--t)), calc(26px + 2 * var(--t-step)));
  }

  .draft .stephead__of {
    font-size: min(calc(.34 * var(--t)), calc(17px + var(--t-step)));
  }

  .draft .dturn__go b {
    white-space: normal;
    text-wrap-style: balance;
    line-height: 1.15;
    font-size: min(calc(.4 * var(--t)), calc(15px + var(--t-step)));
  }

  :root:not([data-text="sm"]) .draft .dturn__finger {
    display: none;
  }

  .draft .dturn__txt b {
    font-size: min(calc(.28 * var(--t)), calc(14px + var(--t-step)));
    text-align: right;
  }

  .draft .dturn__txt span {
    font-size: min(calc(.24 * var(--t)), calc(12px + var(--t-step)));
    text-align: right;
  }

  .draft .draft-skip {
    white-space: nowrap;
    font-size: min(calc(.22 * var(--t)), calc(13px + var(--t-step) / 2));
  }

  .draft .dorder__box span {
    max-width: 100%;
    letter-spacing: 0px;
    font-size: min(calc(.18 * var(--t)), calc(10px + var(--t-step) / 2));
  }

  :root[data-text="lg"] .draft-order__deco span, :root[data-text="xl"] .draft-order__deco span {
    display: none;
  }

  .dband__taken {
    white-space: nowrap;
    letter-spacing: 0px;
    font-size: min(calc(.21 * var(--t)), calc(12px + var(--t-step) / 2));
  }

  .dband__name {
    white-space: normal;
    text-wrap-style: balance;
    line-height: 1.1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: min(calc(.15 * var(--t)), calc(11px + var(--t-step) / 2));
  }

  .dband__name:lang(ja) {
    line-break: strict;
  }

  .dband__name:lang(ko) {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dband__badge {
  position: absolute;
  top: -10.8%;
  right: -10.8%;
  width: 82.35%;
  height: 84.8%;
  pointer-events: none;
}

.dband__badge-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.draft .stephead__left {
  flex: 0 0 auto;
}

.draft .stephead__right {
  flex: 1 1 0px;
  justify-content: flex-end;
}

.draft .stephead__status, .draft .dturn, .draft .dturn__go, .draft .dturn__txt {
  min-width: 0px;
}

.draft .stephead__mode.has-extra {
  height: auto;
  min-height: 0.52rem;
}

.draft .dturn__go b {
  text-align: right;
}

.draft .stephead {
  height: auto;
  min-height: 1.3rem;
}

.draft .draft-skip {
  height: auto;
  min-height: 0.44rem;
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.25;
}

.dturn:lang(ko), .draft-order__tip:lang(ko) {
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (max-height: 640px) {
  .draft.has-status .stephead__name {
    display: none;
  }
}

:root[data-text="lg"] .draft.has-status .stephead__name, :root[data-text="xl"] .draft.has-status .stephead__name {
  display: none;
}

.draft .stephead__guide {
  flex: 0 0 auto;
}

.draft.is-held {
  pointer-events: none;
  animation: 220ms ease-in 480ms 1 normal forwards running pg-out;
}

.minfo-dlg__content {
  flex: 0 0 auto;
  min-width: 0px;
}

.minfo-dlg__content.has-enemies {
  display: grid;
  grid-template-columns: minmax(0px, 6.2rem) minmax(0px, 1fr);
  gap: max(.2rem, calc(10px * var(--sp-ui, 1)));
}

.minfo-dlg__enemies, .minfo-dlg__bonds {
  display: flex;
  flex-direction: column;
  gap: max(.16rem, calc(6px * var(--sp-ui, 1)));
  min-width: 0px;
}

.minfo-dlg__enemies > *, .minfo-dlg__bonds > * {
  flex-shrink: 0;
}

.minfo-dlg .brief-enemies {
  padding: max(.16rem, calc(6px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1))) max(.2rem, calc(8px * var(--sp-ui, 1)));
  background: rgba(12, 15, 14, 0.8);
  border: 1px solid var(--line);
}

.minfo-dlg .brief-enemy {
  display: grid;
  grid-template-columns: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1))) minmax(0, 1fr);
  align-items: start;
  gap: max(.16rem, calc(8px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-boss {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(.04rem, calc(2px * var(--sp-ui, 1)));
}

.minfo-dlg .brief-boss__art {
  position: relative;
  width: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1)));
  height: max(1.4rem, 32px, calc(70px * var(--sp-ui, 1)));
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgb(107, 52, 32), rgb(42, 18, 11) 75%);
  box-shadow: rgb(74, 78, 80) 0px 0px 0px 2px, rgb(26, 28, 29) 0px 0px 0px 3px;
}

.minfo-dlg .brief-boss__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.minfo-dlg .brief-boss__q {
  font-size: max(0.6rem, 28px);
  font-weight: 900;
  color: rgba(255, 140, 70, 0.6);
}

.minfo-dlg .brief-boss__tag {
  width: 100%;
  padding: max(.02rem, calc(1px * var(--sp-ui, 1))) 0;
  text-align: center;
  font-size: max(0.13rem, 9px);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgb(255, 207, 74);
  background: linear-gradient(rgb(90, 66, 16), rgb(58, 42, 8));
  box-shadow: rgba(255, 207, 74, 0.25) 0px 0px 0px 1px inset;
}

.minfo-dlg .brief-boss__text {
  display: flex;
  flex-direction: column;
  gap: max(.06rem, calc(3px * var(--sp-ui, 1)));
  min-width: 0px;
  overflow-wrap: anywhere;
}

.minfo-dlg .brief-boss__name {
  margin: 0px;
  font-size: max(calc(.34 * var(--t)), 16px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.minfo-dlg .brief-boss__when {
  font-size: max(calc(.15 * var(--t)), 10px);
  color: var(--orange-hi);
}

.minfo-dlg .brief-boss__abil {
  margin: 0px;
  padding-left: max(.18rem, calc(12px * var(--sp-ui, 1)));
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
  font-size: max(calc(.14 * var(--t)), 10px);
  line-height: 1.6;
  color: var(--text-md);
}

.minfo-dlg .brief-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: max(.08rem, calc(4px * var(--sp-ui, 1)));
  color: var(--text-lo);
}

.minfo-dlg .brief-stage .icon {
  width: max(0.2rem, 12px);
  height: max(0.2rem, 12px);
  color: var(--mint-500);
}

.minfo-dlg .brief-stage__pool {
  font-size: max(calc(.14 * var(--t)), 10px);
}

.minfo-dlg .brief-stage__name {
  font-size: max(calc(.19 * var(--t)), 12px);
  color: var(--text-hi);
}

.minfo-dlg .brief-factions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: max(.08rem, calc(4px * var(--sp-ui, 1)));
  min-width: 0px;
}

.minfo-dlg .brief-faction__tt {
  min-width: 0px;
}

.minfo-dlg .brief-faction {
  flex: 1 1 0%;
  min-width: 0px;
  display: flex;
  align-items: center;
  gap: max(.14rem, calc(6px * var(--sp-ui, 1)));
  padding: max(.1rem, calc(5px * var(--sp-ui, 1))) max(.14rem, calc(6px * var(--sp-ui, 1)));
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--amber);
  cursor: help;
}

.minfo-dlg .brief-faction__icon {
  flex: 0 0 auto;
  width: max(0.72rem, 32px);
  height: max(0.72rem, 32px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  outline: none;
  background: radial-gradient(circle at 50% 45%, rgb(42, 58, 56), rgb(18, 24, 23) 70%);
}

.minfo-dlg .brief-faction__icon:focus-visible {
  box-shadow: 0 0 0 2px var(--mint-400);
}

.minfo-dlg .brief-faction__icon img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: grayscale(1) brightness(1.6);
}

.minfo-dlg .brief-faction__text {
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
  min-width: 0px;
  overflow-wrap: anywhere;
}

.minfo-dlg .brief-faction__text b {
  font-size: max(calc(.2 * var(--t)), 12px);
  color: var(--amber);
}

@media (max-width: 1000px) {
  .modal__box.minfo-dlg {
    width: min(max(12rem, 32px, calc(600px * var(--sp-ui, 1))), calc(100vw - .6rem - var(--sa-l, 0px) - var(--sa-r, 0px)));
  }

  .minfo-dlg__content.has-enemies {
    grid-template-columns: minmax(0px, 1fr);
  }
}