/* =========================================================
   トラック合体タワー 共通デザイントークン
   テーマ: オレンジ暖色 × やわらかフロート × まるっとポップ
   ========================================================= */
:root {
  /* --- Palette（暖色オレンジ・やわらか） --- */
  --bg-1: #fff6ec;
  --bg-2: #ffe6cf;
  --bg-3: #ffd9b8;
  --surface: #fffaf4;          /* カード面 */
  --surface-2: #fff0e0;        /* 一段沈んだ面 */
  --surface-sunken: #ffe9d6;   /* プレイ面の上側 */
  --surface-sunken-2: #ffcf9f; /* プレイ面の下側 */

  --primary: #ff8c42;          /* メインのオレンジ */
  --primary-strong: #ef6c1f;
  --primary-soft: #ffd9b0;
  --secondary: #ffc15a;        /* イエローオレンジ */

  --accent-green: #56c08a;     /* 成功・1P */
  --accent-red: #ef5a5a;       /* 失敗・2P */
  --p1: #2fa873;
  --p2: #e8604c;

  /* --- UDアニマルズ公式サイトの配色をそろえたもの ---
     出典: recruit.udt-hokkaido.co.jp/udanimals/ の算出スタイル。
     ロゴまわりの装飾はこの4色で組んでいる。 */
  --brand-brown: #a25236;      /* 公式の見出しの茶 */
  --brand-brown-deep: #9f4826; /* 公式のキャラ名の茶 */
  --brand-cream: #fffd82;      /* 差し色の淡い黄 */
  --brand-base: #ffb864;       /* 公式の地色 */

  --text: #5a3d2a;             /* 温かいブラウン */
  --text-muted: #a8866340;     /* placeholder, overwritten below */
  --text-soft: #a78363;
  --text-on-primary: #ffffff;
  --line: rgba(180, 130, 80, 0.22);
  --line-strong: rgba(180, 130, 80, 0.4);

  /* --- 角丸 --- */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* --- 影（やわらかフロート） --- */
  --shadow-sm: 0 2px 8px rgba(165, 110, 60, 0.14);
  --shadow: 0 8px 22px rgba(165, 110, 60, 0.18);
  --shadow-lg: 0 16px 40px rgba(165, 110, 60, 0.22);
  --shadow-press: 0 3px 10px rgba(165, 110, 60, 0.16);
  --ring: 0 0 0 3px rgba(255, 140, 66, 0.28);

  /* --- 余白 --- */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;

  /* --- タイポ（丸ゴシック優先） --- */
  /* 公式サイトと同じ丸ゴシック優先。"M PLUS Rounded 1c" が正式名
     （旧称の "Rounded Mplus 1c" ではどの環境にも当たらない）。
     CSPが font-src 'self' なのでWebフォントは読めず、端末にある場合のみ効く。 */
  --font: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Quicksand",
    system-ui, -apple-system, "Segoe UI", "Hiragino Sans", Meiryo, sans-serif;
  --fw-bold: 700;
  --fw-black: 800;

  /* --- トランジション --- */
  --t-fast: 0.08s ease-out;
  --t: 0.16s ease-out;
}

:root {
  --text-muted: #a78363;
}

/* =========================================================
   ゲームロゴ風タイトル（.game-logo）
   立体的な白抜き文字 ＋ 濃いオレンジの太フチ ＋ 下方向の積み重ね影で
   どんな背景でも沈まない高コントラストなゲームロゴに。
   ========================================================= */
.game-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  margin: var(--space-3) 0 var(--space-3);
  padding: 0;
  line-height: 1;
}

/* 上段：公式ロゴ画像（img/ud-animals-logo.png）。
   ★CSSで文字を装飾するのはやめ、公式サイトのファーストビューと同じ
     デザイン済みロゴをそのまま使っている（原本は UD_logo.png）。
     デザインを変えたいときはCSSではなく画像を差し替えること。 */
.game-logo__brand-img {
  display: block;
  /* ★下段の「路上整備ゲーム」(.game-logo__title) と釣り合う大きさにすること。
     片方だけ大きくすると不釣り合いに見える。
     大画面ではさらに下の「大きな画面の拡大」ブロックで両方とも拡大している。 */
  width: min(88vw, 520px);
  height: auto;
  margin-bottom: -2px;
  filter: drop-shadow(0 5px 12px rgba(150, 70, 20, 0.28));
  animation: logo-brand-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes logo-brand-pop {
  0% {
    transform: scale(0.86) translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* 下段：ゲーム名（白抜き＋濃フチ＋立体） */
.game-logo__title {
  display: inline-block;
  font-family: var(--font);
  font-size: clamp(2.3rem, 9vw, 3.8rem);
  font-weight: var(--fw-black);
  letter-spacing: 0.012em;
  line-height: 1.02;
  color: #fff;
  -webkit-text-stroke: 4px var(--primary-strong);
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #c2480f,
    0 5px 0 #a53d0c,
    0 7px 0 #8f350a,
    0 11px 14px rgba(95, 40, 8, 0.45);
  animation: logo-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes logo-pop {
  0% { transform: scale(0.82) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

@media (min-width: 768px) {
  .game-logo__title { font-size: 4rem; }
}

/* スマホでは左上の「採用サイトに戻る」(y 10〜50) がロゴの左上に重なるので、
   タイトルのロゴを その下から始める。
   ★.game-logo はタイトル画面にしか無いので、ゲーム画面の縦幅は削られない
     （ゲーム画面では戻るボタン自体が .is-hidden で消える）。 */
@media (max-width: 780px) {
  .game-logo {
    margin-top: 46px;
  }
}

/* =========================================================
   ミュートボタン（画面右上固定・全ページ共通）
   ========================================================= */
/* 右上だと対戦レーンのトラックに重なるので右下に置く。
   スマホのホームバー等を避けるため safe-area ぶんずらす。 */
.mute-button {
  position: fixed;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  right: calc(10px + env(safe-area-inset-right, 0px));
  z-index: 50;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
}

.mute-button:hover {
  box-shadow: var(--shadow);
}

.mute-button:active {
  transform: scale(0.94);
}

.mute-button.is-muted {
  opacity: 0.55;
}

/* 効果音用の2つ目のボタン（Web公開版・オフライン版とも存在する）。
   ★横に並べず「上に積む」こと。横に並べると右端から108px占有することになり、
     フッターのロゴ帯（.footer-logos の max-width で70px空けている）に
     重なってしまう。縦に積めば専有幅は1つぶんのままで済む。 */
.mute-button--se {
  bottom: calc(62px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
   SNSシェア（X / LINE / その他）— 対戦・ソロ共通
   ロゴ画像は使わず文字だけにしている（各社のブランド利用規約を
   気にしなくてよいのと、画像を増やさずに済むため）。
   ========================================================= */
.share-row {
  width: 100%;
  max-width: 420px;
  margin-top: var(--space-2);
  text-align: center;
}

.share-label {
  margin: 0 0 var(--space-1);
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.share-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}

.share-btn {
  flex: 1 1 0;
  min-width: 92px;
  /* 指で押しやすい高さ（約40px）になるよう縦paddingを確保している */
  padding: 12px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: var(--fw-bold);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t);
}

.share-btn:hover {
  box-shadow: var(--shadow);
}

.share-btn:active {
  transform: scale(0.96);
}

.share-btn--x {
  background: #000;
}

.share-btn--line {
  background: #06c755;
}

/* OS標準の共有シート（使えない環境ではURLコピーになる） */
.share-btn--native {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}

@media (max-width: 400px) {
  .share-btn {
    min-width: 0;
    font-size: 0.78rem;
    padding: 12px 6px; /* 幅は詰めても高さは維持する */
  }
}

/* =========================================================
   左上の「もどる」（親サイトへ戻るリンク）
   ミュートボタン（右下）と対になる固定要素。
   ========================================================= */
.back-link {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: calc(10px + env(safe-area-inset-left, 0px));
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 16px 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: transform var(--t), box-shadow var(--t), opacity var(--t);
}

.back-link:hover {
  box-shadow: var(--shadow);
  transform: translateX(-2px);
}

.back-link:active {
  transform: scale(0.96);
}

.back-link__arrow {
  color: var(--primary-strong);
  font-weight: var(--fw-black);
}

/* ゲーム画面のあいだは隠す（上部のバトルレーンに重なるため） */
.back-link.is-hidden {
  display: none;
}

/* =========================================================
   ページ最下部のロゴ（提供・協力）
   パララックス背景の上に乗るので、白の半透明パネルで下敷きを作る。
   ========================================================= */
.site-footer {
  position: relative;
  z-index: 1; /* #parallax-bg(0) より前に出す */
  width: 100%;
  /* 中身が短いときは画面の下へ押し下げる（#app が縦フレックスなので効く） */
  margin-top: auto;
  /* 右下のミュートボタンと重ならないよう下に余白を足している。
     ★ボタンは BGM用・効果音用の2つを縦に積んでいる（44px + 8px + 44px）。
       実測: 100px 未満にすると 375x812 で上のボタンがロゴ帯に重なる。 */
  padding: var(--space-4) var(--space-3) calc(var(--space-4) + 100px);
}

/* PCではフッターは中央寄せの帯なので、右下のミュートボタンとは横位置で
   よけられる。下余白を削って、そのぶんを盤面の高さに回す。
   ★下余白を削る代わりに .footer-logos の幅を絞ってボタンを避けている。
     どちらか片方だけにするとミュートボタンがロゴに重なる。 */
@media (min-width: 900px) {
  .site-footer {
    padding-bottom: var(--space-3);
  }
}

.footer-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  max-width: 920px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  list-style: none;
  border-radius: var(--r-lg);
  background: rgba(255, 250, 244, 0.86);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.footer-logos li {
  display: flex;
}

.footer-logos a {
  display: block;
  transition: transform var(--t), opacity var(--t);
}

.footer-logos a:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* 元画像の縦横比がばらばらなので、高さを揃えて並べる */
.footer-logos img {
  display: block;
  width: auto;
  height: 42px;
  max-width: 62vw;
  object-fit: contain;
}

/* 右下のミュートボタン(44px + 余白)ぶんだけ左右を空けて、重なりを避ける */
@media (min-width: 900px) {
  .footer-logos {
    max-width: min(920px, calc(100vw - 140px));
  }
}

@media (max-width: 560px) {
  .footer-logos {
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
  }

  .footer-logos img {
    height: 34px;
  }
}

/* 音源クレジット表示用（音源はすべて CC0。出典は CREDITS.md） */
.credit {
  margin: var(--space-2) 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.credit a {
  color: var(--primary-strong);
  text-decoration: none;
  font-weight: var(--fw-bold);
}

.credit a:hover {
  text-decoration: underline;
}