/* =========================================================================
   タイトル・プレイヤー選択・ステージ開始テロップ・終了画面
   文字（UI）の後ろや前にキャラクターを重ね、UIを「空間の一部」として扱う
   ========================================================================= */

.screen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 画面の入り（各画面共通） */
.intro .enter-up,
.enter-up.always {
  animation: enter-up 0.5s var(--spring) both;
  animation-delay: var(--d, 0s);
}

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.enter-left {
  animation: enter-left 0.5s var(--spring) both;
  animation-delay: var(--d, 0s);
}

@keyframes enter-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* 流れ続けるテロップ帯 */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  height: 22px;
  overflow: hidden;
  background: var(--accent);
  color: #121212;
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.25em;
  white-space: nowrap;
  transform: skewY(-3deg);
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 18s linear infinite;
  line-height: 22px;
}

.ticker.rev span {
  animation-direction: reverse;
}

@keyframes ticker {
  to {
    transform: translateX(-100%);
  }
}

/* ------------------------------------------------------------- タイトル */

.title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
}

.title-screen .ticker.top {
  top: 6%;
}

.title-screen .ticker.bottom {
  bottom: 30%;
  background: #111;
  color: var(--accent);
  transform: skewY(-3deg);
}

.title-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 24vh;
}

/* ロゴ（キャラクターの後ろ） */
.title-logo {
  position: relative;
  z-index: 1;
  text-align: center;
  line-height: 0.95;
}

.intro .title-logo {
  animation: enter-up 0.7s var(--spring) both;
}

.title-logo .t0 {
  display: block;
  font-family: var(--font-num);
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.title-logo .t1 {
  display: block;
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--accent);
  transform: skewX(-8deg);
}

.title-logo .t2 {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 15vw, 74px);
  color: #fff;
  transform: skewX(-8deg);
  text-shadow: 4px 4px 0 #000, 0 0 30px rgba(255, 210, 63, 0.35);
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
}

.title-logo .t3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) skewX(-8deg);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(70px, 26vw, 140px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  z-index: -1;
  letter-spacing: -0.02em;
}

/* キャラクター（ロゴの手前に重ねる） */
.title-chars {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  height: min(170px, 23dvh);
  margin-top: 4px;
}

.title-char {
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.intro .title-char {
  animation: enter-up 0.6s var(--spring) both;
  animation-delay: var(--d, 0s);
}

.title-char img {
  height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
  animation: bob 2.6s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}

.title-char.mai {
  height: 72%;
}

@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
}

.title-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  width: 100%;
  max-width: 320px;
}

.title-actions .btn.big {
  width: 100%;
}

.title-note {
  position: relative;
  z-index: 3;
  margin: 12px 0 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--muted);
}

/* ------------------------------------------------------------- プレイヤー選択 */

.select-screen {
  --pc: var(--accent);
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 0 max(14px, env(safe-area-inset-bottom));
}

.select-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
}

.select-head h2 {
  font-size: 20px;
  transform: skewX(-8deg);
}

.select-head small {
  font-family: var(--font-num);
  letter-spacing: 0.3em;
  color: var(--muted);
  font-size: 10px;
}

.select-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
}

/* キャラクターの後ろの斜め帯（キャラ色） */
.select-band {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 22%;
  height: 46%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc) 70%, transparent) 30%, var(--pc) 60%, transparent);
  transform: rotate(var(--band, -8deg));
  opacity: 0.55;
  transition: transform 0.6s var(--spring), background 0.4s;
}

.select-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 10px);
  animation: stripes-drift 6s linear infinite;
}

/* 英字の名前（キャラクターの後ろ） */
.select-name-bg {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translate(-50%, -50%) skewX(-10deg);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: clamp(90px, 34vw, 190px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--pc) 70%, white);
  opacity: 0.35;
  white-space: nowrap;
  animation: name-slide 0.6s var(--spring) both;
}

@keyframes name-slide {
  from {
    transform: translate(-30%, -50%) skewX(-10deg);
    opacity: 0;
  }
}

/* キャラクター（カメラ位置・ズーム・角度を毎回変える） */
.select-figure {
  position: absolute;
  left: 50%;
  bottom: 23%;
  height: 62%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transform: translateX(calc(-50% + var(--cx, 0%))) translateY(var(--cy, 0%)) rotate(var(--cr, 0deg)) scale(var(--cs, 1));
  transform-origin: 50% 100%;
  animation: figure-in 0.55s var(--spring) both;
}

.select-figure img {
  height: 100%;
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.45));
  animation: bob 2.8s ease-in-out infinite;
}

.select-figure.mai {
  height: 46%;
  bottom: 28%;
}

@keyframes figure-in {
  from {
    opacity: 0;
    transform: translateX(calc(-50% + var(--cx, 0%) + var(--from, 40%))) translateY(var(--cy, 0%)) rotate(var(--cr, 0deg))
      scale(calc(var(--cs, 1) * 0.92));
    filter: blur(4px);
  }
}

/* 名前とスキルのプレート（キャラクターの手前） */
.select-plate {
  position: absolute;
  left: max(14px, calc(50% - 260px));
  right: max(14px, calc(50% - 260px));
  bottom: 2%;
  z-index: 3;
  padding: 10px 14px 12px;
  animation: enter-left 0.5s var(--spring) both;
  animation-delay: 0.08s;
}

.select-plate .p-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.1;
  transform: skewX(-8deg);
  color: #fff;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--pc) 70%, black);
}

.select-plate .p-skill {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  background: var(--pc);
  color: #111;
  font-weight: 700;
  font-size: 12px;
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.select-plate .p-short {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.select-tabs {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 0;
}

.player-tab {
  position: relative;
  overflow: hidden;
  width: 74px;
  height: 64px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(180deg, #2a2e3b, #15171e);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: transform 0.2s var(--spring);
}

.player-tab img {
  position: absolute;
  left: 50%;
  top: 4px;
  transform: translateX(-50%);
  width: 60px;
  height: 116px;
  object-fit: cover;
  object-position: top;
}

.player-tab.mai img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.player-tab.active {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 2px var(--tc), inset 0 -5px 0 var(--tc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 75%, #20232c), color-mix(in srgb, var(--tc) 30%, #15171e));
}

.select-actions {
  flex: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 12px 14px 0;
}

.select-actions .btn.big {
  flex: 1;
  max-width: 260px;
}

/* ------------------------------------------------------------- ステージ開始テロップ */

.stage-telop {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: all;
  overflow: hidden;
  background: rgba(5, 6, 10, 0.55);
  animation: fade-in 0.2s ease both;
}

.stage-telop.leave {
  animation: fade-out 0.3s ease forwards;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

.telop-band {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 38%;
  height: 120px;
  background: linear-gradient(90deg, #0d0f15, #1a1e2a 50%, #0d0f15);
  border-top: 4px solid var(--accent);
  border-bottom: 4px solid var(--accent);
  transform: rotate(-6deg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 18%;
  gap: 14px;
  animation: band-in 0.45s cubic-bezier(0.7, 0, 0.2, 1) both;
}

@keyframes band-in {
  from {
    transform: rotate(-6deg) scaleX(0);
  }
}

.telop-band .t-small {
  font-family: var(--font-num);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--accent-2);
  font-size: 16px;
  writing-mode: vertical-rl;
}

.telop-band .t-num {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 88px;
  line-height: 1;
  color: #fff;
  text-shadow: 4px 4px 0 var(--accent);
  animation: telop-num 0.5s var(--spring) 0.15s both;
}

/* レイドボスのウェーブ */
.stage-telop.boss .telop-band {
  border-color: #ff4f6d;
  background: linear-gradient(90deg, #1a0408, #3c0a16 50%, #1a0408);
}

.stage-telop.boss .telop-band .t-small {
  color: #ff8fa3;
}

.stage-telop.boss .telop-band .t-num {
  font-size: clamp(40px, 13vw, 72px);
  text-shadow: 4px 4px 0 #b0142f;
  white-space: nowrap;
}

@keyframes telop-num {
  from {
    transform: scale(2.2);
    opacity: 0;
  }
}

.telop-figure {
  position: absolute;
  right: 2%;
  bottom: 24%;
  height: 44%;
  z-index: 2;
  animation: telop-figure 0.5s var(--spring) 0.2s both;
}

.telop-figure img {
  height: 100%;
  filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, 0.5));
}

.telop-figure.mai {
  height: 30%;
  bottom: 30%;
}

@keyframes telop-figure {
  from {
    transform: translateX(60%);
    opacity: 0;
  }
}

.telop-chips {
  position: absolute;
  left: 8%;
  top: calc(38% + 140px);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 60%;
  z-index: 3;
}

.telop-chips span {
  padding: 3px 10px;
  background: rgba(13, 15, 21, 0.9);
  border-left: 3px solid var(--accent);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: enter-left 0.4s var(--spring) both;
  animation-delay: var(--d, 0.3s);
}

/* ------------------------------------------------------------- 終了画面 */

.end-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  gap: 10px;
}

.end-hero {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: min(220px, 30dvh);
  flex: none;
}

.end-band {
  position: absolute;
  left: -20%;
  right: -20%;
  top: 30%;
  height: 72px;
  background: linear-gradient(90deg, #0d0f15, #222839, #0d0f15);
  border-top: 3px solid var(--accent);
  border-bottom: 3px solid var(--accent);
  transform: rotate(-6deg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16%;
  animation: band-in 0.5s cubic-bezier(0.7, 0, 0.2, 1) both;
}

.end-screen.over .end-band {
  border-color: #6b7286;
}

.end-band h1 {
  font-size: clamp(22px, 7.4vw, 36px);
  transform: skewX(-8deg);
  color: #fff;
  text-shadow: 3px 3px 0 var(--accent);
}

.end-screen.over .end-band h1 {
  text-shadow: 3px 3px 0 #444a5c;
}

.end-figure {
  position: absolute;
  right: 2%;
  bottom: 0;
  height: 100%;
  z-index: 2;
  animation: telop-figure 0.5s var(--spring) 0.25s both;
}

.end-figure img {
  height: 100%;
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.5));
}

.end-figure.mai {
  height: 62%;
  bottom: 10%;
}

.end-box {
  width: 100%;
  max-width: 460px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.end-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

.end-stats div {
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.end-stats span {
  color: var(--muted);
  font-size: 10px;
}

.end-stats b {
  font-family: var(--font-num);
  font-size: 20px;
}

.end-party {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}

.end-party .unit-card {
  height: 70px;
}

.end-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 300px;
}

.end-actions .btn.big {
  width: 100%;
}

@media (max-height: 640px) {
  .title-logo .t2 {
    font-size: clamp(40px, 13vw, 60px);
  }

  .title-chars {
    height: min(150px, 24dvh);
  }

  .telop-band {
    height: 96px;
  }

  .telop-band .t-num {
    font-size: 70px;
  }
}

/* タイトルのサウンド切り替え（BGMは最初のタップで鳴り始める） */
.title-sound {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 5;
  width: 38px;
  height: 38px;
  color: var(--accent);
}

.title-sound.off {
  color: var(--muted);
}

.title-sound .speaker {
  display: flex;
  width: 22px;
  height: 22px;
  margin: auto;
}

.title-sound .speaker svg {
  width: 100%;
  height: 100%;
}