/* =========================================================================
   大豐循環遊戲場 · Design System（大廳、後台、投影頁與每款遊戲共用）
   V2BR（owner 裁決 U55／U56，2026-10-21）：外層介面嚴格依《大豐品牌規範 v2.14》（行銷部 CIS 手冊 2025）。
   規則摘要見 docs/reference/brand-rules.md：
   - 只用 CIS 八色；70% 主色（大豐藍、大豐綠）／20% 輔助色（亮綠、亮藍、深綠、灰）／10% 文字色（大豐黑、銀白）。
   - 不用純黑底、不用品牌外螢光色、不用放射光暈、毛玻璃、柔和陰影、漂浮圓形；漸層只允許大面積
     「大豐藍→大豐綠」「大豐藍→深綠」直線漸層，與照片上的大豐藍單色壓暗（G 版型）。
   - 關鍵字強調：一段標題只挑一個關鍵字；深色底用亮綠、淺色底用大豐綠。
   - 字體：思源黑體（Noto Sans TC）＋ Inter；標題 Bold、內文 Regular／Light；小標籤英文全大寫加字距；1px 細線分隔。
   - 圓角：版面不用圓角；按鈕與輸入框為手機好按保留 4px 小圓角（U56）。
   遊戲畫面（Canvas／3D 美術）與疊在遊戲上的 HUD 屬「遊戲內寫實」，沿用第 3 層遊戲調色盤，不在此限。

   Token 分三層：
   1) CIS 原始色 --cis-*：品牌規範 §2.1 標準色，不可自行調色。
   2) 平台語意 token --surface／--text／--primary…：大廳、後台、投影頁只用這一層。
   3) 遊戲調色盤 --bg-*／--fg*／--green／--gold…：遊戲與 HUD 用（深色），外層不再直接引用。
   ========================================================================= */
/* 自架字型（內網可用，不依賴 Google CDN）。三個 woff2 都由 tools/build.py 依實際用到的字做子集：
   - Noto Sans TC（思源黑體，OFL 1.1）：品牌中文字體，可變粗細 100–900
   - Inter（OFL 1.1）：品牌英文／數字字體，可變粗細，只含拉丁字元
   - Huninn（粉圓）、Lilita One：只給遊戲畫面內的 HUD 與大數字（遊戲內，外層不用） */
@font-face { font-family: "DF Noto Sans TC"; src: url("../fonts/notosanstc-sub.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "DF Inter"; src: url("../fonts/inter-sub.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Lilita One"; src: url("../fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Huninn"; src: local("Huninn"), url("../fonts/huninn-sub.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light;

  /* ===== 1) CIS 標準色（品牌規範 v2.14 §2.1；HEX 照抄，不可調色）===== */
  --cis-blue: #00405b;        /* 大豐藍 Da Fon Blue（主色） */
  --cis-green: #00965e;       /* 大豐綠 Da Fon Green（主色） */
  --cis-dkgreen: #004c42;     /* 深綠 Dark Green（輔助：層次、淺底上的綠字） */
  --cis-ltgreen: #6bc624;     /* 亮綠 Light Green（輔助：深底上的亮點、按鈕、關鍵字） */
  --cis-ltblue: #0977d1;      /* 亮藍 Light Blue（輔助：數字、次要強調） */
  --cis-gray: #939faa;        /* 灰 Gray（輔助：次要結構、細線） */
  --cis-black: #282828;       /* 大豐黑（淺底文字） */
  --cis-silver: #eeeeef;      /* 銀白（深底文字、淺色底） */
  --cis-white: #ffffff;
  /* 非 CIS 的中性色只有這兩個，用途限「細線」與「次要文字」（品牌規範 §2.4 簡報中性色同一族）：
     --hair：灰 #939faa 與白 35%／65% 混色的細線；--ink-2：§2.4 的次要文字灰 #5D686F（白底 5.7:1、銀白底 4.9:1） */
  --hair: #d9dde1;
  --ink-2: #5d686f;

  /* 舊名相容（遊戲檔 stack.js 等仍引用 --cis-green-700、--cis-navy…；一律指回 CIS 標準色） */
  --cis-navy: var(--cis-blue);
  --cis-navy-900: var(--cis-blue);
  --cis-navy-800: var(--cis-blue);
  --cis-navy-700: var(--cis-blue);
  --cis-navy-600: var(--cis-blue);
  --cis-navy-300: var(--cis-gray);
  --cis-navy-100: var(--cis-silver);
  --cis-navy-50: var(--cis-silver);
  --cis-green-800: var(--cis-dkgreen);
  --cis-green-700: var(--cis-green);
  --cis-green-300: var(--cis-ltgreen);
  --cis-green-100: var(--cis-silver);
  --cis-green-50: var(--cis-silver);
  --cis-gray-50: var(--cis-silver);
  --cis-gray-100: var(--cis-silver);
  --cis-gray-200: var(--hair);
  --cis-gray-400: var(--cis-gray);
  --cis-gray-500: var(--ink-2);
  --cis-gray-700: var(--ink-2);
  --cis-gray-900: var(--cis-black);

  /* ===== 2) 平台語意 token ===== */
  --page: var(--cis-silver);            /* 頁面底：銀白 */
  --surface: var(--cis-white);          /* 內容區塊：白（不加陰影、不加外框，靠底色差與 1px 細線分層） */
  --surface-2: var(--cis-silver);
  --surface-3: var(--cis-silver);
  --surface-navy: var(--cis-blue);      /* 品牌色塊（主視覺、投影頁、頁首） */
  --surface-navy-2: var(--cis-blue);
  --text: var(--cis-black);             /* 主要文字（白底 15:1、銀白底 12.7:1） */
  --text-2: var(--ink-2);               /* 次要文字 */
  --text-3: var(--ink-2);
  --heading: var(--cis-blue);           /* 標題：大豐藍 */
  --line: var(--hair);                  /* 1px 細線 */
  --line-strong: var(--cis-gray);       /* 輸入框邊（非文字元件 ≥ 3:1 以 2px 呈現） */
  --primary: var(--cis-green);          /* 主要按鈕：大豐綠底白字（字級 ≥ 19px 粗體＝大字 3:1 以上） */
  --primary-press: var(--cis-dkgreen);
  --primary-ink: #ffffff;
  --primary-small: var(--cis-dkgreen);  /* 小字按鈕（< 19px）：深綠底白字 9.9:1 */
  --primary-soft: var(--cis-white);
  --primary-line: var(--cis-green);
  --primary-dark: var(--cis-ltgreen);   /* 深色底上的主要按鈕：亮綠底＋大豐藍字 5.2:1 */
  --primary-dark-ink: var(--cis-blue);
  --accent: var(--cis-green);           /* 重點（色條、進度、選取）；淺底關鍵字 */
  --accent-ink: var(--cis-dkgreen);     /* 淺底上的綠色小字 */
  --accent-dark: var(--cis-ltgreen);    /* 深底上的關鍵字 */
  --navy-ink: var(--cis-blue);
  --navy-soft: var(--cis-silver);
  --navy-line: var(--cis-blue);
  --focus: var(--cis-ltblue);
  /* 次要強調：數字、獎金、抽獎券一律亮藍（品牌規範 §2.3「年份、數字等次要強調可用亮藍」；不再用金色） */
  --prize: var(--cis-ltblue);
  --prize-fill: var(--cis-ltblue);
  --prize-fill-ink: #ffffff;
  --prize-soft: var(--cis-white);
  --prize-line: var(--cis-ltblue);
  /* 功能色（10%）：錯誤、異常、LIVE 必須一眼辨識，保留紅色；只用在狀態，不當裝飾 */
  --danger: #b42318;
  --danger-fill: #b42318;
  --danger-soft: var(--cis-white);
  --danger-line: #b42318;
  --info: var(--cis-blue);
  --info-soft: var(--cis-white);
  --info-line: var(--cis-blue);
  --honor: var(--cis-blue);             /* 榮譽賽（原紫色改大豐藍） */
  --honor-soft: var(--cis-white);
  --honor-line: var(--cis-blue);
  /* 品牌規範 §5 共同禁止「柔和陰影」：外層一律不用陰影，靠底色差與 1px 細線分層 */
  --shadow-1: none;
  --shadow-2: none;
  --shadow-3: none;
  /* 大面積品牌雙色直線漸層（§2.3 有條件允許） */
  --grad-brand: linear-gradient(180deg, var(--cis-blue) 0%, var(--cis-dkgreen) 100%);
  /* G 版型照片壓暗：大豐藍單色由下往上 95% → 80% → 0（§5.4） */
  --g-shade: linear-gradient(0deg, rgba(0, 64, 91, .95) 0%, rgba(0, 64, 91, .80) 45%, rgba(0, 64, 91, 0) 62%);

  /* ===== 3) 遊戲調色盤（遊戲 Canvas／HUD 使用，深色；外層不直接引用）===== */
  --bg-0: #061a20;
  --bg-1: #0b2a33;
  --bg-2: #123a45;
  --bg-3: #1a4b58;
  --g-line: rgba(160, 230, 220, 0.14);
  --fg: #eefaf6;
  --fg-2: #a9c9c4;
  --fg-3: #6f9690;
  --green: #2bd67b;
  --green-d: #16a35a;
  --gold: #ffc940;
  --gold-d: #d89a12;
  --coral: #ff6b5a;
  --coral-d: #d1432f;
  --sky: #4cc9f0;
  --sky-d: #1f93bd;
  --plum: #b388ff;
  --plum-d: #7c4ddb;
  --game-tile: var(--cis-blue);   /* 外層放遊戲圖示／封面的底：大豐藍 */

  /* ---- type（品牌規範 §3）---- */
  --f-brand-zh: "DF Noto Sans TC", "Noto Sans TC", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --f-body: "DF Inter", "Inter", var(--f-brand-zh);    /* 拉丁字母與數字用 Inter，中文自動落到思源黑體 */
  --f-head: var(--f-body);
  --f-num: "DF Inter", "Inter", var(--f-brand-zh);     /* 外層大數字：Inter（等寬數字） */
  --f-display: "Lilita One", "Huninn", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;  /* 遊戲 HUD 與遊戲內大數字（遊戲內） */
  --f-round: "Huninn", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;                   /* 遊戲內圓體（遊戲內） */
  /* ---- shape：版面無圓角；按鈕／輸入框 4px（U56 手機好按） ---- */
  --r-s: 2px; --r-m: 4px; --r-l: 4px; --r-xl: 4px;
  --shadow: none;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--f-body);
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.df-stage .num { font-family: var(--f-display); }

/* ---------- buttons：平面、無陰影、4px 小圓角。預設＝主要按鈕（大豐綠底白字，19px 粗體＝WCAG 大字） ---------- */
.df-btn {
  --c: var(--primary); --cd: var(--primary-press); --tc: var(--primary-ink);
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--f-body); font-size: 19px; font-weight: 700; letter-spacing: .04em;
  color: var(--tc); background: var(--c);
  min-height: 48px; padding: 12px 22px; border-radius: var(--r-m);
  box-shadow: none;
  transition: background-color .15s, color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; text-decoration: none;
}
.df-btn:active { background: var(--cd); }
.df-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.df-btn.primary { --c: var(--primary); --cd: var(--primary-press); --tc: var(--primary-ink); }
.df-btn.navy  { --c: var(--cis-blue); --cd: var(--cis-dkgreen); --tc: #fff; }
.df-btn.gold  { --c: var(--cis-ltblue); --cd: var(--cis-blue); --tc: #fff; }
.df-btn.coral { --c: var(--danger-fill); --cd: #7a1a12; --tc: #fff; }
.df-btn.sky   { --c: var(--cis-ltblue); --cd: var(--cis-blue); --tc: #fff; }
.df-btn.ghost { --c: var(--surface); --cd: var(--cis-silver); --tc: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--cis-blue); }
.df-btn.line  { --c: transparent; --cd: var(--cis-silver); --tc: var(--navy-ink); box-shadow: inset 0 0 0 1px var(--cis-blue); }
.df-btn.on-dark { --c: var(--primary-dark); --cd: #ffffff; --tc: var(--primary-dark-ink); }
.df-btn.block { width: 100%; }
.df-btn[disabled] { opacity: .45; pointer-events: none; }
/* 小字按鈕（< 19px）：大豐綠白字只有 3.8:1，改深綠底（9.9:1） */
.df-btn.sm:not(.ghost):not(.line):not(.navy):not(.coral):not(.danger), .df-btn.compact:not(.ghost):not(.line):not(.navy):not(.coral) { --c: var(--primary-small); --cd: var(--cis-blue); }

/* ---------- 品牌標誌（品牌規範 §4）：只用原始檔，不重畫、不拉伸、不加白底卡；四周淨空＝地球圖標直徑 1/2 ----------
   >>> SWAP POINT（V2BR）：行銷部官方 SVG（07_Logo品牌標誌）放進 web/assets/brand/ 後，把下面三個 url 換成
       ../assets/brand/DF_TW_C.svg、../assets/brand/DF_TW_W.svg、../assets/brand/DF_Symbol_C.svg，並刪掉 .cis-logo.w 的 display:none。
       目前暫用 owner 先前提供的彩色橫式 Logo PNG（web/img/dafon-logo-horizontal.png 裁切縮放，未改色）。
   淨空：.cis-logo 的地球圖標直徑≈標誌高度，所以四周外距＝高度的 1/2（--logo-h 由使用處設定，預設 寬 200 → 高 50）。 */
.cis-logo { --logo-w: 200px; display: block; width: var(--logo-w); aspect-ratio: 480 / 121; flex: none;
  background: url("../img/dafon-logo-480.png") center / contain no-repeat; }
.cis-logo.w { display: none; /* SWAP：純白版 DF_TW_W.svg 到位前不顯示（深色底不可放彩色版＋白底卡） */
  background-image: url("../img/dafon-logo-480.png"); }
.cis-mark { display: block; width: 36px; height: 36px; background: url("../img/dafon-mark-128.png") center / contain no-repeat; flex: none; }

/* ---------- 小標籤（§3.1）：英文全大寫、加寬字距 ---------- */
.df-label { font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* ======================= GAME KIT (stage / HUD / overlays)：保持深色，疊在遊戲上 ======================= */
.df-stage {
  position: relative; width: 100%; height: 100%; overflow: hidden; color-scheme: dark;
  background: var(--bg-0); color: var(--fg); font-family: var(--f-body);
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.df-stage .df-btn.ghost, .df-overlay .df-btn.ghost { --c: var(--bg-3); --cd: #0d303a; --tc: var(--fg); box-shadow: 0 3px 0 var(--cd), 0 4px 10px rgba(0,0,0,.3); }
.df-play { position: absolute; inset: 0; }
.df-play canvas { display: block; }

.df-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  padding: calc(var(--safe-t) + 10px) max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(6,26,32,.85), rgba(6,26,32,0));
}
.df-hud-score { justify-self: start; display: flex; flex-direction: column; line-height: 1; }
.df-hud-score small { font-family: var(--f-round); font-size: 11px; color: var(--fg-2); letter-spacing: .08em; }
.df-hud-score b { font-family: var(--f-display); font-weight: 400; font-size: 30px; color: var(--fg); text-shadow: 0 2px 0 rgba(0,0,0,.35); transition: transform .12s; }
.df-hud-score b.bump { transform: scale(1.18); }
.df-hud-mid { font-family: var(--f-round); font-size: 14px; color: var(--gold); text-align: center; white-space: nowrap; }
.df-hud-right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.df-hud-time { position: relative; width: 44px; height: 44px; }
.df-hud-time svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.df-hud-time span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 16px; }
.df-hud-time.warn span { color: var(--coral); }
.df-hud-lives { display: flex; gap: 3px; font-size: 18px; }
.df-hud-lives i { width: 18px; height: 16px; display: inline-block; background: var(--coral);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 1.9 11.5A6 6 0 0 1 12 3.3a6 6 0 0 1 10.1 8.2Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 1.9 11.5A6 6 0 0 1 12 3.3a6 6 0 0 1 10.1 8.2Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.df-hud-lives i.off { background: rgba(255,255,255,.18); }
.df-hud-pause {
  pointer-events: auto; width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: var(--fg); display: grid; place-items: center;
}
.df-hud-pause:active { transform: scale(.92); }

.df-toast {
  position: absolute; left: 50%; top: 34%; z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%) scale(.6); opacity: 0;
  font-family: var(--f-display); font-size: 40px; color: var(--gold); white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 24px rgba(255,201,64,.45);
  animation: dfToast .9s cubic-bezier(.2,1.4,.4,1) forwards;
}
.df-toast.zh { font-family: var(--f-round); font-size: clamp(22px, 7.5vw, 32px); font-weight: 700; white-space: normal; width: max-content; max-width: 88vw; text-align: center; line-height: 1.25; }
@keyframes dfToast {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  20% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  70% { opacity: 1; transform: translate(-50%,-60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-80%) scale(.96); }
}

.df-overlay {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; color: var(--fg);
  background: rgba(4, 18, 22, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.df-overlay[hidden] { display: none !important; }
.df-count { font-family: var(--f-display); font-size: 120px; color: var(--fg);
  text-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 50px rgba(43,214,123,.6); animation: dfCount .8s ease-out both; }
.df-count.go { color: var(--green); }
@keyframes dfCount { 0% { transform: scale(2.2); opacity: 0 } 30% { transform: scale(1); opacity: 1 } 100% { transform: scale(.85); opacity: .0 } }
.df-pausebox { display: grid; gap: 14px; width: min(300px, 80vw); text-align: center; }
.df-pausebox h3 { margin: 0 0 6px; font-family: var(--f-round); font-size: 26px; color: var(--fg); }
.df-pause-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg-2); }
/* V2AU：暫停選單的音效／音樂開關與音量 */
.df-pause-audio { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); }
.df-aud { display: flex; align-items: center; gap: 12px; }
.df-aud-t { flex: none; min-width: 88px; min-height: 44px; padding: 0 12px; border-radius: 22px; border: 2px solid rgba(255,255,255,.25);
  background: transparent; color: var(--fg-2); font: inherit; font-family: var(--f-round); font-size: 15px; cursor: pointer; }
.df-aud-t.on { border-color: var(--green); background: rgba(43,214,123,.16); color: var(--fg); }
.df-aud-t:focus-visible, .df-aud input:focus-visible { outline: 3px solid var(--focus, #ffc940); outline-offset: 2px; }
.df-aud input[type=range] { flex: 1; min-width: 0; height: 44px; accent-color: var(--green); background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .df-toast, .df-count { animation-duration: .01s; }
}