/* 共通 UI フォント (#370) */
@import url("/assets/fonts/kosugi-maru/kosugi-maru.css");
@import url("/assets/fonts/orbitron/orbitron.css");

/* タイトルロゴ用 筆記体フォント (#1049) */
@import url("https://fonts.googleapis.com/css2?family=Allura&family=Great+Vibes&display=swap");

/* 楽譜表紙風タイトル装飾 (#464) - song-select ジャケットカード用 */
@import url("/assets/fonts/cinzel-decorative/cinzel-decorative.css");

/* 曲ごとフォント (#370) */
@import url("/assets/fonts/kaisei-decol/kaisei-decol.css");
@import url("/assets/fonts/shippori-mincho/shippori-mincho.css");
@import url("/assets/fonts/hachi-maru-pop/hachi-maru-pop.css");
@import url("/assets/fonts/stick/stick.css");
@import url("/assets/fonts/klee-one/klee-one.css");
@import url("/assets/fonts/reggae-one/reggae-one.css");

/* スクロールバー非表示 + iOS のバウンス/スワイプ戻る抑制 (#613) */
html,
body {
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.87);
  background-color: #000000;
  font-family: "Kosugi Maru", sans-serif;
  /* タップ時のハイライト / 長押しメニュー / テキスト選択を無効化 (軌跡操作の体験向上) (#613) */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

canvas {
  touch-action: none;
}

#app {
  width: 100%;
  height: 100vh;
  @supports (height: 100dvh) {
    height: 100dvh;
  }
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- タイトル画面ロゴ "Penlight as Takt" (#1049) ----
 * 筆記体 + ネオングローの文字のみ。装飾図形は無し。
 * PixiJS キャンバスの上に HTML overlay として重ね、タイトル overlay 表示中だけ DOM に存在する。
 */
.pat-logo-anchor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 50;
}

.pat-logo {
  position: relative;
  margin-top: 6%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  white-space: nowrap;
  font-family: "Allura", "Great Vibes", cursive;
  color: #f0fbff;
  font-weight: 400;
  line-height: 1;
  text-shadow:
    0 0 1px #ffffff,
    0 0 5px #ffffff,
    0 0 12px #aeeaff,
    0 0 22px #4cc9ff,
    0 0 38px #2496ec,
    0 0 60px #1e90ff;
}

.pat-logo__penlight,
.pat-logo__as,
.pat-logo__takt {
  display: inline-block;
  white-space: nowrap;
}

.pat-logo__penlight,
.pat-logo__takt {
  /* キャンバススケール (--pat-scale) と連動させ、小画面でもボタンと比率を保つ (#1064) */
  font-size: calc(144px * var(--pat-scale, 1));
}

.pat-logo__as {
  font-size: calc(48px * var(--pat-scale, 1));
  letter-spacing: 0.05em;
  align-self: center;
  color: #ffe24c;
  text-shadow:
    0 0 1px #ffffff,
    0 0 5px #fff4a8,
    0 0 12px #ffd84a,
    0 0 22px #ffb800,
    0 0 38px #ff9d00;
}

/* ロゴ下の説明文 (#1049): 一瞬で「どんなゲームか」が分かる構造 */
.pat-summary {
  /* キャンバススケール (--pat-scale) と連動させ、小画面でもボタンと比率を保つ (#1064) */
  margin-top: calc(44px * var(--pat-scale, 1));
  text-align: center;
  font-family: "Kosugi Maru", sans-serif;
  color: #d6e3ec;
  letter-spacing: 0.03em;
  line-height: 1.55;
}

.pat-summary__line {
  margin: 0;
}

.pat-summary__line--main {
  font-size: calc(32px * var(--pat-scale, 1));
  margin-bottom: 0.2em;
}

.pat-summary__line--sub {
  font-size: calc(24px * var(--pat-scale, 1));
  opacity: 0.92;
}

.pat-summary__keyword {
  font-weight: 700;
  color: #aeeaff;
  font-size: 1.15em;
}

.pat-summary__eq {
  margin: 0 0.5em;
  color: #f0fbff;
  font-weight: 400;
  opacity: 0.75;
}

.pat-summary__genre {
  font-weight: 700;
  color: #ffe24c;
  font-size: 1.12em;
  margin-left: 0.4em;
}

/* ---- 曲選択画面の compact ロゴ (#1068) ----
 * タイトル画面と同じ .pat-logo を縮小し、panel-right の上部中央に表示する。
 * 位置 (left, top) は CreditView.updatePosition() が JS から panel-right の
 * world 座標 → viewport scale 経由で計算してセットする。
 * `transform: translateX(-50%)` で left が anchor 中心の x 座標として機能する。
 */
.pat-logo-anchor--compact {
  /* 既存 .pat-logo-anchor の inset: 0 を上書きし、JS 指定の left/top で配置する */
  inset: auto;
  width: auto;
  align-items: center;
  transform: translateX(-50%);
}

.pat-logo-anchor--compact .pat-logo {
  margin-top: 0;
}

.pat-logo-anchor--compact .pat-logo__penlight,
.pat-logo-anchor--compact .pat-logo__takt {
  font-size: calc(56px * var(--pat-scale, 1));
}

.pat-logo-anchor--compact .pat-logo__as {
  font-size: calc(20px * var(--pat-scale, 1));
}