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

/* 「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-hover: #BC2234;     /* 游標移到按鈕上：暗一階（下緣照舊） */
  --button-primary-text: #FFFFFF;
  --button-disabled-bg: #E6EAF0;       /* 按鈕按不了（報名表送出去、還沒回來） */
  --button-disabled-text: #9AA4B2;
  /* 報名表（遊戲頁） */
  --input-bg: #FFFFFF;
  --input-border: #1E3A66;             /* 輸入欄的框（遊戲的 --accent） */
  --input-error: #C62F3A;              /* 格式不對、送不出去 */
  --input-done: #1E7A45;               /* 報名成功（遊戲的 --win） */
  --signup-panel: #FFFFFF;             /* 遊戲頁報名那一塊：實心白，在切面上最顯眼 */
  --signup-summary: #1E3A66;           /* 報名那一塊標題底下的重點（日期、平台、地區；遊戲的 --accent） */
  --signup-shadow: rgba(19, 41, 75, .16);
  --focus-ring: #1E3A66;               /* 用鍵盤移到按鈕、輸入欄時的框（遊戲的 --accent） */
  --selection: rgba(227, 169, 21, .35); /* 選取文字的底色（遊戲的金） */
  /* 首頁 */
  --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); /*                         ⋯⋯與往下落的影子 */
  /* 遊戲列表 */
  --game-card-shadow: rgba(19, 41, 75, .14);       /* 卡片的影子：比報名那一塊淡 */
  --game-card-shadow-hover: 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; }
/* 換行：韓文照詞（字之間有空格，預設會從詞中間斷）；日文照詞組（Chrome 才有，其他瀏覽器照舊） */
[lang="ko"] { word-break: keep-all; }
[lang="ja"] { word-break: auto-phrase; }

/* ═══ 文字頁：頁首、內容、頁尾；內容短的時候頁尾也貼在最下面 */
*, *::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); } /* 隱私權政策大標題底下「最後更新」 */
/* 瀏覽器自己畫的部分也照顏色表：選取文字的底色、輸入的游標、用鍵盤移到按鈕和連結時的框 */
::selection { background: var(--selection); }
input { caret-color: var(--text-title); }
:is(a, button, input, summary):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ── 頁首：左上角 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; }

/* ── 頁尾：左邊四個連結（遊戲・隱私權政策・刪除帳號・聯絡我們）、右邊這種語言的社群帳號 */
.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); }
.social { display: flex; flex: none; padding: 4px; }
.social 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）：實心紅、白字、下緣暗一截。
   下緣是影子畫的（不佔位子），底下用 margin-bottom 留同樣高的空；按下去整顆往下沉 2px、下緣變薄 2px —— 只動畫面、不動排版，
   旁邊的東西不跟著跳，放在哪裡都不用另外補。自己設 margin 的地方只設 margin-top（不然底下那 4px 會不見） */
.button-primary {
  display: inline-block; padding: 12px 28px; margin-bottom: 4px; border-radius: 10px;
  background: var(--button-primary); color: var(--button-primary-text);
  box-shadow: 0 4px 0 var(--button-primary-edge);
  font-weight: 700; text-decoration: none;
}
/* 只給有游標的：手機、平板點過之後會一直停在暗的那個顏色 */
@media (hover: hover) { .button-primary:hover { background: var(--button-primary-hover); } }
.button-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--button-primary-edge); }
/* 做成 <button> 的（報名表送出）：拿掉瀏覽器自己的框與字型 */
button.button-primary { border: 0; font: inherit; font-weight: 700; line-height: inherit; cursor: pointer; }
button.button-primary:disabled {
  background: var(--button-disabled-bg); color: var(--button-disabled-text);
  box-shadow: 0 4px 0 var(--button-disabled-bg); transform: none; cursor: default;
}

/* ── 找不到這一頁：大標題底下一顆回首頁的按鈕 */
.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); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.title {
  text-align: center; padding: 28px 36px; border-radius: 14px;
  background: var(--title-box); -webkit-backdrop-filter: blur(6px); 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） */
/* 那一句底下的「Nine Stars 封測報名中」：首頁唯一的按鈕，自己一行置中；擠不下一行時兩行差不多長 */
.title .button-primary { display: block; width: fit-content; max-width: 100%; margin-inline: auto; margin-top: 26px; font-size: 17px; }
.title .button-primary span { display: inline-block; } /* 遊戲名字、後面那段各自不拆（pages.js 的 betaButton） */
@media (max-width: 500px) {
  .title { padding: 22px 26px; }
  .title .button-primary { margin-top: 22px; padding: 12px 22px; font-size: 16px; }
}
/* 矮的畫面（手機打橫）：寬度夠、照電腦的大小排的話框太高，要往下捲、頁尾跑到畫面外 —— 字和間距照高度縮小，一個畫面放得下 */
@media (max-height: 500px) {
  .title { padding: 18px 28px; }
  .title h1 { font-size: clamp(44px, 14vh, 84px); }
  .title h1::after { margin: 10px auto; }
  .title .button-primary { margin-top: 14px; padding: 10px 22px; font-size: 16px; }
}

/* 球員：在所有東西後面（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); }
/* 開了「減少動態效果」的人：不浮上來，只淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  .player { transform: none; transition: opacity 1.3s ease; }
}

/* ═══ 遊戲頁：最上面那塊（game-top）—— 報名最顯眼、logo 第二、介紹一行小字；旁邊一個打者（他照 X 橫幅做的圖裁的，藍色切面、金線都是圖上的）。
   電腦：左邊 logo＋介紹＋報名，右邊打者，佔滿頁首以下的畫面。
   手機（760 以下、打橫的手機）：只有 logo、介紹、報名，不放打者。 */
.game main { display: flex; flex-direction: column; max-width: none; padding: 0; }
.game-top {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  min-height: clamp(600px, calc(100vh - 64px), 820px); /* 筆電上頁尾在畫面外；大螢幕上一直延伸到頁尾，不留一條白的 */
  background: var(--home-bg) url(/assets/home-bg.jpg) center / cover no-repeat;
}
.game-main { align-self: center; justify-self: center; width: min(640px, 100%); padding: 32px 24px 56px; }
.game-title { margin: 0; }
.game-title img { display: block; width: 100%; height: auto; }
.game-intro { margin: 8px 0 0; text-align: center; font-size: 15px; color: var(--text-sub); text-wrap: balance; } /* 兩行時兩行差不多長，不會剩一個字 */

/* 打者：整塊一樣高，藍色切面從頁首一路到底、不淡掉（跟他的橫幅一樣；他看了「打者小、下面淡掉」和這個，選這個）。
   圖的左邊是白色切面，往左淡進頁面的切面裡，看不出接縫。只有這張圖有一個進場（從右邊滑進來）。
   兩張：原本的 1016 寬，和用 Real-ESRGAN 放大兩倍的 2032 寬（螢幕比較細的電腦用它）。用背景放：手機上整塊藏起來就不會下載 */
.game-art { position: relative; overflow: hidden; }
.game-art::before {
  content: ""; position: absolute; inset: 0;
  background: url(/assets/ninestars/batter-art.webp) right top / cover no-repeat;
  background-image: -webkit-image-set(url(/assets/ninestars/batter-art.webp) 1x, url(/assets/ninestars/batter-art-2x.webp) 2x);
  background-image: image-set(url(/assets/ninestars/batter-art.webp) 1x, url(/assets/ninestars/batter-art-2x.webp) 2x);
  --fade: linear-gradient(to right, transparent, #000 24%);
  -webkit-mask-image: var(--fade); mask-image: var(--fade);
  animation: art-in 1.1s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes art-in { from { opacity: 0; transform: translateX(40px); } }
/* 很寬的螢幕：左邊那欄靠向打者，不會中間空一大塊 */
@media (min-width: 1600px) {
  .game-top { grid-template-columns: minmax(0, 1fr) minmax(0, 720px); }
  .game-main { justify-self: end; margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) { .game-art::before { animation: none; } }

/* 手機（760 以下）和打橫的手機（矮、用手指點的螢幕）：只有 logo、介紹、報名，排成一欄。
   不放打者（他說的「手機不放」）：整塊藏起來，背景的圖就不會下載。打橫的手機比 760 寬，只看寬度的話打者會跑出來（審查抓到的） */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .game-top { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .game-main { width: 100%; max-width: 520px; padding: 20px 16px 28px; }
  .game-title img { width: min(100%, 360px); margin: 0 auto; }
  .game-art { display: none; }
}

/* ── 報名那一塊：實心白、有影子，頁面上最顯眼的東西。一格 email＋一顆按鈕，擠不下一行時按鈕換到下一行 */
.signup {
  margin: 36px 0 0; padding: 28px 28px 22px;
  background: var(--signup-panel); border-radius: 16px; box-shadow: 0 12px 32px var(--signup-shadow);
}
.signup h2 { margin: 0; font-size: 32px; line-height: 1.25; text-wrap: balance; }
.signup-summary { margin: 6px 0 20px; font-size: 16px; font-weight: 600; color: var(--signup-summary); text-wrap: balance; }
.signup-form label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--text-sub); }
.signup-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.signup-row input {
  flex: 1 1 150px; min-width: 0; min-height: 58px; padding: 11px 12px;
  font: inherit; font-size: 17px; /* 16px 以下 iPhone 點進去會自己放大畫面 */
  color: var(--text); background: var(--input-bg);
  border: 2px solid var(--input-border); border-radius: 12px;
}
.signup-row input[aria-invalid="true"] { border-color: var(--input-error); }
/* 跟 email 那格一樣高：按鈕 54 ＋ 底下的下緣 4（.button-primary 的 margin-bottom）＝ 58 */
.signup-row .button-primary { flex: none; min-height: 54px; padding: 0 34px; border-radius: 12px; font-size: 19px; }
.signup-notes { margin: 18px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.55; color: var(--text-sub); }
.signup-notes li { margin: 0 0 4px; text-wrap: pretty; }
.signup-note { margin: 10px 0 0; font-size: 12px; color: var(--text-sub); }
@media (max-width: 760px) {
  .signup { margin-top: 22px; padding: 22px 18px 18px; }
  .signup h2 { font-size: 26px; }
  .signup-summary { margin-bottom: 16px; font-size: 15px; }
  .signup-row .button-primary { padding: 0 26px; }
}
/* 擋機器人的那一格：搬到畫面外（不用 display: none —— 有些機器人看到藏起來的就不填） */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* 送出後的那一句：沒字的時候不佔位子（不用 display: none —— 藏起來的報讀軟體不聽，第一句話會唸不出來）；報名成功時表單收起來，只剩這一句 */
.signup-status { margin: 12px 0 0; font-weight: 600; }
.signup-status:empty { margin: 0; }
.signup-status:focus { outline: none; } /* 報名成功時游標移到這一句（報讀軟體從這裡接著唸）；不是能按的東西，不畫焦點框 */
.signup-status.error { color: var(--input-error); }
.signup-status.done { margin-top: 4px; font-size: 17px; color: var(--input-done); }

/* ═══ 遊戲列表（/games）：一款遊戲一張大卡片 —— 主視覺（他做的圖）、名字、一句介紹，整張是一個連結。
   文字頁的外框，內容比文字頁寬（卡片的圖才夠大）；第二款遊戲就往下多一張 */
.games main { max-width: 912px; } /* 改了這個寬度（或 main 的左右 16px）：pages.js 卡片圖的 sizes 要跟著改 */
.game-list { display: grid; gap: 28px; margin: 24px 0 0; padding: 0; list-style: none; }
.game-list li { margin: 0; }
.game-card {
  display: block; overflow: hidden; text-decoration: none;
  background: var(--page-bg); border: 1px solid var(--panel-border); border-radius: 16px;
  box-shadow: 0 10px 28px var(--game-card-shadow);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.game-card img { display: block; width: 100%; height: auto; }
.game-card-text { padding: 18px 24px 22px; }
.game-card h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.game-card p { margin: 4px 0 0; font-size: 15px; text-wrap: pretty; }
/* 中文的介紹擠不下一行時只從標點換行（「與 / 榮耀」那種從詞中間斷的他不要）；一個標點都放不下的極窄畫面才隨便斷 */
[lang|="zh"] .game-card p { word-break: keep-all; overflow-wrap: anywhere; }
/* 游標移到卡片上：浮起來一點、影子深一點（只給有游標的；手機點了就換頁） */
@media (hover: hover) {
  .game-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px var(--game-card-shadow-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .game-card { transition: box-shadow .3s ease; }
  .game-card:hover { transform: none; }
}
@media (max-width: 500px) {
  .game-list { margin-top: 16px; }
  .game-card { border-radius: 14px; }
  .game-card-text { padding: 14px 16px 18px; }
  .game-card h2 { font-size: 20px; }
}