* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --font-ui:
    "DotGothic16",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI",
    "Yu Gothic",
    Meiryo,
    sans-serif;

  --font-body:
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI",
    "Yu Gothic",
    Meiryo,
    Arial,
    sans-serif;
}

html,
body {
  width: 100%;
  height: var(--app-height, 100dvh);
  overflow: hidden;
}

body {
  position: relative;

  font-family: var(--font-body);

  background: #050505;
  color: white;
}

button {
  font: inherit;
}


/* =========================
   GAME UI FONT
========================= */

.game-ui-font,
h1,
h2,
h3,
.title-small,
.main-button,
#prologue-start,
.rank,
.resource,
.year-label,
.home-message strong,
.home-message p,
.character-name,
.menu-button,
.back-button,
.training-header h3,
.training-choice,
.gacha-lobby-choice-title,
.gacha-lobby-choice-copy,
.doritike-gacha-tickets,
.doritike-gacha-desc,
.doritike-gacha-message,
.bs-gacha-balance,
.bs-gacha-guarantee,
.bs-gacha-message,
.bs-gacha-pull,
.bs-gacha-prompt-title,
.bs-gacha-pay-note,
.bs-gacha-prompt-button,
.bs-gacha-confirm-text,
.bs-gacha-reveal-number,
.bs-gacha-reveal-rarity,
.bs-gacha-reveal-name,
.bs-gacha-reveal-group,
.bs-gacha-reveal-status,
.bs-gacha-reveal-progress,
.bs-gacha-reveal-tap,
.bs-gacha-summary-title,
.bs-gacha-summary-rarity,
.bs-gacha-summary-name,
.bs-gacha-summary-status,
.bs-gacha-summary-close,
.doritike-gacha-pull,
.doritike-gacha-result-item,
.doritike-gacha-result-back,
.doritike-anim-line-text,
.doritike-anim-skip,
.doritike-anim-rummage-text,
.doritike-gacha-result-line,
.enhance-filter,
.enhance-card,
.enhance-empty,
.enhance-detail-panel,
.enhance-detail-confirm,
.evolve-detail-body,
.evolve-detail-confirm,
.evolve-detail-compare,
.timeline-header h3,
.timeline-resource,
.year-node,
#rotate-message {
  font-family: var(--font-ui);

  font-weight: 400;

  font-synthesis: none;
}


/* =========================
   GAME
========================= */

#game {
  position: relative;

  width: 100vw;
  height: var(--app-height, 100dvh);

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      #333 0%,
      #151515 50%,
      #050505 100%
    );
}


/* =========================
   SCREEN
========================= */

.screen {
  display: none;

  position: absolute;
  inset: 0;
}

.screen.active {
  display: flex;
}


/* =========================
   TITLE
========================= */

#title-screen {
  justify-content: center;
  align-items: center;

  text-align: center;

  background:
    linear-gradient(
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.8)
    ),
    radial-gradient(
      circle at center,
      #444 0%,
      #151515 45%,
      #000 100%
    );
}

.title-box {
  position: relative;

  width: min(90%, 900px);
}

.title-small {
  margin-bottom: 8px;

  font-size: clamp(10px, 1.4vw, 16px);

  letter-spacing: 0.35em;

  color: #aaa;
}

h1 {
  font-size: clamp(42px, 8vw, 100px);

  font-weight: 1000;

  letter-spacing: 0.08em;

  text-shadow:
    0 4px 0 #555,
    0 10px 30px #000;
}

h2 {
  margin-top: 8px;

  font-size: clamp(13px, 2vw, 24px);

  letter-spacing: 0.15em;

  color: #ccc;
}

.main-button {
  margin-top: 38px;

  padding: 14px 42px;

  border: 3px solid white;
  border-radius: 8px;

  background: #111;
  color: white;

  font-size: clamp(15px, 2vw, 22px);
  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 6px 0 #555,
    0 12px 30px #000;

  transition: 0.1s;
}

.main-button:active {
  transform: translateY(5px);

  box-shadow:
    0 1px 0 #555,
    0 5px 10px #000;
}

.version {
  margin-top: 22px;

  font-size: 11px;

  color: #777;
}


/* =========================
   HOME
========================= */

#home-screen {
  flex-direction: column;

  background:
    linear-gradient(
      to bottom,
      #343434 0%,
      #171717 55%,
      #090909 100%
    );
}


/* 上部 */

.top-bar {
  height: auto;

  min-height: 55px;

  max-height: none;

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: space-between;

  gap: clamp(6px, 1.2vw, 12px);

  padding:
    max(4px, env(safe-area-inset-top, 0px))
    max(2vw, env(safe-area-inset-right, 0px))
    4px
    max(2vw, env(safe-area-inset-left, 0px));

  border-bottom: 2px solid #555;

  background:
    linear-gradient(
      to bottom,
      #1d1d1d,
      #090909
    );

  box-shadow: 0 5px 15px #000;

  box-sizing: border-box;
}

.rank {
  flex: 0 0 auto;

  font-weight: 900;

  font-size: clamp(12px, 1.8vw, 20px);

  letter-spacing: 0.08em;

  white-space: nowrap;
}

.resources {
  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: flex-end;

  gap: clamp(4px, 0.7vw, 8px);
}

.resource {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 0.28em;

  min-width: 0;

  max-width: 100%;

  padding:
    clamp(3px, 0.7vh, 6px)
    clamp(5px, 0.9vw, 9px);

  border: 1px solid #555;
  border-radius: 7px;

  background: #111;

  font-size: clamp(10px, 1.25vw, 14px);

  font-weight: bold;

  font-variant-numeric: tabular-nums;

  line-height: 1.2;

  white-space: nowrap;

  box-shadow: inset 0 0 8px #000;

  box-sizing: border-box;
}

.resource-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  line-height: 1;
}

.resource-beats {
  cursor: pointer;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;
}

.beats-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  line-height: 1;
}


/* 中央 */

.home-main {
  position: relative;

  flex: 1;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 2vh 8vw 1vh;

  overflow: hidden;
}

.home-main::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 20%;

  background: #111;

  border-top: 2px solid #333;
}

.home-message {
  position: relative;

  z-index: 2;

  width: 42%;

  padding: 18px;

  border-left: 5px solid white;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,0.8),
      rgba(0,0,0,0)
    );
}

.year-label {
  display: block;

  margin-bottom: 5px;

  color: #999;

  font-size: clamp(10px, 1.2vw, 14px);
}

.home-message strong {
  display: block;

  font-size: clamp(30px, 5vw, 62px);

  line-height: 1;
}

.home-message p {
  margin-top: 12px;

  color: #bbb;

  font-weight: bold;

  font-size: clamp(11px, 1.5vw, 17px);
}


/* せな仮表示 */

.character-area {
  position: relative;

  z-index: 2;

  width: 38%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;

  width: min(20vw, 180px);
  height: min(20vw, 180px);

  border: 3px solid #666;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #555,
      #111
    );

  font-size: clamp(50px, 8vw, 100px);

  box-shadow:
    0 10px 30px #000;
}

.home-character-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.character-name {
  margin-top: 5px;

  padding: 4px 20px;

  background: #050505;

  border: 1px solid #777;

  font-size: clamp(13px, 2vw, 20px);

  font-weight: 900;

  letter-spacing: 0.15em;
}


/* =========================
   HOME MENU
========================= */

.home-menu {
  height: 23%;

  min-height: 85px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 7px;

  padding: 7px;

  background: #050505;

  border-top: 2px solid #555;
}

.menu-button {
  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 3px;

  border: 2px solid #555;
  border-radius: 7px;

  background:
    linear-gradient(
      #292929,
      #101010
    );

  color: white;

  font-size: clamp(11px, 1.5vw, 17px);

  font-weight: 900;

  cursor: pointer;
}

.menu-button span {
  font-size: clamp(20px, 3vw, 34px);
}

.menu-button:active {
  transform: scale(0.97);

  background: #444;
}

.menu-button.sortie {
  border-color: white;

  background:
    linear-gradient(
      #555,
      #181818
    );
}


/* =========================
   ROTATE
========================= */

#rotate-message {
  display: none;

  position: fixed;

  inset: 0;

  z-index: 9999;

  background: #050505;

  color: white;
}

#rotate-message > div {
  width: 100%;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 12px;

  font-size: 42px;
}

#rotate-message strong {
  font-size: 20px;
}

#rotate-message span {
  font-size: 12px;

  color: #888;
}


/* =========================
   PORTRAIT
========================= */

@media (orientation: portrait) {

  #rotate-message {
    display: flex;
  }

}
/* =========================
   TIMELINE
========================= */

#timeline-screen {
  flex-direction: column;

  background:
    linear-gradient(
      to bottom,
      #232323,
      #090909
    );
}


/* 上部 */

.timeline-header {
  height: 15%;

  min-height: 60px;

  display: grid;

  grid-template-columns:
    1fr 2fr 1fr;

  align-items: center;

  padding: 0 3vw;

  background: #080808;

  border-bottom: 2px solid #666;
}

.timeline-header > div:nth-child(2) {
  text-align: center;
}

.timeline-header h3 {
  font-size: clamp(20px, 3vw, 34px);

  letter-spacing: 0.15em;
}

.timeline-header p {
  margin-top: 2px;

  color: #888;

  font-size: clamp(9px, 1vw, 13px);
}

.back-button {
  justify-self: start;

  padding: 8px 16px;

  border: 1px solid #777;
  border-radius: 6px;

  color: white;

  background: #161616;

  font-weight: bold;

  cursor: pointer;
}


/* =========================
   TRAINING
========================= */

#training-screen {
  flex-direction: column;

  background: #111;
}

.training-header {
  height: 15%;

  min-height: 60px;

  display: grid;

  grid-template-columns:
    1fr 2fr 1fr;

  align-items: center;

  padding: 0 3vw;

  background: #080808;

  border-bottom: 2px solid #666;
}

.training-header > div:nth-child(2) {
  text-align: center;
}

.training-header h3 {
  font-size: clamp(20px, 3vw, 34px);

  letter-spacing: 0.15em;
}

.training-header p {
  margin-top: 2px;

  color: #888;

  font-size: clamp(9px, 1vw, 13px);
}

.training-body {
  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  padding: 20px 8vw;
}

.training-choice {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-width: 160px;

  min-height: 110px;

  padding: 16px 28px;

  border: 2px solid #555;
  border-radius: 8px;

  background:
    linear-gradient(
      #292929,
      #101010
    );

  color: white;

  font-size: clamp(16px, 2.2vw, 24px);

  font-weight: 900;

  cursor: pointer;
}

.training-choice span {
  font-size: clamp(24px, 4vw, 40px);
}

.training-choice:active {
  transform: scale(0.97);

  background: #444;
}


/* =========================
   GACHA LOBBY
========================= */

#gacha-lobby-screen {
  flex-direction: column;

  background:
    linear-gradient(
      to bottom,
      #1a1614 0%,
      #0c0b0a 55%,
      #050505 100%
    );
}

.gacha-lobby-header {
  padding-left:
    max(3vw, env(safe-area-inset-left, 0px));

  padding-right:
    max(3vw, env(safe-area-inset-right, 0px));
}

.gacha-lobby-body {
  flex: 1;

  min-height: 0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  align-items: stretch;

  justify-content: center;

  gap: clamp(10px, 2.2vw, 18px);

  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(4vw, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(4vw, env(safe-area-inset-left, 0px));

  box-sizing: border-box;
}

.gacha-lobby-choice {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: clamp(6px, 1.2vh, 10px);

  min-width: 0;

  min-height: clamp(120px, 42vh, 220px);

  padding:
    clamp(12px, 2.5vh, 20px)
    clamp(10px, 2vw, 18px);

  border: 2px solid #666;
  border-radius: 8px;

  color: #f2f2f2;

  text-align: center;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  box-sizing: border-box;
}

.gacha-lobby-choice-drip {
  border-color: #8a7a55;

  background:
    linear-gradient(
      160deg,
      #2a2418 0%,
      #14110c 70%,
      #0a0907 100%
    );
}

.gacha-lobby-choice-bs {
  border-color: #6a6a78;

  background:
    linear-gradient(
      160deg,
      #22232c 0%,
      #121318 70%,
      #08080a 100%
    );
}

.gacha-lobby-choice-icon {
  font-size: clamp(28px, 5vw, 44px);

  line-height: 1;
}

.gacha-lobby-choice-title {
  font-size: clamp(15px, 2.3vw, 24px);

  font-weight: 900;

  letter-spacing: 0.08em;

  line-height: 1.25;
}

.gacha-lobby-choice-copy {
  max-width: 16em;

  color: #bdb7ad;

  font-size: clamp(11px, 1.5vw, 15px);

  font-weight: 400;

  letter-spacing: 0.04em;

  line-height: 1.35;
}

.gacha-lobby-choice:active {
  transform: scale(0.98);

  filter: brightness(1.12);
}

@media (max-height: 380px) {

  .gacha-lobby-choice {
    min-height: clamp(96px, 38vh, 160px);

    gap: 4px;

    padding:
      clamp(8px, 1.8vh, 14px)
      clamp(8px, 1.6vw, 14px);
  }

}


/* =========================
   DORITIKE GACHA
========================= */

#doritike-gacha-screen {
  flex-direction: column;

  background:
    linear-gradient(
      to bottom,
      #1c1812 0%,
      #12100c 48%,
      #070605 100%
    );
}

.doritike-gacha-header {
  padding-left:
    max(3vw, env(safe-area-inset-left, 0px));

  padding-right:
    max(3vw, env(safe-area-inset-right, 0px));
}

.doritike-gacha-body {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(4vw, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(4vw, env(safe-area-inset-left, 0px));

  box-sizing: border-box;
}

.doritike-gacha-main,
.doritike-gacha-result {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;
}

.doritike-gacha-main[hidden],
.doritike-gacha-result[hidden] {
  display: none;
}

.doritike-gacha-counter {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: clamp(10px, 2.2vh, 18px);

  width: min(100%, 520px);

  margin: 0 auto;

  padding:
    clamp(16px, 3.5vh, 28px)
    clamp(14px, 3vw, 24px);

  border: 2px solid #6e5f3f;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #2a2318 0%,
      #17130e 55%,
      #0d0b08 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 230, 160, 0.08),
    inset 0 -18px 28px rgba(0, 0, 0, 0.35);

  box-sizing: border-box;

  text-align: center;
}

.doritike-gacha-tickets {
  margin: 0;

  color: #f0e6c8;

  font-size: clamp(18px, 3.2vw, 28px);

  letter-spacing: 0.06em;

  line-height: 1.2;
}

.doritike-gacha-desc {
  margin: 0;

  color: #b9ae97;

  font-size: clamp(12px, 1.8vw, 16px);

  letter-spacing: 0.04em;

  line-height: 1.4;
}

.doritike-gacha-message {
  flex: 0 0 auto;

  margin: 0 0 clamp(6px, 1vh, 10px);

  min-height: 1.3em;

  color: #d9a27a;

  font-size: clamp(12px, 1.7vw, 15px);

  letter-spacing: 0.04em;

  line-height: 1.3;

  text-align: center;
}

.doritike-gacha-message[hidden] {
  display: none;
}

.doritike-gacha-actions,
.doritike-gacha-result-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: stretch;

  justify-content: center;

  gap: clamp(8px, 1.6vw, 14px);

  width: 100%;
}

.doritike-gacha-pull,
.doritike-gacha-result-back {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-width: clamp(120px, 28vw, 180px);

  min-height: clamp(52px, 10vh, 72px);

  padding:
    clamp(8px, 1.6vh, 12px)
    clamp(12px, 2vw, 18px);

  border: 2px solid #85744a;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #3a3122 0%,
      #1c1812 100%
    );

  color: #f4edd8;

  font-size: clamp(14px, 2.1vw, 18px);

  letter-spacing: 0.06em;

  line-height: 1.25;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  box-sizing: border-box;
}

.doritike-gacha-pull:active,
.doritike-gacha-result-back:active {
  transform: scale(0.98);

  filter: brightness(1.1);
}

.doritike-gacha-pull:disabled,
.doritike-gacha-result-back:disabled {
  opacity: 0.55;

  cursor: default;

  transform: none;

  filter: none;
}

.doritike-gacha-pull-label {
  font-weight: 700;
}

.doritike-gacha-pull-cost {
  color: #c4b58f;

  font-size: clamp(11px, 1.5vw, 13px);

  letter-spacing: 0.04em;
}

.doritike-gacha-result-back {
  border-color: #666056;

  background:
    linear-gradient(
      180deg,
      #2c2924 0%,
      #141210 100%
    );
}

.doritike-gacha-result-list {
  flex: 1;

  min-height: 0;

  overflow-x: hidden;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  gap: clamp(6px, 1.2vh, 10px);

  width: min(100%, 560px);

  margin: 0 auto;

  padding:
    clamp(8px, 1.5vh, 12px)
    clamp(4px, 1vw, 8px);

  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
}

.doritike-gacha-result-item {
  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  justify-content: space-between;

  gap: 6px 12px;

  padding:
    clamp(8px, 1.5vh, 12px)
    clamp(10px, 2vw, 14px);

  border: 1px solid #5c5138;

  border-radius: 3px;

  background: rgba(28, 24, 16, 0.92);

  color: #efe6d0;

  font-size: clamp(13px, 2vw, 17px);

  letter-spacing: 0.04em;

  line-height: 1.35;

  box-sizing: border-box;
}

.doritike-gacha-result-item.is-jackpot {
  border-color: #b08a3c;

  background: rgba(48, 36, 14, 0.95);
}

.doritike-gacha-result-name {
  min-width: 0;

  flex: 1 1 auto;
}

.doritike-gacha-result-amount {
  flex: 0 0 auto;

  color: #f3e7bf;

  font-weight: 700;
}

.doritike-gacha-result-jackpot {
  width: 100%;

  color: #e2b45a;

  font-size: clamp(11px, 1.5vw, 13px);

  letter-spacing: 0.08em;
}

.doritike-gacha-result-actions {
  flex: 0 0 auto;

  padding-top: clamp(8px, 1.5vh, 12px);
}

@media (max-height: 380px) {

  .doritike-gacha-counter {
    gap: 8px;

    padding:
      clamp(10px, 2.2vh, 16px)
      clamp(10px, 2vw, 16px);
  }

  .doritike-gacha-pull,
  .doritike-gacha-result-back {
    min-height: clamp(44px, 12vh, 58px);
  }

}


/* =========================
   BS GACHA
========================= */

#bs-gacha-screen {
  flex-direction: column;

  overflow: hidden;

  background: #07080a;
}

.bs-gacha-stage {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image: url("images/gacha/bs_gacha_stage_bg.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;
}

.bs-gacha-lighting {
  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}

.bs-gacha-light {
  position: absolute;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  transition: opacity 240ms ease;
}

.bs-gacha-lighting.is-strobe .bs-gacha-light {
  transition-duration: 80ms;
}

.bs-gacha-light::before,
.bs-gacha-light::after {
  content: "";

  position: absolute;

  top: -4%;

  width: 18%;

  height: 108%;

  transform-origin: 50% 0;

  filter: blur(9px);

  pointer-events: none;

  clip-path: polygon(42% 0%, 58% 0%, 86% 100%, 14% 100%);
}

.bs-gacha-light-white {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.06) 16%,
      transparent 32%
    ),
    radial-gradient(
      ellipse 16% 14% at 50% 5%,
      rgba(255, 255, 255, 0.75),
      transparent 72%
    );
}

.bs-gacha-light-white::before,
.bs-gacha-light-white::after {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.34) 36%,
      rgba(255, 255, 255, 0.08) 62%,
      transparent 84%
    );
}

.bs-gacha-light-white::before {
  left: 28%;

  transform: rotate(11deg);
}

.bs-gacha-light-white::after {
  right: 22%;

  width: 15%;

  transform: rotate(-16deg);
}

.bs-gacha-light-blue {
  background:
    radial-gradient(
      ellipse 28% 22% at 48% 10%,
      rgba(36, 72, 150, 0.55),
      transparent 70%
    );
}

.bs-gacha-light-blue::before,
.bs-gacha-light-blue::after {
  background:
    linear-gradient(
      to bottom,
      rgba(28, 62, 148, 0.95) 0%,
      rgba(18, 42, 112, 0.42) 40%,
      rgba(12, 28, 78, 0.1) 64%,
      transparent 86%
    );
}

.bs-gacha-light-blue::before {
  left: 22%;

  width: 20%;

  transform: rotate(14deg);
}

.bs-gacha-light-blue::after {
  right: 16%;

  width: 17%;

  transform: rotate(-12deg);
}

.bs-gacha-light-red {
  background:
    linear-gradient(
      168deg,
      rgba(176, 24, 32, 0.34) 0%,
      rgba(120, 12, 18, 0.1) 22%,
      transparent 42%
    ),
    radial-gradient(
      ellipse 24% 18% at 52% 8%,
      rgba(190, 36, 40, 0.62),
      transparent 72%
    );
}

.bs-gacha-light-red::before,
.bs-gacha-light-red::after {
  background:
    linear-gradient(
      to bottom,
      rgba(188, 28, 34, 0.96) 0%,
      rgba(140, 16, 22, 0.46) 38%,
      rgba(90, 8, 14, 0.1) 64%,
      transparent 86%
    );
}

.bs-gacha-light-red::before {
  left: 16%;

  width: 20%;

  transform: rotate(18deg);
}

.bs-gacha-light-red::after {
  right: 12%;

  width: 22%;

  transform: rotate(-13deg);
}

.bs-gacha-light-legend {
  background:
    linear-gradient(
      174deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 214, 150, 0.22) 24%,
      transparent 50%
    ),
    radial-gradient(
      ellipse 26% 18% at 46% 7%,
      rgba(255, 255, 255, 0.75),
      transparent 70%
    ),
    radial-gradient(
      ellipse 20% 16% at 62% 12%,
      rgba(255, 176, 84, 0.45),
      transparent 72%
    );
}

.bs-gacha-light-legend::before {
  left: 24%;

  width: 16%;

  transform: rotate(13deg);

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.96) 0%,
      rgba(255, 236, 200, 0.4) 40%,
      transparent 82%
    );
}

.bs-gacha-light-legend::after {
  right: 18%;

  width: 18%;

  transform: rotate(-15deg);

  background:
    linear-gradient(
      to bottom,
      rgba(255, 196, 110, 0.9) 0%,
      rgba(255, 255, 255, 0.28) 36%,
      rgba(226, 140, 54, 0.08) 64%,
      transparent 86%
    );
}

.bs-gacha-light-flash {
  background:
    radial-gradient(
      ellipse 70% 62% at 50% 36%,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 76%
    );
}

.bs-gacha-lighting.is-burst .bs-gacha-light-flash {
  background: rgba(255, 255, 255, 0.98);

  transition-duration: 70ms;
}

.bs-gacha-lighting.is-shake {
  animation: bs-gacha-light-shake 180ms linear;
}

@keyframes bs-gacha-light-shake {

  0% {
    transform: translate(0, 0);
  }

  30% {
    transform: translate(1px, -1px);
  }

  60% {
    transform: translate(-1px, 1px);
  }

  100% {
    transform: translate(0, 0);
  }

}

.bs-gacha-header {
  position: relative;

  z-index: 6;

  height: auto;

  min-height: 52px;

  padding-top:
    max(4px, env(safe-area-inset-top, 0px));

  padding-left:
    max(3vw, env(safe-area-inset-left, 0px));

  padding-right:
    max(3vw, env(safe-area-inset-right, 0px));

  background:
    linear-gradient(
      180deg,
      rgba(8, 9, 12, 0.9) 0%,
      rgba(8, 9, 12, 0.42) 100%
    );

  border-bottom-color: transparent;
}

.bs-gacha-header p {
  margin: 0;

  color: #aeb6c4;

  font-size: 11px;

  letter-spacing: 0.22em;

  line-height: 1.2;
}

.bs-gacha-header h3 {
  font-size: clamp(16px, 2.6vw, 30px);

  line-height: 1.15;
}

#bs-gacha-back {
  min-height: 44px;

  box-sizing: border-box;
}

.bs-gacha-body {
  position: relative;

  z-index: 3;

  flex: 1;

  min-height: 0;

  min-width: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  justify-content: flex-end;

  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(4vw, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(4vw, env(safe-area-inset-left, 0px));

  box-sizing: border-box;
}

.bs-gacha-message {
  flex: 0 0 auto;

  margin: 0 0 clamp(6px, 1vh, 10px);

  min-height: 1.3em;

  color: #f0e2c8;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);

  font-size: clamp(12px, 1.7vw, 15px);

  letter-spacing: 0.04em;

  line-height: 1.35;

  text-align: center;
}

.bs-gacha-message[hidden] {
  display: none;
}

.bs-gacha-main {
  flex: 0 1 auto;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 8px;

  width: min(100%, 520px);

  margin: 0 auto;

  padding:
    10px
    14px
    12px;

  border: 1px solid rgba(214, 198, 168, 0.28);

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      rgba(12, 14, 18, 0.34) 0%,
      rgba(8, 9, 12, 0.62) 100%
    );

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28);

  box-sizing: border-box;

  text-align: center;
}

.bs-gacha-balances {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: clamp(8px, 2vw, 18px);

  width: 100%;
}

.bs-gacha-balance {
  margin: 0;

  min-width: 0;

  color: #f3f6fb;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);

  font-size: clamp(16px, 2.8vw, 26px);

  letter-spacing: 0.04em;

  line-height: 1.2;
}

.bs-gacha-guarantee {
  margin: 0;

  max-width: 100%;

  color: #d5dce8;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);

  font-size: clamp(12px, 1.8vw, 16px);

  letter-spacing: 0.04em;

  line-height: 1.35;

  overflow-wrap: anywhere;
}

.bs-gacha-actions,
.bs-gacha-prompt-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: stretch;

  justify-content: center;

  gap: clamp(8px, 1.6vw, 14px);

  width: 100%;
}

.bs-gacha-pull,
.bs-gacha-prompt-button {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  min-width: min(100%, 148px);

  min-height: 44px;

  padding:
    clamp(8px, 1.4vh, 12px)
    clamp(10px, 1.8vw, 16px);

  border: 2px solid #667084;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #323846 0%,
      #1a1e28 100%
    );

  color: #eef1f6;

  font-size: clamp(14px, 2vw, 18px);

  letter-spacing: 0.05em;

  line-height: 1.25;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  box-sizing: border-box;
}

.bs-gacha-pull {
  min-height: 52px;
}

#bs-gacha-pull-10 {
  min-width: min(100%, 176px);

  border-color: #cbb892;

  background:
    linear-gradient(
      180deg,
      #403628 0%,
      #1c1814 100%
    );
}

#bs-gacha-pull-10 .bs-gacha-pull-label {
  color: #fff6e6;

  font-size: clamp(15px, 2.15vw, 20px);
}

#bs-gacha-confirm-ok {
  min-width: 120px;

  min-height: 44px;

  border-color: #e4d2a8;

  background:
    linear-gradient(
      180deg,
      #4a4032 0%,
      #241e16 100%
    );

  color: #fff8ee;
}

.bs-gacha-prompt-button.is-short {
  opacity: 0.38;

  border-color: #4a4148;

  color: #b7a8aa;
}

.bs-gacha-pay-need {
  color: #c5cedb;

  font-size: clamp(11px, 1.5vw, 13px);

  letter-spacing: 0.04em;
}

.bs-gacha-prompt-button.is-short .bs-gacha-pay-need {
  color: #d2a0a0;
}

.bs-gacha-pull:active,
.bs-gacha-prompt-button:active {
  transform: scale(0.98);

  filter: brightness(1.08);
}

.bs-gacha-pull:disabled,
.bs-gacha-prompt-button:disabled {
  opacity: 0.45;

  cursor: default;

  transform: none;

  filter: none;
}

.bs-gacha-pull-label {
  font-weight: 700;
}

.bs-gacha-pull-cost {
  color: #c5cedb;

  font-size: clamp(11px, 1.5vw, 13px);

  letter-spacing: 0.03em;

  line-height: 1.3;

  overflow-wrap: anywhere;
}

.bs-gacha-prompt {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(4vw, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px))
    max(4vw, env(safe-area-inset-left, 0px));

  background: rgba(4, 6, 10, 0.72);

  box-sizing: border-box;
}

.bs-gacha-prompt[hidden] {
  display: none;
}

.bs-gacha-prompt-panel {
  width: min(100%, 420px);

  max-height: 100%;

  overflow: auto;

  display: flex;

  flex-direction: column;

  gap: clamp(8px, 1.6vh, 12px);

  padding:
    clamp(12px, 2vh, 18px)
    clamp(12px, 2vw, 16px);

  border: 2px solid #667084;

  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      #2a303c 0%,
      #141820 100%
    );

  box-sizing: border-box;
}

.bs-gacha-prompt-step[hidden] {
  display: none;
}

.bs-gacha-prompt-title,
.bs-gacha-confirm-text,
.bs-gacha-reveal-number,
.bs-gacha-reveal-rarity,
.bs-gacha-reveal-name,
.bs-gacha-reveal-group,
.bs-gacha-reveal-status,
.bs-gacha-reveal-progress,
.bs-gacha-reveal-tap,
.bs-gacha-summary-title,
.bs-gacha-summary-rarity,
.bs-gacha-summary-name,
.bs-gacha-summary-status,
.bs-gacha-summary-close,
.bs-gacha-pay-note {
  margin: 0;

  text-align: center;

  overflow-wrap: anywhere;
}

.bs-gacha-prompt-title {
  color: #f2f4f8;

  font-size: clamp(16px, 2.4vw, 22px);

  letter-spacing: 0.12em;
}

.bs-gacha-pay-note,
.bs-gacha-confirm-text {
  color: #d5dbe6;

  font-size: clamp(13px, 1.9vw, 17px);

  letter-spacing: 0.04em;

  line-height: 1.45;
}

.bs-gacha-prompt-cancel {
  border-color: #555d6c;

  background:
    linear-gradient(
      180deg,
      #2a2e38 0%,
      #16181e 100%
    );
}

.bs-gacha-reveal {
  position: absolute;

  inset: 0;

  z-index: 7;

  overflow: hidden;

  pointer-events: none;

  opacity: 1;
}

.bs-gacha-reveal[hidden] {
  display: none;
}

.bs-gacha-reveal.is-ready {
  pointer-events: auto;

  cursor: pointer;
}

.bs-gacha-reveal.is-closing {
  opacity: 0;

  transition: opacity 280ms ease;
}

.bs-gacha-reveal-dim,
.bs-gacha-reveal-glow,
.bs-gacha-reveal-flash {
  position: absolute;

  pointer-events: none;
}

#bs-gacha-screen.is-presenting .bs-gacha-header,
#bs-gacha-screen.is-presenting .bs-gacha-body,
#bs-gacha-screen.is-presenting .bs-gacha-prompt,
#bs-gacha-screen.is-revealing .bs-gacha-header,
#bs-gacha-screen.is-revealing .bs-gacha-body {
  visibility: hidden;
}

.bs-gacha-reveal-dim {
  inset: 0;

  background:
    radial-gradient(
      ellipse 42% 62% at 50% 42%,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.78) 76%
    );

  opacity: 0;
}

.bs-gacha-reveal.is-open .bs-gacha-reveal-dim {
  opacity: 1;

  transition: opacity 280ms ease;
}

.bs-gacha-reveal-glow {
  left: 50%;

  top: 42%;

  width: min(46vw, 280px);

  height: min(70vh, 320px);

  transform: translate(-50%, -52%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.08) 42%,
      transparent 70%
    );

  opacity: 0;
}

.bs-gacha-reveal.is-silhouette .bs-gacha-reveal-glow {
  opacity: 1;

  transition: opacity 420ms ease;
}

.bs-gacha-reveal-flash {
  inset: 0;

  background: rgba(255, 255, 255, 0.98);

  opacity: 0;

  transition: opacity 90ms linear;
}

.bs-gacha-reveal-character {
  position: absolute;

  left: 50%;

  top: 41%;

  height: min(58vh, 250px);

  width: auto;

  max-width: min(42vw, 220px);

  object-fit: contain;

  object-position: center bottom;

  opacity: 0;

  transform: translate(-50%, -50%) scale(0.94);

  filter: brightness(0);

  pointer-events: none;

  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

.bs-gacha-reveal-character.is-shown {
  opacity: 1;

  transform: translate(-50%, -50%) scale(1);
}

.bs-gacha-reveal-character.is-color {
  filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));

  animation: bs-gacha-reveal-pop 420ms ease;
}

.bs-gacha-reveal-info,
.bs-gacha-reveal-status,
.bs-gacha-reveal-tap {
  position: absolute;

  margin: 0;

  pointer-events: none;

  opacity: 0;
}

.bs-gacha-reveal.is-info .bs-gacha-reveal-info,
.bs-gacha-reveal.is-info .bs-gacha-reveal-status,
.bs-gacha-reveal.is-ready .bs-gacha-reveal-tap {
  opacity: 1;

  transition: opacity 280ms ease;
}

.bs-gacha-reveal-info {
  left: max(14px, 4vw, env(safe-area-inset-left, 0px));

  bottom: max(36px, 7vh, calc(env(safe-area-inset-bottom, 0px) + 22px));

  display: flex;

  flex-direction: column;

  gap: 1px;

  max-width: min(42vw, 240px);

  text-align: left;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.bs-gacha-reveal-number {
  order: 3;

  text-align: left;

  color: #b7c0ce;

  font-size: clamp(10px, 1.4vw, 12px);

  letter-spacing: 0.12em;
}

.bs-gacha-reveal-rarity {
  order: 2;

  text-align: left;

  color: #f3f6fb;

  font-size: clamp(12px, 1.7vw, 15px);

  letter-spacing: 0.08em;
}

.bs-gacha-reveal-name {
  order: 1;

  text-align: left;

  color: #ffffff;

  font-size: clamp(18px, 2.8vw, 26px);

  letter-spacing: 0.04em;

  line-height: 1.15;
}

.bs-gacha-reveal-group {
  order: 4;

  text-align: left;

  color: #9aa4b4;

  font-size: clamp(10px, 1.35vw, 13px);

  letter-spacing: 0.06em;
}

.bs-gacha-reveal-status {
  right: max(14px, 4vw);

  top: 22%;

  color: #f4ead0;

  font-size: clamp(14px, 2.2vw, 20px);

  letter-spacing: 0.12em;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.bs-gacha-reveal-status.is-new {
  top: 16%;

  padding: 3px 9px;

  border: 2px solid #f0ddb0;

  border-radius: 2px;

  background: rgba(18, 14, 10, 0.9);

  color: #f8e7b4;

  font-size: clamp(15px, 2.4vw, 22px);

  letter-spacing: 0.18em;

  box-shadow: 0 0 10px rgba(240, 214, 150, 0.28);

  transform: rotate(-7deg);
}

.bs-gacha-reveal-progress {
  position: absolute;

  margin: 0;

  pointer-events: none;

  top: max(8px, env(safe-area-inset-top, 0px));

  right: max(
    14px,
    4vw,
    env(safe-area-inset-right, 0px)
  );

  z-index: 2;

  color: #e8eef8;

  font-size: clamp(12px, 1.8vw, 16px);

  letter-spacing: 0.14em;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);

  opacity: 0;
}

.bs-gacha-reveal.is-open .bs-gacha-reveal-progress {
  opacity: 1;

  transition: opacity 180ms ease;
}

.bs-gacha-reveal-status[hidden],
.bs-gacha-reveal-progress[hidden],
.bs-gacha-reveal-tap[hidden] {
  display: none;
}

.bs-gacha-reveal-tap {
  left: 0;

  right: 0;

  bottom: max(
    8px,
    1.6vh,
    env(safe-area-inset-bottom, 0px)
  );

  color: #eef2f8;

  font-size: clamp(12px, 1.8vw, 15px);

  letter-spacing: 0.16em;

  text-align: center;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

.bs-gacha-reveal.is-ready .bs-gacha-reveal-tap {
  animation: bs-gacha-tap-pulse 1.6s ease-in-out infinite;
}

@keyframes bs-gacha-tap-pulse {

  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }

}

@keyframes bs-gacha-reveal-pop {

  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  45% {
    transform: translate(-50%, -50%) scale(1.04);
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
  }

}

@media (prefers-reduced-motion: reduce) {

  .bs-gacha-lighting.is-shake,
  .bs-gacha-light::before,
  .bs-gacha-light::after {
    animation: none;

    transition: none;
  }

  .bs-gacha-reveal-character,
  .bs-gacha-reveal-character.is-color,
  .bs-gacha-reveal.is-closing,
  .bs-gacha-reveal.is-ready .bs-gacha-reveal-tap {
    animation: none;

    transition-duration: 1ms;
  }

}

@media (max-height: 400px) {

  .bs-gacha-reveal-character {
    top: 40%;

    height: min(52vh, 196px);

    max-width: min(34vw, 168px);
  }

  .bs-gacha-reveal-info {
    bottom: 28px;

    gap: 0;
  }

  .bs-gacha-reveal-status {
    top: 14%;
  }

  .bs-gacha-reveal-progress {
    font-size: 12px;
  }

}

.bs-gacha-summary {
  position: absolute;

  inset: 0;

  z-index: 8;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  overflow: hidden;

  padding:
    max(6px, env(safe-area-inset-top, 0px))
    max(12px, env(safe-area-inset-right, 0px))
    max(6px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));

  background: rgba(5, 6, 10, 0.62);

  opacity: 0;

  pointer-events: none;
}

.bs-gacha-summary[hidden] {
  display: none;
}

.bs-gacha-summary.is-open {
  opacity: 1;

  pointer-events: auto;

  transition: opacity 220ms ease;
}

.bs-gacha-summary.is-closing {
  opacity: 0;

  pointer-events: none;

  transition: opacity 200ms ease;
}

.bs-gacha-summary-title {
  flex: 0 0 auto;

  margin: 0 0 4px;

  color: #f4f7fb;

  font-size: clamp(12px, 1.7vw, 16px);

  letter-spacing: 0.18em;

  text-align: center;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.bs-gacha-summary-grid {
  flex: 1 1 auto;

  min-height: 0;

  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  grid-template-rows: repeat(2, minmax(0, 1fr));

  gap: 6px;

  overflow: hidden;
}

.bs-gacha-summary-card {
  position: relative;

  min-width: 0;

  min-height: 0;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  overflow: hidden;

  padding: 3px 4px 4px;

  border: 1px solid rgba(255, 255, 255, 0.28);

  border-radius: 4px;

  background: rgba(8, 9, 12, 0.74);

  animation: bs-gacha-summary-in 180ms ease both;
}

.bs-gacha-summary-card[data-rarity="2"] {
  border-color: rgba(96, 146, 220, 0.5);

  box-shadow: 0 0 6px rgba(36, 78, 170, 0.16);
}

.bs-gacha-summary-card[data-rarity="3"] {
  border-color: rgba(210, 64, 64, 0.5);

  box-shadow: 0 0 6px rgba(150, 28, 28, 0.16);
}

.bs-gacha-summary-card[data-rarity="4"] {
  border-color: rgba(255, 214, 150, 0.7);

  box-shadow:
    0 0 6px rgba(255, 255, 255, 0.12),
    0 0 8px rgba(255, 156, 64, 0.2);
}

.bs-gacha-summary-image {
  flex: 1 1 0;

  height: 0;

  min-height: 0;

  width: 100%;

  object-fit: contain;

  object-position: center bottom;

  pointer-events: none;
}

.bs-gacha-summary-rarity,
.bs-gacha-summary-name,
.bs-gacha-summary-status {
  display: block;

  flex: 0 0 auto;

  margin: 0;

  text-align: center;

  line-height: 1.15;

  white-space: nowrap;
}

.bs-gacha-summary-rarity {
  color: #d5deea;

  font-size: clamp(9px, 1.2vw, 12px);

  letter-spacing: 0.04em;
}

.bs-gacha-summary-card[data-rarity="4"] .bs-gacha-summary-rarity {
  color: #ffe2b4;
}

.bs-gacha-summary-name {
  color: #ffffff;

  font-size: clamp(11px, 1.45vw, 14px);

  letter-spacing: 0.02em;

  line-height: 1.15;

  max-height: 2.3em;

  overflow: hidden;
}

.bs-gacha-summary-status {
  color: #f0e2c0;

  font-size: clamp(8px, 1.15vw, 12px);

  letter-spacing: 0.04em;
}

.bs-gacha-summary-status.is-new {
  position: absolute;

  top: 4px;

  right: 4px;

  padding: 1px 4px;

  border: 1px solid #f0ddb0;

  border-radius: 2px;

  background: rgba(18, 14, 10, 0.9);

  color: #f8e7b4;

  font-size: clamp(8px, 1.2vw, 11px);

  letter-spacing: 0.12em;

  transform: rotate(-7deg);
}

.bs-gacha-summary-close {
  flex: 0 0 auto;

  align-self: center;

  min-width: 112px;

  min-height: 32px;

  margin-top: 4px;

  padding: 4px 16px;

  border: 1px solid #d7deea;

  border-radius: 2px;

  background: rgba(12, 13, 16, 0.92);

  color: #f4f7fb;

  font-size: clamp(12px, 1.6vw, 15px);

  letter-spacing: 0.16em;
}

.bs-gacha-summary-close:disabled {
  opacity: 0.55;
}

@keyframes bs-gacha-summary-in {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

@media (max-height: 400px) {

  .bs-gacha-summary {
    padding-top: max(4px, env(safe-area-inset-top, 0px));

    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }

  .bs-gacha-summary-title {
    margin-bottom: 2px;

    font-size: 12px;
  }

  .bs-gacha-summary-grid {
    gap: 4px;
  }

  .bs-gacha-summary-close {
    min-height: 36px;

    margin-top: 2px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .bs-gacha-summary,
  .bs-gacha-summary.is-open,
  .bs-gacha-summary.is-closing,
  .bs-gacha-summary-card {
    animation: none;

    transition-duration: 1ms;
  }

}

@media (max-height: 400px) {

  .bs-gacha-header {
    min-height: 44px;
  }

  .bs-gacha-main {
    gap: 6px;

    padding:
      8px
      10px;
  }

  .bs-gacha-pull {
    min-height: 44px;
  }

}


/* =========================
   DORITIKE GACHA PRESENTATION
   Canva scene: images/gacha/doritike_counter_bg.png
========================= */

#doritike-gacha-screen {
  overflow: hidden;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-header,
#doritike-gacha-screen.is-presenting .doritike-gacha-main,
#doritike-gacha-screen.is-presenting .doritike-gacha-message {
  visibility: hidden;

  pointer-events: none;
}

.doritike-gacha-animation {
  position: absolute;

  inset: 0;

  z-index: 4;

  min-height: 0;

  overflow: hidden;

  background: #070605;

  user-select: none;

  -webkit-user-select: none;

  cursor: default;

  touch-action: manipulation;
}

.doritike-gacha-animation[hidden] {
  display: none;
}

.doritike-scene,
.doritike-scene-bg,
.doritike-scene-box,
.doritike-scene-hand,
.doritike-scene-ticket,
.doritike-scene-flash,
.doritike-scene-spot {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.doritike-scene-bg {
  background:
    url("images/gacha/doritike_counter_bg.png")
    center 42% / cover
    no-repeat;

  transform-origin: 50% 42%;
}

.doritike-scene-box {
  inset: auto;

  left: 13%;

  top: 58%;

  width: 16%;

  height: 18%;

  border-radius: 4px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0) 72%
    );

  opacity: 0;
}

.doritike-scene-hand {
  inset: auto;

  left: 44%;

  top: 64%;

  width: 64px;

  height: 14px;

  border-radius: 8px 3px 3px 8px;

  background: #6d5c4c;

  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35);

  opacity: 0;

  transform: translate(8px, -4px);
}

.doritike-scene-hand::before {
  content: "";

  position: absolute;

  left: -10px;

  top: 2px;

  width: 14px;

  height: 12px;

  border-radius: 4px;

  background: #4a4036;
}

.doritike-scene-ticket {
  inset: auto;

  left: 42%;

  bottom: 8%;

  width: 72px;

  height: 36px;

  opacity: 0;

  transform: translateY(16px);
}

.doritike-scene-ticket-card {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #6a5a34;

  border-radius: 3px;

  background: #d7c48a;

  color: #2a2418;

  font-size: 9px;

  letter-spacing: 0.12em;

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.28);
}

.doritike-scene-ticket-card.is-back,
.doritike-scene-ticket-card.is-mid {
  display: none;

  background: #c2ae78;
}

.doritike-gacha-animation.is-x10 .doritike-scene-ticket-card.is-mid,
.doritike-gacha-animation.is-x10 .doritike-scene-ticket-card.is-back {
  display: flex;
}

.doritike-gacha-animation.is-x10 .doritike-scene-ticket-card.is-mid {
  transform: translate(4px, -4px);
}

.doritike-gacha-animation.is-x10 .doritike-scene-ticket-card.is-back {
  transform: translate(8px, -8px);

  background: #b39d68;
}

.doritike-scene-rummage {
  position: absolute;

  left: 17%;

  top: 63%;

  margin: 0;

  color: rgba(232, 214, 170, 0.88);

  font-size: 12px;

  letter-spacing: 0.16em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);

  opacity: 0;

  pointer-events: none;
}

.doritike-scene-flash,
.doritike-scene-spot {
  opacity: 0;
}

.doritike-scene-line {
  position: absolute;

  left: max(12px, env(safe-area-inset-left, 0px));

  top: max(10px, env(safe-area-inset-top, 0px));

  z-index: 6;

  width: min(240px, 36%);

  margin: 0;

  padding: 7px 10px;

  border: 1px solid rgba(232, 220, 190, 0.28);

  border-radius: 3px;

  background: rgba(12, 10, 8, 0.72);

  color: #f3ecdc;

  font-size: clamp(12px, 1.7vw, 15px);

  letter-spacing: 0.06em;

  line-height: 1.35;

  opacity: 0;

  pointer-events: none;

  box-sizing: border-box;
}

.doritike-scene-tap {
  position: absolute;

  left: max(14px, env(safe-area-inset-left, 0px));

  bottom: max(14px, env(safe-area-inset-bottom, 0px));

  z-index: 7;

  margin: 0;

  color: rgba(243, 236, 220, 0.78);

  font-size: 11px;

  letter-spacing: 0.14em;

  opacity: 0;

  pointer-events: none;
}

.doritike-gacha-animation.phase-line .doritike-scene-ticket,
#doritike-gacha-screen.is-ready .doritike-scene-ticket,
.doritike-gacha-animation.phase-line .doritike-scene-hand,
#doritike-gacha-screen.is-ready .doritike-scene-hand,
#doritike-gacha-screen.is-ready .doritike-scene-rummage {
  opacity: 0;
}

#doritike-gacha-screen.is-ready .doritike-scene-tap,
.doritike-gacha-animation.phase-line .doritike-scene-line,
#doritike-gacha-screen.is-ready .doritike-scene-line {
  opacity: 1;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result {
  position: absolute;

  left: 0;

  right: 0;

  top: 48%;

  bottom: 0;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  gap: 6px;

  padding:
    0
    max(12px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.34) 0%,
      rgba(0, 0, 0, 0.08) 46%,
      rgba(0, 0, 0, 0) 100%
    );

  pointer-events: none;

  box-sizing: border-box;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result[hidden] {
  display: none;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-line {
  display: none;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-list {
  pointer-events: none;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-actions {
  pointer-events: auto;
}

#doritike-gacha-screen.is-presenting:not(.is-ready) .doritike-gacha-result-actions {
  visibility: hidden;

  pointer-events: none;
}

#doritike-gacha-screen.is-presenting:not(.is-x10) .doritike-gacha-result-list {
  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: flex-end;

  width: 100%;

  margin: 0 auto 4px;

  padding: 0;

  overflow: hidden;
}

#doritike-gacha-screen.is-presenting:not(.is-x10) .doritike-gacha-result-item {
  width: min(300px, 54%);

  min-height: 74px;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  font-size: clamp(16px, 2.3vw, 22px);

  background: rgba(14, 11, 8, 0.84);

  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.32);
}

#doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-list {
  display: grid;

  grid-template-columns: repeat(5, minmax(0, 1fr));

  gap: 4px;

  width: 100%;

  max-height: none;

  margin: 0;

  padding: 0;

  overflow: hidden;
}

#doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-item {
  min-width: 0;

  flex-direction: column;

  align-items: flex-start;

  gap: 1px;

  padding: 4px 5px;

  font-size: 11px;

  line-height: 1.25;

  background: rgba(14, 11, 8, 0.86);
}

#doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-name,
#doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-amount,
#doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-jackpot {
  width: 100%;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-actions {
  justify-content: flex-end;

  padding-top: 0;

  padding-bottom: 2px;
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-item.is-good {
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.22);
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-item.is-jackpot .doritike-gacha-result-amount {
  color: #f0c56a;

  text-shadow:
    0 0 8px rgba(240, 180, 70, 0.55);
}

#doritike-gacha-screen.is-presenting .doritike-gacha-result-item.is-encore {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 18px rgba(255, 255, 255, 0.16);
}

.doritike-gacha-animation.phase-ticket .doritike-scene-ticket,
.doritike-gacha-animation.phase-look .doritike-scene-ticket,
.doritike-gacha-animation.phase-hand .doritike-scene-ticket {
  opacity: 1;
}

.doritike-gacha-animation.phase-ticket .doritike-scene-ticket {
  animation: doritike-ticket-in 380ms ease-out both;
}

.doritike-gacha-animation.phase-look .doritike-scene-bg {
  animation: doritike-look 320ms ease-out both;
}

.doritike-gacha-animation.phase-look .doritike-scene-ticket {
  transform: translate(-8%, -42%);
}

.doritike-gacha-animation.phase-hand .doritike-scene-ticket {
  opacity: 0;
}

.doritike-gacha-animation.phase-hand .doritike-scene-hand,
.doritike-gacha-animation.phase-rummage .doritike-scene-hand,
.doritike-gacha-animation.phase-rummage-b .doritike-scene-hand,
.doritike-gacha-animation.phase-hold .doritike-scene-hand {
  opacity: 0.95;
}

.doritike-gacha-animation.phase-rummage .doritike-scene-hand,
.doritike-gacha-animation.phase-rummage-b .doritike-scene-hand,
.doritike-gacha-animation.phase-hold .doritike-scene-hand {
  transform: translate(-110px, 6px);
}

.doritike-gacha-animation.phase-hand .doritike-scene-hand {
  animation: doritike-hand-down 280ms ease-out both;
}

.doritike-gacha-animation.phase-rummage .doritike-scene-bg,
.doritike-gacha-animation.phase-rummage-b .doritike-scene-bg {
  animation: doritike-rummage 420ms ease-in-out infinite;
}

.doritike-gacha-animation.phase-rummage .doritike-scene-box,
.doritike-gacha-animation.phase-rummage-b .doritike-scene-box {
  opacity: 1;

  animation: doritike-box 280ms ease-in-out infinite;
}

.doritike-gacha-animation.phase-rummage .doritike-scene-rummage,
.doritike-gacha-animation.phase-rummage-b .doritike-scene-rummage {
  opacity: 1;
}

.doritike-gacha-animation.phase-hold .doritike-scene-bg,
.doritike-gacha-animation.phase-hold .doritike-scene-box,
.doritike-gacha-animation.phase-hold .doritike-scene-rummage {
  animation: none;
}

.doritike-gacha-animation.phase-hold .doritike-scene-rummage {
  opacity: 0.35;
}

.doritike-gacha-animation.phase-return .doritike-scene-hand {
  opacity: 0;

  animation: doritike-hand-back 220ms ease-in both;
}

.doritike-gacha-animation.is-x10.phase-rummage .doritike-scene-bg,
.doritike-gacha-animation.is-x10.phase-rummage-b .doritike-scene-bg {
  animation-duration: 520ms;
}

#doritike-gacha-screen.is-tone-good .doritike-scene-flash {
  background:
    radial-gradient(
      ellipse 28% 36% at 50% 68%,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0) 72%
    );

  animation: doritike-pop 280ms ease-out both;
}

#doritike-gacha-screen.is-tone-jackpot .doritike-scene-flash {
  background:
    radial-gradient(
      ellipse 30% 38% at 50% 68%,
      rgba(255, 196, 110, 0.4) 0%,
      rgba(255, 196, 110, 0) 74%
    );

  animation: doritike-pop 320ms ease-out both;
}

#doritike-gacha-screen.is-tone-encore .doritike-scene-spot {
  background:
    radial-gradient(
      ellipse 16% 28% at 50% 64%,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0) 70%
    );

  animation: doritike-pop 420ms ease-out both;
}

@keyframes doritike-ticket-in {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes doritike-look {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.035);
  }
}

@keyframes doritike-hand-down {
  0% {
    opacity: 0;
    transform: translate(18px, -8px);
  }

  100% {
    opacity: 0.92;
    transform: translate(-22%, 8px);
  }
}

@keyframes doritike-hand-back {
  0% {
    opacity: 0.92;
    transform: translate(-22%, 8px);
  }

  100% {
    opacity: 0;
    transform: translate(12px, -10px);
  }
}

@keyframes doritike-rummage {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(2px);
  }
}

@keyframes doritike-box {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-5px);
  }
}

@keyframes doritike-pop {
  0% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@media (max-height: 400px) {

  .doritike-scene-line {
    width: min(200px, 34%);

    padding: 4px 7px;

    font-size: 11px;
  }

  #doritike-gacha-screen.is-presenting:not(.is-x10) .doritike-gacha-result-item {
    min-height: 56px;

    font-size: 15px;
  }

  #doritike-gacha-screen.is-presenting.is-x10 .doritike-gacha-result-item {
    padding: 3px 4px;

    font-size: 10px;
  }

  .doritike-scene-tap {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));

    font-size: 10px;
  }

}

@media (prefers-reduced-motion: reduce) {

  .doritike-gacha-animation.phase-ticket .doritike-scene-ticket,
  .doritike-gacha-animation.phase-look .doritike-scene-bg,
  .doritike-gacha-animation.phase-hand .doritike-scene-hand,
  .doritike-gacha-animation.phase-rummage .doritike-scene-bg,
  .doritike-gacha-animation.phase-rummage-b .doritike-scene-bg,
  .doritike-gacha-animation.phase-rummage .doritike-scene-box,
  .doritike-gacha-animation.phase-rummage-b .doritike-scene-box,
  .doritike-gacha-animation.phase-return .doritike-scene-hand,
  #doritike-gacha-screen.is-tone-good .doritike-scene-flash,
  #doritike-gacha-screen.is-tone-jackpot .doritike-scene-flash,
  #doritike-gacha-screen.is-tone-encore .doritike-scene-spot {
    animation: none !important;
  }

  .doritike-gacha-animation.phase-look .doritike-scene-bg,
  .doritike-gacha-animation.phase-rummage .doritike-scene-bg,
  .doritike-gacha-animation.phase-rummage-b .doritike-scene-bg {
    transform: none;
  }

  #doritike-gacha-screen.is-tone-good .doritike-scene-flash,
  #doritike-gacha-screen.is-tone-jackpot .doritike-scene-flash,
  #doritike-gacha-screen.is-tone-encore .doritike-scene-spot {
    opacity: 0.12;
  }

}

#enhance-screen,
#evolve-screen {
  flex-direction: column;

  background: #111;
}


#evolve-detail-screen {
  flex-direction: column;

  background: #111;
}

#evolve-detail-screen .training-header {
  height: 11%;

  min-height: 44px;
}

.evolve-detail-body {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  gap: 5px;

  overflow: hidden;

  padding:
    4px
    2.5vw
    max(
      22px,
      calc(16px + env(safe-area-inset-bottom, 0px))
    );
}

.evolve-detail-top {
  flex: 1 1 0;

  min-height: 0;

  width: 100%;

  display: flex;

  align-items: stretch;

  justify-content: center;

  overflow: hidden;
}

.evolve-detail-forms {
  display: grid;

  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);

  grid-template-rows: auto minmax(0, 1fr) auto;

  grid-template-areas:
    "label-current arrow label-next"
    "image-current arrow image-next"
    "meta-current . meta-next";

  align-items: center;

  justify-items: center;

  column-gap: 10px;

  row-gap: 2px;

  width: 100%;

  max-width: 720px;

  min-height: 0;

  height: 100%;

  overflow: hidden;
}

.evolve-detail-label-current {
  grid-area: label-current;
}

.evolve-detail-label-next {
  grid-area: label-next;
}

.evolve-detail-image-current {
  grid-area: image-current;
}

.evolve-detail-image-next {
  grid-area: image-next;
}

.evolve-detail-meta-current {
  grid-area: meta-current;
}

.evolve-detail-meta-next {
  grid-area: meta-next;
}

.evolve-detail-arrow {
  grid-area: arrow;

  align-self: center;

  justify-self: center;

  color: #ccc;

  font-size: clamp(20px, 3.5vw, 30px);

  line-height: 1;

  padding: 0;
}

.evolve-detail-meta {
  width: 100%;

  max-width: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0;

  text-align: center;

  line-height: 1.15;

  overflow: hidden;
}

.evolve-detail-form-label {
  color: #aaa;

  font-size: clamp(10px, 1.35vw, 13px);

  letter-spacing: 0.08em;

  line-height: 1.2;
}

.evolve-detail-image-wrap {
  box-sizing: border-box;

  width: auto;

  height: 100%;

  max-width: 86px;

  max-height: 112px;

  aspect-ratio: 3 / 4;

  min-height: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 2px solid #555;
  border-radius: 8px;

  background:
    linear-gradient(
      #222,
      #0a0a0a
    );
}

.evolve-detail-image-wrap img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  object-position: center;

  pointer-events: none;
}

.evolve-detail-image-wrap.is-silhouette {
  background:
    linear-gradient(
      #ffffff,
      #ececec
    );

  border-color: #c8c8c8;
}

.evolve-detail-image-wrap.is-silhouette img {
  filter: brightness(0);
}

.evolve-detail-locked {
  border-style: dashed;

  border-color: #666;

  background: #141414;
}

.evolve-detail-image-wrap.is-silhouette.evolve-detail-locked {
  background:
    linear-gradient(
      #ffffff,
      #ececec
    );

  border-color: #c8c8c8;
}

.evolve-detail-locked-mark {
  font-size: clamp(28px, 5.5vw, 44px);

  line-height: 1;

  color: #888;
}

.evolve-detail-compare {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 1px;

  width: min(38%, 200px);

  flex: 0 0 auto;

  padding: 3px 10px;

  border: 1px solid #444;
  border-radius: 6px;

  background: #141414;
}

.evolve-detail-compare-row {
  display: flex;

  flex-direction: row;

  align-items: baseline;

  justify-content: space-between;

  gap: 10px;

  font-size: clamp(11px, 1.5vw, 14px);

  line-height: 1.2;
}

.evolve-detail-compare-label {
  flex: 0 0 auto;

  min-width: 2.6em;

  color: #aaa;

  letter-spacing: 0.04em;
}

.evolve-detail-compare-values {
  flex: 1 1 auto;

  text-align: right;

  color: #ddd;

  font-variant-numeric: tabular-nums;

  letter-spacing: 0.04em;
}

.evolve-detail-number {
  color: #888;

  font-size: clamp(9px, 1.2vw, 11px);

  letter-spacing: 0.06em;
}

.evolve-detail-rarity {
  color: #ccc;

  font-size: clamp(9px, 1.25vw, 12px);
}

.evolve-detail-name {
  font-size: clamp(13px, 2.1vw, 20px);

  letter-spacing: 0.06em;
}

.evolve-detail-group {
  color: #aaa;

  font-size: clamp(10px, 1.3vw, 12px);
}

.evolve-detail-level {
  color: #ddd;

  font-size: clamp(11px, 1.45vw, 14px);
}

.evolve-detail-next-name {
  color: #888;

  font-size: clamp(13px, 2.1vw, 20px);

  letter-spacing: 0.12em;
}

.evolve-detail-next-note {
  color: #666;

  font-size: clamp(9px, 1.2vw, 11px);

  min-height: 0;
}

.evolve-detail-bottom {
  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 5px;

  width: 100%;

  margin-bottom: 0;
}

.evolve-detail-condition {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1px;

  padding: 3px 12px;

  border: 1px solid #555;
  border-radius: 6px;

  background: #161616;

  min-width: min(58%, 220px);
}

.evolve-detail-condition-title {
  color: #aaa;

  font-size: clamp(10px, 1.35vw, 13px);
}

.evolve-detail-condition-rule {
  font-size: clamp(13px, 1.8vw, 16px);

  line-height: 1.2;
}

.evolve-detail-condition-status {
  font-size: clamp(11px, 1.5vw, 14px);

  line-height: 1.2;
}

.evolve-detail-condition-status.is-met {
  color: #c8f0c8;
}

.evolve-detail-condition-status.is-unmet {
  color: #f0b0b0;
}

.evolve-detail-confirm {
  margin-top: 0;

  width: 58%;

  max-width: 168px;

  padding: 6px 12px;

  border: 2px solid #fff;
  border-radius: 6px;

  background:
    linear-gradient(
      #333,
      #151515
    );

  color: white;

  font-size: clamp(13px, 1.8vw, 16px);

  letter-spacing: 0.12em;

  cursor: pointer;
}

.evolve-detail-confirm:active:not(:disabled) {
  transform: scale(0.98);

  background: #444;
}

.evolve-detail-confirm:disabled {
  border-color: #666;

  color: #888;

  background: #1a1a1a;

  cursor: default;
}

.form-unlock-overlay {
  position: absolute;

  inset: 0;

  z-index: 80;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.88);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.22s ease;
}

.form-unlock-overlay[hidden] {
  display: none !important;
}

.form-unlock-overlay.is-visible {
  opacity: 1;

  pointer-events: auto;
}

.form-unlock-panel {
  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  max-width: min(70vw, 280px);

  text-align: center;

  transform: scale(0.92);

  opacity: 0;

  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
}

.form-unlock-overlay.is-visible .form-unlock-panel {
  transform: scale(1);

  opacity: 1;
}

.form-unlock-image {
  width: min(42vw, 160px);

  max-height: min(48vh, 200px);

  aspect-ratio: 3 / 4;

  object-fit: contain;

  object-position: center;

  display: block;

  pointer-events: none;

  filter: drop-shadow(0 0 18px rgba(255, 170, 60, 0.35));
}

.form-unlock-label {
  color: #fff;

  font-size: clamp(18px, 3.2vw, 28px);

  letter-spacing: 0.14em;
}

.form-unlock-name {
  color: #ddd;

  font-size: clamp(14px, 2.2vw, 20px);

  letter-spacing: 0.1em;
}

.debug-confirm-overlay {
  position: absolute;

  inset: 0;

  z-index: 90;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0, 0, 0, 0.72);

  padding: 3vh 4vw;
}

.debug-confirm-overlay[hidden] {
  display: none !important;
}

.debug-confirm-panel {
  width: min(78vw, 340px);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  padding: 14px 16px 12px;

  border: 2px solid #888;
  border-radius: 8px;

  background:
    linear-gradient(
      #2a2a2a,
      #121212
    );

  text-align: center;
}

.debug-confirm-title {
  color: #f0c060;

  font-size: clamp(16px, 2.8vw, 24px);

  letter-spacing: 0.18em;
}

.debug-confirm-message {
  margin: 0;

  color: #eee;

  font-size: clamp(13px, 2.1vw, 17px);

  line-height: 1.45;

  letter-spacing: 0.04em;
}

.debug-confirm-actions {
  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  margin-top: 4px;
}

.debug-confirm-cancel,
.debug-confirm-execute {
  flex: 1 1 0;

  min-width: 0;

  max-width: 140px;

  padding: 8px 10px;

  border-radius: 6px;

  font-size: clamp(13px, 2vw, 16px);

  letter-spacing: 0.08em;

  cursor: pointer;
}

.debug-confirm-cancel {
  border: 2px solid #777;

  background: #1a1a1a;

  color: #ccc;
}

.debug-confirm-execute {
  border: 2px solid #f0c060;

  background:
    linear-gradient(
      #3a3218,
      #1c1808
    );

  color: #ffe7a0;
}

.debug-confirm-cancel:active,
.debug-confirm-execute:active {
  transform: scale(0.98);
}

.enhance-filters {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  padding: 8px 3vw;

  background: #080808;

  border-bottom: 1px solid #555;
}

.enhance-filter {
  padding: 7px 10px;

  border: 1px solid #777;
  border-radius: 5px;

  background: #161616;

  color: #ddd;

  font-size: 11px;

  font-weight: bold;

  cursor: pointer;
}

.enhance-filter.is-selected {
  border-color: white;

  background: #333;

  color: white;
}

.enhance-list {
  flex: 1;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-content: start;

  gap: 8px;

  padding: 10px 2.5vw 18px;
}

.enhance-empty {
  grid-column: 1 / -1;

  margin-top: 24px;

  text-align: center;

  color: #888;

  font-size: 14px;
}

.enhance-card {
  display: block;

  width: 100%;

  min-width: 0;

  padding: 0;

  overflow: hidden;

  border: 2px solid #555;
  border-radius: 8px;

  background:
    linear-gradient(
      #292929,
      #101010
    );

  color: white;

  text-align: left;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

.enhance-card:active {
  transform: scale(0.98);

  background: #444;
}

.enhance-card-inner {
  display: flex;

  flex-direction: row;

  align-items: center;

  gap: 6px;

  width: 100%;

  min-height: 84px;

  padding: 7px;
}

.enhance-card-image {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.enhance-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  object-position: center;

  pointer-events: none;
}

.enhance-card-info {
  flex: 1 1 auto;

  min-width: 0;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  gap: 1px;
}

.enhance-card-rarity-row {
  display: flex;

  flex-direction: row;

  align-items: baseline;

  justify-content: space-between;

  gap: 4px;

  width: 100%;

  flex-shrink: 0;
}

.enhance-card-rarity,
.enhance-card-number,
.enhance-card-name,
.enhance-card-group,
.enhance-card-progress {
  flex-shrink: 0;

  max-width: 100%;

  line-height: 1.25;
}

.enhance-card-rarity {
  color: #ccc;

  font-size: 9px;

  font-weight: 400;

  min-width: 0;
}

.enhance-card-number {
  color: #888;

  font-size: 9px;

  font-weight: 400;

  letter-spacing: 0.02em;

  white-space: nowrap;
}

.enhance-card-name {
  font-size: 13px;

  font-weight: 400;
}

.enhance-card-group {
  color: #aaa;

  font-size: 10px;

  font-weight: 400;
}

.enhance-card-progress {
  color: #bbb;

  font-size: 10px;

  font-weight: 400;
}


#enhance-detail-screen {
  flex-direction: column;

  background: #111;
}

.enhance-detail-body {
  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: row;

  align-items: stretch;

  gap: 14px;

  overflow: hidden;

  padding: 8px 3vw 10px;
}

.enhance-detail-portrait {
  flex: 0 0 30%;

  display: flex;

  align-items: center;
  justify-content: center;

  min-width: 0;

  max-height: 100%;
}

.enhance-detail-image-wrap {
  width: min(100%, 168px);

  aspect-ratio: 3 / 4;

  max-height: min(58%, 210px);

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;

  border: 2px solid #555;
  border-radius: 8px;

  background:
    linear-gradient(
      #222,
      #0a0a0a
    );
}

.enhance-detail-image-wrap img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  object-position: center;

  pointer-events: none;
}

.enhance-detail-panel {
  flex: 1 1 auto;

  min-width: 0;

  max-height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  gap: 3px;

  padding: 0;

  overflow-x: hidden;

  overflow-y: auto;
}

.enhance-detail-number {
  color: #888;

  font-size: clamp(11px, 1.4vw, 14px);

  letter-spacing: 0.06em;
}

.enhance-detail-rarity {
  color: #ccc;

  font-size: clamp(11px, 1.5vw, 15px);
}

.enhance-detail-name {
  font-size: clamp(20px, 3vw, 30px);

  letter-spacing: 0.08em;
}

.enhance-detail-group {
  color: #aaa;

  font-size: clamp(12px, 1.6vw, 16px);
}

.enhance-detail-level {
  margin-top: 0;

  color: #ddd;

  font-size: clamp(13px, 1.9vw, 18px);
}

.enhance-detail-stats {
  display: flex;

  flex-direction: column;

  gap: 4px;

  margin-top: 4px;

  padding: 6px 10px;

  border: 1px solid #555;
  border-radius: 6px;

  background: #161616;
}

.enhance-detail-stat {
  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;
}

.enhance-detail-stat-label {
  color: #aaa;

  font-size: clamp(12px, 1.6vw, 16px);
}

.enhance-detail-stat-value {
  color: #fff;

  font-size: clamp(13px, 1.9vw, 18px);

  letter-spacing: 0.04em;
}

.enhance-detail-beats {
  display: flex;

  flex-direction: column;

  gap: 2px;

  margin-top: 4px;
}

.enhance-detail-beats-row {
  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  color: #bbb;

  font-size: clamp(12px, 1.7vw, 16px);
}

.enhance-detail-beats-row strong {
  color: #fff;

  font-weight: 400;
}

.enhance-detail-confirm {
  margin-top: 6px;

  width: 64%;

  max-width: 180px;

  align-self: center;

  padding: 8px 14px;

  border: 2px solid #fff;
  border-radius: 6px;

  background:
    linear-gradient(
      #333,
      #151515
    );

  color: white;

  font-size: clamp(14px, 2vw, 18px);

  letter-spacing: 0.12em;

  cursor: pointer;
}

.enhance-detail-confirm:active:not(:disabled) {
  transform: scale(0.98);

  background: #444;
}

.enhance-detail-confirm:disabled {
  border-color: #666;

  color: #888;

  background: #1a1a1a;

  cursor: default;
}

.enhance-detail-plus {
  display: flex;

  flex-direction: column;

  gap: 3px;

  margin-top: 8px;

  padding-top: 6px;

  border-top: 1px solid #333;
}

.enhance-detail-plus-title {
  color: #ddd;

  font-size: clamp(12px, 1.7vw, 15px);

  letter-spacing: 0.04em;

  line-height: 1.25;
}

.enhance-detail-plus-rows {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.enhance-detail-plus-row {
  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 12px;

  color: #bbb;

  font-size: clamp(12px, 1.7vw, 16px);
}

.enhance-detail-plus-row strong {
  color: #fff;

  font-weight: 400;
}

.enhance-detail-plus-confirm {
  margin-top: 4px;

  width: 64%;

  max-width: 180px;

  align-self: center;

  padding: 8px 14px;

  border: 2px solid #fff;
  border-radius: 6px;

  background:
    linear-gradient(
      #333,
      #151515
    );

  color: white;

  font-size: clamp(14px, 2vw, 18px);

  letter-spacing: 0.12em;

  cursor: pointer;
}

.enhance-detail-plus-confirm:active:not(:disabled) {
  transform: scale(0.98);

  background: #444;
}

.enhance-detail-plus-confirm:disabled {
  border-color: #666;

  color: #888;

  background: #1a1a1a;

  cursor: default;
}

.debug-menu-panel {
  width: min(82vw, 360px);

  max-height: min(86vh, 480px);

  gap: 8px;

  padding:
    max(12px, env(safe-area-inset-top, 0px))
    14px
    max(10px, env(safe-area-inset-bottom, 0px));

  overflow-x: hidden;

  overflow-y: auto;
}

.debug-menu-actions {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 6px;

  width: 100%;
}

.debug-menu-button {
  width: 100%;

  min-height: 36px;

  margin: 0;
  padding: 8px 10px;

  border: 1px solid #888;
  border-radius: 6px;

  background: #1c1c1c;

  color: #eee;

  font-size: clamp(13px, 2vw, 16px);

  letter-spacing: 0.04em;

  cursor: pointer;
}

.debug-menu-button:active {
  transform: scale(0.98);

  background: #333;
}

.debug-menu-close {
  width: 100%;

  max-width: none;

  margin-top: 4px;
}

.timeline-resource {
  justify-self: end;

  padding: 7px 12px;

  border: 1px solid #555;
  border-radius: 6px;

  background: #111;

  font-weight: bold;
}


/* 本体 */

.timeline-body {
  flex: 1;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


/* 横スクロール年表 */

.timeline-scroll {
  position: relative;

  flex: 1;

  display: flex;

  align-items: center;

  gap: 70px;

  padding:
    25px
    15vw;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;
}


/* 年表の線 */

.timeline-line {
  position: absolute;

  left: 12vw;

  width: 1600px;
  height: 5px;

  top: 50%;

  transform: translateY(-50%);

  background:
    linear-gradient(
      90deg,
      white,
      #555
    );

  z-index: 0;
}


/* 年ノード */

.year-node {
  position: relative;

  z-index: 2;

  flex: 0 0 135px;

  border: none;

  background: transparent;

  color: white;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 7px;

  cursor: pointer;
}

.year-circle {
  width: 70px;
  height: 70px;

  display: flex;

  justify-content: center;
  align-items: center;

  border-radius: 50%;

  border: 4px solid #777;

  background: #171717;

  font-size: 24px;

  font-weight: 1000;

  box-shadow:
    0 5px 15px #000;
}

.year-node strong {
  font-size: 16px;
}

.year-node small {
  color: #aaa;

  min-height: 25px;

  text-align: center;
}


/* 選択中 */

.year-node.unlocked .year-circle {
  border-color: white;

  background:
    radial-gradient(
      circle,
      #555,
      #111
    );
}

.year-node.selected .year-circle {
  transform: scale(1.15);

  box-shadow:
    0 0 0 5px rgba(255,255,255,0.15),
    0 7px 20px black;
}


/* ロック */

.year-node.locked {
  opacity: 0.45;

  cursor: default;
}

.year-node.locked .year-circle {
  filter: grayscale(1);
}

.year-node.is-cleared small {
  color: white;

  letter-spacing: 0.08em;
}

.year-node.is-current .year-circle {
  border-color: white;
}

#stage-start-button:disabled {
  opacity: 0.4;

  cursor: default;
}


/* =========================
   STAGE DETAIL
========================= */

.stage-detail {
  height: 28%;

  min-height: 105px;

  display: flex;

  justify-content: space-between;
  align-items: center;

  padding:
    12px
    6vw;

  background:
    linear-gradient(
      #181818,
      #070707
    );

  border-top: 2px solid #666;
}

.stage-label {
  color: #888;

  font-size: 10px;

  letter-spacing: 0.2em;
}

.stage-detail h4 {
  margin-top: 3px;

  font-size: clamp(26px, 4vw, 48px);
}

.stage-detail p {
  color: #bbb;

  font-size: clamp(12px, 1.4vw, 17px);

  font-weight: bold;
}

.stage-info {
  display: flex;

  align-items: center;

  gap: 25px;
}

.stage-info span {
  font-size: 14px;

  color: #bbb;
}

#stage-start-button {
  padding: 13px 40px;

  border: 3px solid white;
  border-radius: 7px;

  background:
    linear-gradient(
      #555,
      #111
    );

  color: white;

  font-size: clamp(16px, 2vw, 22px);

  font-weight: 1000;

  cursor: pointer;

  box-shadow:
    0 5px 0 #444;
}

#stage-start-button:active {
  transform: translateY(4px);

  box-shadow: none;
}
/* =========================
   BATTLE
========================= */

#battle-screen {
  flex-direction: column;

  background: #111;
}


/* =========================
   BATTLE HEADER
========================= */

.battle-header {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  z-index: 20;

  height: 11%;
  min-height: 48px;

  display: grid;

  grid-template-columns:
    1fr
    1fr
    1fr;

  align-items: center;

  padding: 0 2vw;

  background: transparent;

  border-bottom: none;

  pointer-events: none;
}


.battle-stage-name {
  display: flex;
  flex-direction: column;

  pointer-events: none;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.7);
}


.battle-stage-name small {
  color: #eee;

  font-size: 10px;
}


.battle-stage-name strong {
  font-size:
    clamp(
      13px,
      1.6vw,
      18px
    );
}


.battle-center {
  text-align: center;
}


.battle-pause-button {
  justify-self: end;

  pointer-events: auto;

  min-height: 36px;

  padding: 6px 13px;

  border: 1px solid #bbb;
  border-radius: 5px;

  background:
    rgba(0, 0, 0, 0.45);

  color: white;

  font-weight: bold;

  cursor: pointer;
}

.battle-pause-overlay {
  position: absolute;

  inset: 0;

  z-index: 40;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(0, 0, 0, 0.45);

  pointer-events: auto;
}

.battle-pause-overlay[hidden] {
  display: none !important;
}

.battle-pause-panel {
  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 10px;

  min-width: 220px;

  padding: 18px 22px;

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 8px;

  background:
    rgba(12, 12, 12, 0.82);
}

.battle-pause-title {
  text-align: center;

  letter-spacing: 0.28em;

  font-size:
    clamp(
      16px,
      2.4vw,
      22px
    );
}

.battle-pause-resume,
.battle-pause-quit {
  min-height: 44px;

  padding: 8px 16px;

  border: 1px solid #888;
  border-radius: 5px;

  color: white;

  font-weight: bold;

  cursor: pointer;
}

.battle-pause-resume {
  background: #2a2a2a;
}

.battle-pause-quit {
  background: #161616;
}


/* =========================
   FIELD
========================= */

#battle-viewport,
#battle-world,
#unit-layer,
#battle-world .base,
.battle-env-layer,
.battle-unit,
.battle-enemy,
.mosh-crowd {
  touch-action: none;

  -webkit-user-select: none;

  user-select: none;
}

#battle-viewport {
  position: relative;

  flex: 1;

  overflow: hidden;

  overscroll-behavior: none;

  background:
    linear-gradient(
      to bottom,
      #353535 0%,
      #242424 50%,
      #131313 51%,
      #080808 100%
    );
}

#battle-viewport.has-stage-environment {
  background: #080808;
}


#battle-world {
  position: absolute;

  inset: 0;

  transform-origin: 0 100%;
}


/* 地面 */

#battle-world::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 18%;

  background:
    linear-gradient(
      #222,
      #090909
    );

  border-top: 2px solid #555;

  z-index: 0;
}

#battle-world.has-stage-environment::after {
  content: none;
}


.battle-env-layer {
  position: absolute;

  pointer-events: none;
}

.battle-env-background {
  top: auto;

  bottom: 18%;

  overflow: visible;

  z-index: 0;

  background-repeat: no-repeat;

  background-position: center bottom;

  background-size: 100% auto;
}

.battle-env-ground {
  bottom: 0;

  height: 18%;

  z-index: 1;

  background-repeat: repeat-x;

  background-position: left bottom;

  background-size: auto 100%;
}


/* =========================
   BASE
========================= */

.base {
  position: absolute;

  bottom: 8%;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: center;
}


.player-base {
  left: 80px;
}


.enemy-base {
  left: 920px;
}


.van,
.enemy-building {
  font-size:
    clamp(
      50px,
      8vw,
      95px
    );

  filter:
    drop-shadow(
      0 8px 8px
      rgba(0,0,0,0.7)
    );
}


.floating-speaker {
  position: absolute;

  top: -28px;

  font-size:
    clamp(
      25px,
      4vw,
      45px
    );

  animation:
    speakerFloat
    1.8s
    ease-in-out
    infinite;
}


@keyframes speakerFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-7px);
  }

}


.base-name {
  margin-top: -5px;

  padding: 2px 8px;

  background:
    rgba(
      0,
      0,
      0,
      0.8
    );

  font-size: 11px;

  font-weight: 900;
}


.base-hp {
  width: 110px;
  height: 8px;

  margin-top: 4px;

  overflow: hidden;

  border: 1px solid white;

  background: #222;
}


.base-hp-bar {
  width: 100%;
  height: 100%;

  background: white;
}


.base small {
  margin-top: 2px;

  font-size: 8px;

  color: #bbb;
}


/* =========================
   UNIT LAYER
========================= */

#unit-layer {
  position: absolute;

  inset: 0;

  z-index: 3;
}

#projectile-layer {
  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;
}

.battle-projectile {
  position: absolute;

  bottom: 22%;

  pointer-events: none;
}

.battle-projectile img {
  display: block;

  height: auto;
}

.battle-knockback-effect {
  position: absolute;

  bottom: 18%;

  pointer-events: none;

  transform: translateX(-50%);
}

.battle-knockback-effect img {
  display: block;

  height: auto;
}


/* せな */

.battle-unit {
  position: absolute;

  bottom: 14%;

  left: 110px;

  right: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  transition:
    left
    0.1s
    linear;
}


.battle-unit .unit-body {
  font-size:
    clamp(
      34px,
      5vw,
      60px
    );

  filter:
    drop-shadow(
      0 6px 6px
      #000
    );
}

.battle-unit .unit-sprite {
  display: block;

  object-fit: contain;

  pointer-events: none;
}


.battle-unit .unit-label {
  padding: 1px 5px;

  background:
    rgba(
      0,
      0,
      0,
      0.8
    );

  font-size: 9px;

  font-weight: bold;
}


/* =========================
   BATTLE UI
========================= */

.battle-ui {
  height: 27%;

  min-height: 100px;

  display: grid;

  grid-template-columns:
    1.1fr
    3fr
    0.9fr;

  gap: 5px;

  padding: 6px;

  background: #050505;

  border-top: 2px solid #666;
}


/* =========================
   YANI
========================= */

.yani-panel {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.yani-display {
  flex: 1;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 3px;

  border: 1px solid #555;
  border-radius: 5px;

  background: #111;

  font-size:
    clamp(
      10px,
      1.3vw,
      15px
    );
}


#smoking-area-button {
  flex: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  border: 2px solid #777;
  border-radius: 6px;

  background:
    linear-gradient(
      #292929,
      #0c0c0c
    );

  color: white;

  cursor: pointer;
}


#smoking-area-button strong {
  font-size:
    clamp(
      14px,
      1.7vw,
      19px
    );
}


#smoking-area-button small {
  color: #aaa;

  font-size: 9px;
}


/* =========================
   UNIT PANEL
========================= */

.unit-panel {
  position: relative;

  overflow: hidden;
}


.unit-page {
  height: calc(100% - 15px);

  min-height: 0;
}


#battle-unit-cards {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 5px;

  width: 100%;

  height: 100%;

  min-width: 0;

  min-height: 0;

  touch-action: pan-x;
}

#battle-unit-cards .unit-card {
  min-width: 0;

  min-height: 0;
}


.unit-card {
  position: relative;

  min-width: 0;

  min-height: 0;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  gap: 2px;

  border: 2px solid #555;
  border-radius: 6px;

  background:
    linear-gradient(
      #262626,
      #0c0c0c
    );

  color: white;

  cursor: pointer;
}


.unit-card.available {
  border-color: white;
}


.unit-card.locked {
  opacity: 0.35;

  cursor: default;
}


.unit-card.not-enough {
  cursor: not-allowed;

  opacity: 1;

  filter: none;
}

.unit-card.not-enough:disabled {
  opacity: 1;

  color: white;
}

.unit-card.not-enough .unit-icon,
.unit-card.not-enough strong,
.unit-card.on-cooldown .unit-icon,
.unit-card.on-cooldown strong {
  opacity: 0.4;

  filter: brightness(0.55);
}

.unit-card.on-cooldown {
  cursor: not-allowed;

  opacity: 1;

  filter: none;
}

.unit-card.on-cooldown:disabled {
  opacity: 1;

  color: white;
}

.unit-card-cost {
  color: #f2f2f2;

  font-weight: 700;

  opacity: 1;

  filter: none;
}


.unit-card-cooldown {
  display: block;

  flex-shrink: 0;

  width: 100%;

  height: 3px;

  overflow: hidden;

  background:
    rgba(
      255,
      255,
      255,
      0.18
    );
}

.unit-card-cooldown[hidden] {
  display: none;
}

.unit-card-cooldown-fill {
  display: block;

  width: 0;

  height: 100%;

  background: #f2f2f2;
}


.unit-icon {
  flex: 1;

  min-height: 0;

  min-width: 0;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size:
    clamp(
      23px,
      3.7vw,
      43px
    );
}


.unit-card strong,
.unit-card small {
  flex-shrink: 0;
}


.unit-card strong {
  font-size:
    clamp(
      9px,
      1.1vw,
      13px
    );
}


.unit-card small {
  font-size: 9px;

  color: #aaa;
}


.page-indicator {
  height: 15px;

  display: flex;

  justify-content: center;
  align-items: center;

  gap: 8px;
}


.page-dot {
  width: 7px;
  height: 7px;

  padding: 0;

  border: none;
  border-radius: 50%;

  background: #555;

  cursor: pointer;
}


.page-dot.active {
  background: #f2f2f2;
}


/* =========================
   MOSH
========================= */

.mosh-panel {
  display: flex;
}


#mosh-button {
  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;
  align-items: center;

  border: 2px solid #666;
  border-radius: 6px;

  background:
    linear-gradient(
      #222,
      #090909
    );

  color: #888;

  font-weight: 900;
}


#mosh-button strong {
  font-size:
    clamp(
      11px,
      1.4vw,
      16px
    );
}


#mosh-button small {
  font-size: 9px;
}
/* =========================
   BATTLE CHARACTER
========================= */

.battle-unit,
.battle-enemy {
  position: absolute;

  bottom: 14%;

  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: 65px;
}

.battle-unit {
  left: 110px;

  right: auto;
}

.battle-enemy {
  left: 840px;

  right: auto;
}


/* キャラ本体 */

.unit-body,
.enemy-body {
  font-size: clamp(34px, 5vw, 58px);

  filter:
    drop-shadow(
      0 6px 5px
      rgba(0,0,0,0.8)
    );
}


/* 名前 */

.unit-label,
.enemy-label {
  padding: 1px 5px;

  background: rgba(0,0,0,0.85);

  color: white;

  font-size: 8px;

  font-weight: bold;

  white-space: nowrap;
}


/* HP */

.character-hp {
  width: 55px;
  height: 6px;

  margin-bottom: 2px;

  border: 1px solid white;

  background: #222;

  overflow: hidden;
}

.character-hp-bar {
  width: 100%;
  height: 100%;

  background: white;

  transition: width 0.15s;
}


/* 攻撃アニメーション */

.attacking {
  animation:
    attackMotion
    0.18s
    ease-out;
}

@keyframes attackMotion {

  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(12px);
  }

  100% {
    transform: translateX(0);
  }

}


.battle-enemy.attacking {
  animation:
    enemyAttackMotion
    0.18s
    ease-out;
}

@keyframes enemyAttackMotion {

  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-12px);
  }

  100% {
    transform: translateX(0);
  }

}


/* ダメージ */

.damaged {
  animation:
    damageFlash
    0.15s
    linear;
}

@keyframes damageFlash {

  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }

}


/* 撃破 */

.defeated {
  pointer-events: none;

  animation:
    defeatedMotion
    0.4s
    forwards;
}

@keyframes defeatedMotion {

  to {
    opacity: 0;

    transform:
      translateY(20px)
      rotate(20deg)
      scale(0.5);
  }

}
/* キャラクターHPバーは非表示 */
.character-hp {
  display: none;
}
/* 戦闘中のキャラ名を非表示 */
.unit-label,
.enemy-label {
  display: none;
}
/* =========================
   ENEMY VARIATIONS
========================= */

.bubble-enemy .enemy-body {
  font-size:
    clamp(
      45px,
      6vw,
      72px
    );
}


/* BOSS */

.boss-enemy {
  width: 90px;
}

.boss-enemy .enemy-body {
  font-size:
    clamp(
      65px,
      9vw,
      105px
    );

  filter:
    drop-shadow(
      0 0 15px
      rgba(255,255,255,0.4)
    );
}


/* =========================
   BOSS MESSAGE
========================= */

.boss-message {
  position: absolute;

  left: 50%;
  top: 35%;

  z-index: 1000;

  width: min(
    70vw,
    650px
  );

  padding: 18px 25px;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.4);

  opacity: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  background:
    rgba(
      0,
      0,
      0,
      0.92
    );

  border-top:
    3px solid white;

  border-bottom:
    3px solid white;

  text-align: center;

  pointer-events: none;

  transition:
    0.25s;
}


.boss-message-show {
  opacity: 1;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);
}


.boss-message small {
  color: #999;

  font-size: 10px;

  letter-spacing: 0.5em;
}


.boss-message strong {
  margin-top: 4px;

  font-size:
    clamp(
      20px,
      4vw,
      42px
    );

  font-weight: 1000;
}


.boss-message span {
  margin-top: 6px;

  font-size:
    clamp(
      11px,
      1.4vw,
      16px
    );

  color: #ccc;
}
/* =========================
   MOSH READY
========================= */

#mosh-button.mosh-ready {
  border-color: white;

  background:
    linear-gradient(
      #777,
      #111
    );

  color: white;

  cursor: pointer;

  box-shadow:
    0 0 15px
    rgba(255,255,255,0.7);

  animation:
    moshReadyPulse
    0.8s
    infinite
    alternate;
}


@keyframes moshReadyPulse {

  from {
    transform:
      scale(1);
  }

  to {
    transform:
      scale(1.04);
  }

}


/* =========================
   MOSH CROWD
========================= */

.mosh-crowd {
  position: absolute;

  left: -450px;

  bottom: 12%;

  z-index: 50;

  white-space: nowrap;

  font-size:
    clamp(
      35px,
      6vw,
      70px
    );

  filter:
    drop-shadow(
      0 5px 5px
      black
    );

  transition:
    left
    4s
    cubic-bezier(
      0.1,
      0.8,
      0.3,
      1
    );
}


/* =========================
   MOSH HIT
========================= */

.mosh-hit {
  animation:
    moshHit
    0.4s
    ease-out;
}


@keyframes moshHit {

  0% {
    transform:
      translateX(0)
      rotate(0);
  }

  35% {
    transform:
      translateX(25px)
      rotate(15deg)
      scale(1.25);
  }

  100% {
    transform:
      translateX(0)
      rotate(0)
      scale(1);
  }

}


/* =========================
   MOSH MESSAGE
========================= */

.mosh-message {
  position: absolute;

  left: 50%;
  top: 38%;

  z-index: 2000;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(2.5);

  opacity: 0;

  display: flex;
  flex-direction: column;

  align-items: center;

  pointer-events: none;

  text-shadow:
    4px 4px 0 black;
}


.mosh-message-show {
  opacity: 1;

  transform:
    translate(
      -50%,
      -50%
    )
    scale(1);

  transition:
    0.12s;
}


.mosh-message small {
  font-size: 11px;

  letter-spacing: 0.5em;
}


.mosh-message strong {
  font-size:
    clamp(
      50px,
      10vw,
      120px
    );

  line-height: 0.9;

  font-weight: 1000;
}


.mosh-message span {
  font-size:
    clamp(
      18px,
      3vw,
      35px
    );

  font-weight: 1000;
}


/* =========================
   SCREEN SHAKE
========================= */

.mosh-shake #battle-viewport {
  animation:
    moshScreenShake
    0.12s
    6;
}


@keyframes moshScreenShake {

  0% {
    transform:
      translate(0,0);
  }

  25% {
    transform:
      translate(-7px,3px);
  }

  50% {
    transform:
      translate(7px,-3px);
  }

  75% {
    transform:
      translate(-4px,-2px);
  }

  100% {
    transform:
      translate(0,0);
  }

}
/* =========================
   PROLOGUE
========================= */

#prologue-screen {
  background:
    radial-gradient(
      circle at center,
      #181818 0%,
      #050505 65%,
      #000 100%
    );

  color: white;

  align-items: center;
  justify-content: center;

  text-align: center;

  cursor: pointer;
}


.prologue-content {
  width: 85%;
  max-width: 800px;
}


.prologue-line {
  opacity: 0;

  font-size:
    clamp(
      16px,
      2.5vw,
      25px
    );

  line-height: 1.8;

  margin: 12px 0;

  animation:
    prologueFade
    1.2s
    forwards;
}


.prologue-line:nth-child(1) {
  animation-delay: 0.5s;
}

.prologue-line:nth-child(2) {
  animation-delay: 1.7s;
}

.prologue-line:nth-child(3) {
  animation-delay: 2.9s;
}

.prologue-line:nth-child(4) {
  animation-delay: 4.3s;
}


.prologue-final {
  opacity: 0;

  margin-top: 24px;

  font-size:
    clamp(
      25px,
      5vw,
      48px
    );

  font-weight: 900;

  letter-spacing: 0.08em;

  animation:
    prologueFade
    1.5s
    5.6s
    forwards;
}


#prologue-start {
  opacity: 0;

  margin-top: 35px;

  padding: 12px 28px;

  border: 1px solid white;

  background: transparent;
  color: white;

  font-size: 14px;

  letter-spacing: 0.2em;

  cursor: pointer;

  animation:
    prologueStart
    1.2s
    7.2s
    infinite;
}


@keyframes prologueFade {

  from {
    opacity: 0;
    transform:
      translateY(8px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}


@keyframes prologueStart {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }

}
/* =========================
   MOBILE LANDSCAPE
========================= */

@media screen and (max-height: 500px) {

  #prologue-screen {
  justify-content: center;
  padding: 5px 20px;
  box-sizing: border-box;
}

.prologue-line {
  font-size: 17px;
  margin: 4px 0;
  line-height: 1.25;
}

.prologue-final {
  font-size: 28px;
  margin: 8px 0;
  line-height: 1.15;
}

#prologue-start {
  font-size: 15px;
  margin-top: 6px;
  padding: 10px 24px;
}

}
@media screen and (max-height: 500px) {

  #game {
  width: 100vw;
  height: var(--app-height, 100dvh);
  overflow: hidden;
}
  .screen {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  #home-screen,
  #timeline-screen {
    transform: scale(0.88);
    transform-origin: top center;
    width: 113.6%;
    height: 113.6%;
    left: -6.8%;
  }

}
#title-screen {
  position: relative;
  overflow: hidden;
}

#title-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  z-index: 0;
}

#title-screen .title-box {
  position: relative;
  z-index: 1;
}
.unit-character-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =========================
   BACKSTAGE / FORMATION
   Base art: 1672 x 941
========================= */

#formation-screen {
  align-items: center;
  justify-content: center;

  overflow: hidden;

  min-height: 0;

  background: #050505;

  --formation-ui-font: var(--font-ui);
}

.formation-stage {
  position: relative;

  width: min(
    100%,
    calc(var(--app-height, 100dvh) * 1672 / 941)
  );

  aspect-ratio: 1672 / 941;

  flex: 0 0 auto;

  line-height: 0;

  container-type: inline-size;
}

.formation-base-img {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;

  user-select: none;

  image-rendering: pixelated;
}

.formation-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;
}

.formation-hotspot {
  position: absolute;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: transparent;

  font-size: 0;

  appearance: none;

  -webkit-appearance: none;
}

.formation-hotspot-back {
  left: 5.5%;
  top: 7.4%;

  width: 11.1%;
  height: 7.5%;

  cursor: pointer;
}

.formation-hotspot-auto {
  left: 78.8%;
  top: 7.4%;

  width: 14.9%;
  height: 7.6%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-save {
  left: 35.2%;
  top: 81.9%;

  width: 29.2%;
  height: 10.9%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter[data-filter="ALL"] {
  left: 12.7%;
  top: 69.9%;

  width: 5.5%;
  height: 4.7%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter[data-filter="IPPANJIN"] {
  left: 19.5%;
  top: 69.9%;

  width: 5.9%;
  height: 4.7%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter[data-filter="BANDMAN"] {
  left: 26.7%;
  top: 69.9%;

  width: 5.9%;
  height: 4.7%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter[data-filter="HEADLINER"] {
  left: 33.9%;
  top: 69.9%;

  width: 6.8%;
  height: 4.7%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter[data-filter="LEGEND"] {
  left: 42.0%;
  top: 69.9%;

  width: 5.9%;
  height: 4.7%;

  z-index: 7;

  cursor: pointer;
}

.formation-hotspot-filter.is-selected {
  box-shadow:
    inset 0 0 0 1px rgba(200, 230, 255, 0.85),
    inset 0 0 8px rgba(140, 200, 255, 0.35);
}

.formation-count {
  position: absolute;

  display: flex;

  align-items: center;
  justify-content: flex-end;

  box-sizing: border-box;

  padding: 0 0.3%;

  background: #0d0e10;

  color: #ece8e0;

  font-family: var(--formation-ui-font);

  font-size: clamp(7px, 1.35cqw, 13px);

  font-weight: 700;

  letter-spacing: 0.06em;

  white-space: nowrap;

  pointer-events: none;
}

.formation-count-owned {
  left: 43.7%;
  top: 22.4%;

  width: 4.4%;
  height: 2.6%;
}

.formation-count-deck {
  left: 83.4%;
  top: 22.4%;

  width: 5.0%;
  height: 2.6%;
}

.formation-slots {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.formation-owned-list {
  position: absolute;

  left: 13.22%;
  top: 31.03%;

  width: 34.63%;
  height: 34.43%;

  z-index: 2;

  display: flex;

  flex-direction: row;

  align-items: stretch;

  box-sizing: border-box;

  overflow-x: auto;
  overflow-y: hidden;

  pointer-events: auto;

  -webkit-overflow-scrolling: touch;

  scroll-snap-type: x mandatory;

  background: #101114;

  box-shadow:
    inset 0 0 0 2px #2a2c30;

  scrollbar-width: none;
}

.formation-owned-list::-webkit-scrollbar {
  display: none;
}

.formation-slot {
  position: absolute;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: flex-end;

  overflow: hidden;

  border: 0;

  padding: 0;

  background: transparent;

  color: #ece8e0;

  line-height: 1.15;

  pointer-events: auto;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;
}

.formation-owned-card {
  position: relative;

  flex: 0 0 25%;

  width: 25%;
  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: flex-end;

  overflow: hidden;

  box-sizing: border-box;

  margin: 0;
  padding: 1.6% 2.2%;

  border: 0;

  background: transparent;

  color: #ece8e0;

  line-height: 1.15;

  pointer-events: auto;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  scroll-snap-align: start;
}

.formation-owned-card.is-selected::after,
.formation-slot.is-selected::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 6;

  box-shadow:
    inset 0 0 0 2px #eaf4ff,
    inset 0 0 10px rgba(150, 205, 255, 0.4);

  pointer-events: none;
}

.formation-slot.empty {
  background: transparent;
}

.formation-owned-card:disabled {
  opacity: 1;

  color: #ece8e0;
}

.formation-notice {
  position: absolute;

  left: 50%;
  top: 50%;

  z-index: 8;

  transform: translate(-50%, -50%);

  padding: 0.8% 1.8%;

  background: #0a0a0a;

  border: 1px solid #ece8e0;

  color: #ece8e0;

  font-family: var(--formation-ui-font);

  font-size: clamp(8px, 1.2cqw, 13px);

  font-weight: 700;

  letter-spacing: 0.06em;

  white-space: nowrap;

  line-height: 1.3;

  opacity: 0;

  pointer-events: none;
}

.formation-notice.is-visible {
  opacity: 1;
}

.formation-form-detail {
  position: absolute;

  inset: 0;

  z-index: 20;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    max(2vh, env(safe-area-inset-top, 0px))
    max(2vw, env(safe-area-inset-right, 0px))
    max(2vh, env(safe-area-inset-bottom, 0px))
    max(2vw, env(safe-area-inset-left, 0px));
}

.formation-form-detail[hidden] {
  display: none !important;
}

.formation-form-detail-backdrop {
  position: absolute;

  inset: 0;

  margin: 0;
  padding: 0;

  border: 0;

  background: rgba(0, 0, 0, 0.62);

  cursor: pointer;
}

.formation-form-detail-panel {
  position: relative;

  z-index: 1;

  width: min(94%, 580px);

  max-height: min(94%, 360px);

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 8px 10px 10px;

  border: 2px solid #777;
  border-radius: 8px;

  background:
    linear-gradient(
      #262626,
      #101010
    );

  overflow: hidden;

  box-sizing: border-box;
}

.formation-form-detail-close {
  align-self: flex-end;

  flex: 0 0 auto;

  margin: 0;
  padding: 4px 10px;

  border: 1px solid #777;
  border-radius: 4px;

  background: #1a1a1a;

  color: #ddd;

  font-family: var(--formation-ui-font);

  font-size: clamp(11px, 1.6vw, 14px);

  cursor: pointer;
}

.formation-form-detail-body {
  display: grid;

  grid-template-columns:
    minmax(84px, 34%)
    minmax(0, 1fr);

  align-items: start;

  column-gap: 12px;

  min-height: 0;

  flex: 1 1 auto;

  overflow: hidden;
}

.formation-form-detail-art {
  grid-column: 1;

  width: 100%;

  max-width: 140px;

  max-height: min(62vh, 240px);

  aspect-ratio: 3 / 4;

  justify-self: center;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border: 2px solid #555;
  border-radius: 6px;

  background:
    linear-gradient(
      #222,
      #0a0a0a
    );

  box-sizing: border-box;
}

.formation-form-detail-art img {
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  object-position: center;

  pointer-events: none;
}

.formation-form-detail-info {
  grid-column: 2;

  min-width: 0;

  max-height: 100%;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-start;

  gap: 3px;

  overflow-x: hidden;

  overflow-y: auto;
}

.formation-form-detail-number,
.formation-form-detail-rarity,
.formation-form-detail-name,
.formation-form-detail-group,
.formation-form-detail-level,
.formation-form-detail-status {
  position: static;

  display: block;

  flex: 0 0 auto;

  width: 100%;

  margin: 0;

  font-family: var(--formation-ui-font);

  line-height: 1.25;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.formation-form-detail-number {
  color: #888;

  font-size: clamp(10px, 1.3vw, 12px);

  min-height: 1.25em;
}

.formation-form-detail-rarity {
  color: #ccc;

  font-size: clamp(11px, 1.4vw, 13px);

  min-height: 1.25em;
}

.formation-form-detail-name {
  color: #fff;

  font-size: clamp(15px, 2.2vw, 20px);

  letter-spacing: 0.06em;

  min-height: 1.3em;
}

.formation-form-detail-group {
  color: #aaa;

  font-size: clamp(11px, 1.4vw, 13px);

  min-height: 1.25em;
}

.formation-form-detail-level {
  color: #ddd;

  font-size: clamp(12px, 1.6vw, 15px);

  min-height: 1.25em;
}

.formation-form-detail-stats {
  flex: 0 0 auto;

  width: 100%;

  margin-top: 4px;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.formation-form-detail-stat {
  display: grid;

  grid-template-columns: 3em 1fr;

  align-items: baseline;

  column-gap: 10px;

  width: 100%;

  max-width: 240px;

  font-family: var(--formation-ui-font);

  font-size: clamp(12px, 1.6vw, 15px);

  line-height: 1.3;

  color: #ccc;
}

.formation-form-detail-stat strong {
  color: #fff;

  font-weight: 400;

  font-variant-numeric: tabular-nums;

  text-align: right;
}

.formation-form-detail-switch {
  flex: 0 0 auto;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 8px;

  margin-top: 6px;
}

.formation-form-detail-arrow {
  flex: 0 0 auto;

  width: 34px;
  height: 30px;

  margin: 0;
  padding: 0;

  border: 1px solid #777;
  border-radius: 4px;

  background: #1a1a1a;

  color: #eee;

  font-size: clamp(12px, 1.8vw, 16px);

  cursor: pointer;
}

.formation-form-detail-arrow:disabled {
  opacity: 0.35;

  cursor: default;
}

.formation-form-detail-form-label {
  flex: 0 0 auto;

  min-width: 4.8em;

  text-align: center;

  color: #fff;

  font-family: var(--formation-ui-font);

  font-size: clamp(13px, 1.9vw, 17px);

  letter-spacing: 0.08em;

  line-height: 1.2;
}

.formation-form-detail-status {
  flex: 0 0 auto;

  min-height: 1.2em;

  margin-top: 2px;

  color: #c8f0c8;

  font-size: clamp(11px, 1.5vw, 14px);
}

.formation-form-detail-use {
  flex: 0 0 auto;

  margin-top: 4px;

  width: min(100%, 200px);

  padding: 7px 12px;

  border: 2px solid #fff;
  border-radius: 6px;

  background:
    linear-gradient(
      #333,
      #151515
    );

  color: #fff;

  font-family: var(--formation-ui-font);

  font-size: clamp(13px, 1.9vw, 16px);

  letter-spacing: 0.08em;

  cursor: pointer;
}

.formation-form-detail-use:disabled {
  border-color: #666;

  color: #888;

  background: #1a1a1a;

  cursor: default;
}

.formation-form-detail-use:active:not(:disabled) {
  transform: scale(0.98);
}

.formation-owned-detail-button {
  position: absolute;

  top: 4%;
  right: 4%;

  z-index: 5;

  min-width: 34px;
  min-height: 22px;

  margin: 0;
  padding: 2px 6px;

  border: 1px solid #bbb;
  border-radius: 3px;

  background: rgba(20, 20, 20, 0.88);

  color: #fff;

  font-family: var(--formation-ui-font);

  font-size: clamp(8px, 1.2cqw, 11px);

  letter-spacing: 0.04em;

  line-height: 1.2;

  cursor: pointer;

  pointer-events: auto;
}

.formation-owned-detail-button:active {
  transform: scale(0.96);
}

.formation-cover {
  position: absolute;

  inset: 0;

  z-index: 1;

  background: #151618;
}

.formation-owned-art,
.formation-slot-art {
  position: relative;

  z-index: 2;

  flex: 1;

  min-height: 0;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: center;

  overflow: hidden;
}

.formation-slot-art {
  position: absolute;

  inset: 0;

  flex: none;
}

.formation-owned-art img,
.formation-slot-art img {
  max-width: 100%;

  max-height: 100%;

  width: auto;

  height: auto;

  object-fit: contain;

  image-rendering: auto;
}

.formation-card-meta {
  position: relative;

  z-index: 3;

  flex-shrink: 0;

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  padding: 4% 3% 6%;

  color: #ece8e0;

  font-family: var(--formation-ui-font);

  text-align: center;

  pointer-events: none;
}

.formation-slot .formation-card-meta {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  flex-shrink: unset;

  padding: 2% 2% 4%;
}

.formation-card-meta strong {
  display: block;

  width: 100%;

  font-size: clamp(7px, 1.15cqw, 12px);

  font-weight: 700;

  letter-spacing: 0.04em;

  line-height: 1.15;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.formation-card-yani {
  display: block;

  width: 100%;

  margin-top: 0.15em;

  color: #d4d0c8;

  font-size: clamp(6px, 0.95cqw, 10px);

  font-weight: 700;

  letter-spacing: 0.03em;

  line-height: 1.15;

  white-space: nowrap;
}

.formation-slot .formation-card-meta strong {
  font-size: clamp(5px, 0.85cqw, 9px);
}

.formation-slot .formation-card-yani {
  font-size: clamp(4px, 0.72cqw, 8px);
}


/* =========================
   GAME UI FONT (cascade lock)
   DotGothic16 is Regular-only.
   Keep this after component rules so
   later font-weight: 900/1000 do not
   force faux-bold on game UI text.
========================= */

.game-ui-font,
h1,
h2,
h3,
.title-small,
.main-button,
#prologue-start,
.rank,
.resource,
.year-label,
.home-message strong,
.home-message p,
.character-name,
.menu-button,
.back-button,
.training-header h3,
.training-choice,
.gacha-lobby-choice-title,
.gacha-lobby-choice-copy,
.doritike-gacha-tickets,
.doritike-gacha-desc,
.doritike-gacha-message,
.bs-gacha-balance,
.bs-gacha-guarantee,
.bs-gacha-message,
.bs-gacha-pull,
.bs-gacha-prompt-title,
.bs-gacha-pay-note,
.bs-gacha-prompt-button,
.bs-gacha-confirm-text,
.bs-gacha-reveal-number,
.bs-gacha-reveal-rarity,
.bs-gacha-reveal-name,
.bs-gacha-reveal-group,
.bs-gacha-reveal-status,
.bs-gacha-reveal-progress,
.bs-gacha-reveal-tap,
.bs-gacha-summary-title,
.bs-gacha-summary-rarity,
.bs-gacha-summary-name,
.bs-gacha-summary-status,
.bs-gacha-summary-close,
.doritike-gacha-pull,
.doritike-gacha-result-item,
.doritike-gacha-result-back,
.doritike-anim-line-text,
.doritike-anim-skip,
.doritike-anim-rummage-text,
.doritike-gacha-result-line,
.enhance-filter,
.enhance-card,
.enhance-empty,
.enhance-card-rarity,
.enhance-card-number,
.enhance-card-name,
.enhance-card-group,
.enhance-card-progress,
.enhance-detail-panel,
.enhance-detail-confirm,
.evolve-detail-body,
.evolve-detail-confirm,
.evolve-detail-compare,
.form-unlock-label,
.form-unlock-name,
.debug-confirm-title,
.debug-confirm-message,
.debug-confirm-cancel,
.debug-confirm-execute,
.timeline-header h3,
.timeline-resource,
.year-node,
#rotate-message {
  font-family: var(--font-ui);

  font-weight: 400;

  font-synthesis: none;
}

/* HOME画面
→ sena_menu.webp

バトルの出撃ボタン
→ sena_menu.webp

戦場に出撃
→ sena_idle.webp

攻撃
→ sena_attack.webp

ノックバック
→ sena_hurt.webp

死亡
→ sena_hurt.webp → 消滅
*/