/* 整個網站的樣式。 */

/* 「DEFUSION STUDIO」的字：遊戲的 Barlow Condensed Bold（只留英文字母那一段，110KB → 17KB；授權在旁邊的 OFL.txt） */
@font-face {
  font-family: "Barlow Condensed";
  src: url(/assets/fonts/BarlowCondensed-Bold.woff2) format("woff2");
  font-weight: 700;
}

/* ═══ 顏色表 —— 值與名字照遊戲 Assets/UI/AppScreen.uss 開頭的顏色表。網站的顏色只寫在這裡，其他地方一律 var(--名字)。 */
:root {
  --page-bg: #FFFFFF;                  /* 文字頁的白底（遊戲的 --panel） */
  --text: #16202E;                     /* 一般的字 */
  --text-body: #4B5668;                /* 一段話 */
  --text-title: #13294B;               /* 標題、DEFUSION STUDIO、選著的那一個 */
  --text-sub: #5A6575;                 /* 頁尾、選單裡沒選著的 */
  --divider: #E6EAF0;                  /* 頁尾上緣那條線 */
  --panel-soft: #F5F7FA;               /* 淺一階的底（聯絡我們放 email 那一塊） */
  --panel-border: #DDE2EA;
  --row-hover: #EEF1F5;                /* 選單裡游標指著的那一行 */
  --icon: #111111;                     /* 地球：黑色、沒有底框（他看 Cloudflare 的截圖定的；遊戲表上沒有，網站自己的） */
  --menu-shadow: rgba(19, 41, 75, .18);
  --button-primary: #D2283C;           /* 主要的按鈕：實心紅、白字、下緣暗一截 */
  --button-primary-edge: #9E1B2B;
  --button-primary-text: #FFFFFF;
  /* 首頁 */
  --home-bg: #F2F4F7;                  /* 切面的背景圖還沒載到時（遊戲的 --app-bg） */
  --title-box: rgba(255, 255, 255, .78); /* 正中間那個框：白色半透明 */
  --title-bar: #D2283C;                /* DEFUSION STUDIO 底下那條紅線（遊戲的強調紅） */
  --home-foot-bg: rgba(255, 255, 255, .72);
  --player-edge: rgba(19, 41, 75, .45);  /* 球員的陰影「深一點＋細邊」：貼著人的細邊 */
  --player-shadow: rgba(19, 41, 75, .22); /*                         ⋯⋯與往下落的影子 */
}

/* ═══ 字型：每種語言用它自己的字（同一個漢字，中文和日文的字形不一樣）。
   只設在有 lang 的元素上（<html> 與地球選單裡的五個），其他的往下繼承。 */
[lang] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
[lang|="zh"] { font-family: -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
[lang="ja"] { font-family: -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif; }
[lang="ko"] { font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }

/* ═══ 文字頁：頁首、內容、頁尾；內容短的時候頁尾也貼在最下面 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--page-bg); color: var(--text); line-height: 1.6;
}
main { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: 32px 16px 64px; }
h1 { margin: 0 0 12px; font-size: 28px; line-height: 1.3; color: var(--text-title); }
h2 { margin: 36px 0 10px; font-size: 20px; line-height: 1.4; color: var(--text-title); }
h3 { margin: 28px 0 8px; font-size: 17px; line-height: 1.4; color: var(--text-title); }
p { margin: 0 0 16px; color: var(--text-body); }
ul, ol { margin: 0 0 16px; padding-left: 1.4em; color: var(--text-body); }
li { margin-bottom: 6px; }
main b { color: var(--text-title); } /* 遊戲裡按的字（刪除帳號頁的「帳號設定」） */
main :is(p, li) a:not(.button-primary) { color: var(--text-title); text-underline-offset: 2px; } /* 句子裡的連結（隱私權政策的 email、刪除帳號頁） */
.updated { font-size: 14px; color: var(--text-sub); } /* 隱私權政策大標題底下「最後更新」 */

/* ── 頁首：左上角 DEFUSION STUDIO（點了回首頁）、右上角地球 */
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 10px 12px 18px; }
.logo {
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 24px; line-height: 1;
  letter-spacing: .04em; color: var(--text-title); text-decoration: none;
}

/* ── 地球：點了往下開五種語言（<details>，不跑 JavaScript 也打得開） */
.globe { position: relative; }
.globe summary {
  display: flex; align-items: center; gap: 3px; padding: 8px;
  color: var(--icon); cursor: pointer; list-style: none;
}
.globe summary::-webkit-details-marker { display: none; }
.globe .menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 10;
  min-width: 140px; margin: 0; padding: 6px 0; list-style: none;
  background: var(--page-bg); border-radius: 10px; box-shadow: 0 6px 24px var(--menu-shadow);
}
.globe .menu a { display: block; padding: 8px 16px; color: var(--text-sub); text-decoration: none; white-space: nowrap; }
.globe .menu a:hover { background: var(--row-hover); }
.globe .menu a[aria-current] { color: var(--text-title); font-weight: 700; }

/* ── 頁尾：左邊三個連結、右邊 Threads */
.foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding: 14px 16px 14px 20px; border-top: 1px solid var(--divider);
  font-size: 13px; color: var(--text-sub);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; min-width: 0; }
.foot a { color: var(--text-sub); text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--text-title); }
.threads { display: flex; flex: none; padding: 4px; }
.threads svg { width: 20px; height: 20px; fill: currentColor; }

/* ── 聯絡我們、刪除帳號：email 寫大、整串一點就選起來（好複製）；底下一顆寫信的按鈕 */
.mail-box {
  margin: 28px 0; padding: 24px 16px; text-align: center;
  background: var(--panel-soft); border: 1px solid var(--panel-border); border-radius: 14px;
}
.mail {
  margin: 0 0 18px; font-size: clamp(17px, 5vw, 22px); font-weight: 600; color: var(--text-title);
  user-select: all; -webkit-user-select: all; overflow-wrap: anywhere;
}

/* 主要的按鈕（照遊戲的 .button-primary）：按下去下緣變薄、整顆往下沉同樣的距離，旁邊的東西不跟著跳 */
.button-primary {
  display: inline-block; padding: 12px 28px; border-radius: 10px;
  background: var(--button-primary); color: var(--button-primary-text);
  border-bottom: 4px solid var(--button-primary-edge);
  font-weight: 700; text-decoration: none;
}
.button-primary:active { border-bottom-width: 2px; margin-top: 2px; }

/* ── 找不到這一頁：大標題底下一顆回首頁的按鈕 */
.back { margin-top: 28px; }

/* ═══ 首頁：遊戲的白色切面背景，正中間白色半透明的框放 DEFUSION STUDIO 和一句話；
   去背的球員在框後面浮上來、停幾秒淡掉（assets/home.js 放位置，這裡管樣子）。右上角地球、頁尾跟文字頁同一套。 */
body.home { background: var(--home-bg) url(/assets/home-bg.jpg) center / cover no-repeat; }
.home .top { justify-content: flex-end; }
.home main { display: flex; align-items: center; justify-content: center; max-width: none; padding: 16px; }
.home .foot { border-top: 0; background: var(--home-foot-bg); backdrop-filter: blur(6px); }

.title {
  text-align: center; padding: 28px 36px; border-radius: 14px;
  background: var(--title-box); backdrop-filter: blur(6px);
}
.title h1 {
  margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700;
  font-size: clamp(44px, 12vw, 84px); letter-spacing: .04em; line-height: 1;
}
.title h1::after { content: ""; display: block; width: 56px; height: 4px; margin: 16px auto; border-radius: 2px; background: var(--title-bar); }
.title p { margin: 0; color: var(--text-sub); font-size: clamp(15px, 2.4vw, 19px); letter-spacing: .08em; }
.title p span { display: inline-block; } /* 「・」前後兩段各自不拆（pages.js） */
@media (max-width: 500px) { .title { padding: 22px 26px; } }

/* 球員：在所有東西後面（z-index -1：背景之上、標題與頁尾之下），點不到 */
.players { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.player {
  position: absolute;
  /* 被圖邊切掉的身體淡出：四邊各一條漸層（左右 14%、上 5%、底 24%；遮罩只看透不透明，#000 是「不透明」不是顏色）。
     原圖透明的地方淡不淡都一樣，所以只有碰到圖邊的部分會淡。 */
  --fade: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
          linear-gradient(to bottom, transparent 0, #000 5%, #000 76%, transparent 100%);
  -webkit-mask-image: var(--fade); -webkit-mask-composite: source-in;
  mask-image: var(--fade); mask-composite: intersect;
  /* 人後面一層陰影：白球衣在白底上會糊 */
  filter: drop-shadow(0 0 1.5px var(--player-edge)) drop-shadow(0 8px 16px var(--player-shadow));
  opacity: 0; transform: translateY(22px);
  transition: opacity 1.3s ease, transform 1.3s ease;
}
.player.on { opacity: 1; transform: translateY(0); }