:root {
  /* === 大江購物冒險 (metrowalk-adventure) 主題 ===
   * --primary    粉紅 #E91E63   大江品牌主色
   * --secondary  青藍 #00BCD4   科技副色
   * --accent     金黃 #FFD740   亮點/獎盃色
   * --bg         深紫 #0a0a1a   夜空背景
   */
  --primary:#E91E63;
  --secondary:#00BCD4;
  --accent:#FFD740;
  --warn:#FFA726;
  --error:#f44336;
  --success:#4CAF50;
  --bg:#0a0a1a;
  --bg-card:rgba(255,255,255,0.06);
  --bg-card-strong:rgba(255,255,255,0.1);
  --text:#e0e0e0;
  --text-light:#8899aa;
  --text-dim:rgba(255,255,255,0.55);
  --shadow:0 2px 16px rgba(0,200,255,0.06);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.4);
  --radius:14px;
  --radius-lg:20px;
  --glow-cyan:rgba(0,188,212,0.3);
  --glow-pink:rgba(233,30,99,0.3);
  --glow-gold:rgba(255,215,64,0.32);

  /* === 字級系統（手機優先放大）=== */
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:15px;
  --fs-md:16px;
  --fs-lg:18px;
  --fs-xl:22px;
  --fs-2xl:28px;
  --fs-hero:32px;

  /* === 點擊熱區（WCAG 44px+）=== */
  --hit-sm:40px;
  --hit-md:48px;
  --hit-lg:56px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang TC','Noto Sans TC',sans-serif; background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent; overflow-x:hidden; font-size:var(--fs-base); line-height:1.55; }

/* === Buttons === */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; min-height:var(--hit-md); border-radius:var(--radius); font-size:var(--fs-md); font-weight:700; border:none; cursor:pointer; transition:all 0.2s; line-height:1.2; }
.btn-primary { background:linear-gradient(135deg,#E91E63,#FF5252); color:white; box-shadow:0 4px 15px rgba(233,30,99,0.3); }
.btn-primary:active { background:#C2185B; transform:scale(0.97); }
.btn-secondary { background:linear-gradient(135deg,#00BCD4,#0097A7); color:white; box-shadow:0 4px 15px rgba(0,188,212,0.3); }
.btn-accent { background:linear-gradient(135deg,#FFD740,#FFC107); color:#1a1a2e; }
.btn-outline { background:transparent; border:2px solid var(--secondary); color:var(--secondary); }
.btn-block { width:100%; }
.btn-lg { padding:18px 30px; min-height:var(--hit-lg); font-size:var(--fs-lg); border-radius:16px; }
.btn-sm { padding:10px 16px; min-height:36px; font-size:var(--fs-sm); }
.btn[disabled] { opacity:0.55; cursor:not-allowed; }

/* === Inputs === */
.input,.select { width:100%; padding:14px 16px; min-height:var(--hit-md); border:2px solid rgba(0,188,212,0.2); border-radius:var(--radius); font-size:var(--fs-md); background:rgba(255,255,255,0.05); color:var(--text); outline:none; transition:border-color 0.2s; }
.input:focus,.select:focus { border-color:var(--secondary); box-shadow:0 0 12px var(--glow-cyan); }
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--secondary); margin-bottom:6px; text-transform:uppercase; letter-spacing:1px; }

/* === Cards === */
.card { background:var(--bg-card); border:1px solid rgba(0,188,212,0.15); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); backdrop-filter:blur(10px); }

/* === Notification / Panels === */
.notification-bar { position:fixed; top:-60px; left:16px; right:16px; background:rgba(10,10,26,0.95); border:1px solid rgba(0,188,212,0.3); padding:12px 16px; border-radius:14px; box-shadow:0 4px 20px rgba(0,188,212,0.15); z-index:200; transition:top 0.4s ease; font-size:var(--fs-md); color:var(--text); }
.notification-bar.show { top:60px; }
.message-panel { position:fixed; top:0; left:0; right:0; bottom:0; background:var(--bg); z-index:150; transform:translateX(100%); transition:transform 0.3s ease; overflow-y:auto; padding:0; }
.message-panel.show { transform:translateX(0); }

/* === Top bar === */
.top-bar { position:sticky; top:0; display:flex; align-items:center; padding:12px 16px; background:rgba(10,10,26,0.95); border-bottom:1px solid rgba(0,188,212,0.15); z-index:50; backdrop-filter:blur(10px); }
.top-bar-back { background:none; border:none; font-size:22px; cursor:pointer; width:44px; height:44px; color:var(--text); }
.top-bar-title { flex:1; text-align:center; font-size:var(--fs-lg); font-weight:700; color:var(--text); }

.page-container { padding:16px; max-width:520px; margin:0 auto; }

/* === Ranking === */
.rank-item { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg-card); border:1px solid rgba(0,188,212,0.1); border-radius:14px; margin-bottom:10px; box-shadow:var(--shadow); animation:fadeIn 0.3s ease both; }
.rank-number { width:32px; height:32px; border-radius:50%; background:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:800; flex-shrink:0; }
.rank-number.top1 { background:linear-gradient(135deg,#FFD700,#FFA000); color:white; }
.rank-number.top2 { background:linear-gradient(135deg,#C0C0C0,#9E9E9E); color:white; }
.rank-number.top3 { background:linear-gradient(135deg,#CD7F32,#A1887F); color:white; }
.rank-emoji { font-size:24px; }
.rank-name { font-size:var(--fs-md); font-weight:600; }
.rank-bar { height:5px; background:linear-gradient(to right,var(--primary),var(--secondary)); border-radius:3px; margin-top:4px; transition:width 0.5s; }
.rank-score { font-size:var(--fs-xl); font-weight:900; color:var(--accent); }
.my-team { background:rgba(0,188,212,0.08); border-left:4px solid var(--secondary); }

/* === Game HUD === */
.game-hud { display:flex; justify-content:space-around; padding:10px 16px; background:rgba(0,0,0,0.3); }
.hud-item { text-align:center; }
.hud-label { font-size:11px; color:rgba(255,255,255,0.5); }
.hud-value { font-size:var(--fs-xl); font-weight:900; color:white; }
.game-canvas-container { width:100%; display:flex; align-items:center; justify-content:center; }
.game-canvas-container canvas { display:block; max-width:100%; touch-action:none; }

.danmaku-item { position:absolute; right:-300px; white-space:nowrap; color:rgba(255,255,255,0.6); font-size:var(--fs-sm); animation:danmakuScroll 8s linear forwards; pointer-events:none; }

/* === NPC（Frank 領隊系統）=== */
.leader-card {
  background:linear-gradient(135deg, rgba(233,30,99,0.12), rgba(0,188,212,0.10));
  border:1px solid rgba(255,215,64,0.32);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  display:flex; align-items:center; gap:14px;
  margin:12px 0;
  box-shadow:0 4px 20px rgba(233,30,99,0.18);
}
.leader-avatar {
  width:64px; height:64px; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#00BCD4,#0097A7);
  display:flex; align-items:center; justify-content:center;
  font-size:38px;
  border:3px solid var(--accent);
  box-shadow:0 0 18px var(--glow-gold);
  position:relative;
  transition:transform .3s ease;
}
.leader-avatar[class*="mood-"]::after {
  position:absolute; right:-4px; bottom:-4px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.7); border:2px solid var(--bg);
  font-size:14px; display:flex; align-items:center; justify-content:center;
  animation:moodPop 0.5s ease both;
}
.leader-avatar.mood-happy::after    { content:'😊'; }
.leader-avatar.mood-success::after  { content:'🤩'; }
.leader-avatar.mood-cheer::after    { content:'🎉'; }
.leader-avatar.mood-sad::after      { content:'😢'; }
.leader-avatar.mood-faceplam::after { content:'🤦'; }
.leader-avatar.mood-confused::after { content:'🤔'; }
.leader-avatar.mood-love::after     { content:'💖'; }
.leader-avatar.mood-panic::after    { content:'😱'; }
.leader-avatar.mood-thinking::after { content:'💭'; }
.leader-avatar.mood-victory::after  { content:'🏆'; }
.leader-avatar.mood-victory          { animation:victoryPulse 1.2s ease infinite; }
@keyframes moodPop { from{transform:scale(0);opacity:0} 60%{transform:scale(1.3);opacity:1} to{transform:scale(1)} }
@keyframes victoryPulse { 0%,100%{box-shadow:0 0 18px var(--glow-gold)} 50%{box-shadow:0 0 30px var(--accent),0 0 8px var(--accent)} }
.leader-info { flex:1; min-width:0; }
.leader-name { font-size:var(--fs-lg); font-weight:800; color:var(--accent); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.leader-nick { font-size:var(--fs-sm); color:var(--secondary); margin-top:2px; }
.leader-role { font-size:var(--fs-xs); color:var(--text-light); margin-top:4px; }
.leader-quote { font-size:var(--fs-sm); color:var(--text); margin-top:10px; line-height:1.6; font-style:italic; }
.npc-badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; background:linear-gradient(135deg,#FFD740,#FFC107); color:#1a1a2e; }

/* === 緊湊型領隊卡（map 頂部用）=== */
.leader-card.compact { padding:8px 12px; gap:10px; margin:8px 16px; }
.leader-card.compact .leader-avatar { width:42px; height:42px; font-size:24px; border-width:2px; }
.leader-card.compact .leader-name { font-size:var(--fs-md); }
.leader-card.compact .leader-nick { font-size:11px; }
.leader-card.compact .leader-role { display:none; }
.leader-card.compact .leader-quote { display:none; }

/* === Frank 全螢幕慶祝 === */
.frank-cheer {
  position:fixed; inset:0; z-index:999;
  background:radial-gradient(circle, rgba(233,30,99,0.45), rgba(10,10,26,0.88));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:cheerIn 0.5s ease, cheerOut 0.5s ease 2.2s forwards;
  pointer-events:none;
}
.frank-cheer-portrait { font-size:120px; animation:cheerBounce 0.6s ease infinite alternate; filter:drop-shadow(0 0 20px var(--accent)); }
.frank-cheer-text { font-size:var(--fs-2xl); font-weight:900; color:var(--accent); text-shadow:0 0 16px var(--accent); margin-top:14px; text-align:center; padding:0 20px; }
.frank-cheer-sub { font-size:var(--fs-md); color:white; margin-top:6px; opacity:0.88; }
@keyframes cheerIn  { from{opacity:0;transform:scale(0.85)} to{opacity:1;transform:scale(1)} }
@keyframes cheerOut { to{opacity:0;transform:scale(1.1)} }
@keyframes cheerBounce { from{transform:translateY(-8px)} to{transform:translateY(8px)} }

@keyframes danmakuScroll { from{right:-300px} to{right:calc(100% + 300px)} }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
.spinner { width:32px; height:32px; border:3px solid rgba(255,255,255,0.15); border-top-color:var(--primary); border-radius:50%; animation:spin 0.6s linear infinite; margin:0 auto; }
@keyframes spin { to{transform:rotate(360deg)} }

/* === Responsive：小於 360px 字級稍微縮 === */
@media (max-width:359px) {
  :root { --fs-base:14px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; }
  .btn { padding:12px 18px; }
  .btn-lg { padding:14px 24px; font-size:var(--fs-md); }
  .leader-avatar { width:54px; height:54px; font-size:32px; }
}
/* === 大螢幕（pad/desktop 預覽）增加 padding 與彈幕字級 === */
@media (min-width:640px) {
  .page-container { max-width:560px; padding:24px; }
  .danmaku-item { font-size:15px; }
}

/* === Accessibility === */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.btn:focus-visible { outline-offset:3px; box-shadow:0 0 0 4px rgba(255,215,64,0.25); }
.input:focus-visible, .select:focus-visible { outline:none; }
/* skip-link 樣式 — 螢幕閱讀器專用、tab 時才出現 */
.sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sr-only:focus { left:8px; top:8px; width:auto; height:auto; padding:8px 12px; background:var(--accent); color:#000; z-index:9999; border-radius:6px; }

/* === 偏好設定：減少動畫（暈眩/前庭敏感）=== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
  .frank-cheer-portrait { animation:none !important; }
  .leader-avatar { animation:none !important; }
}

/* === 印刷 / 高對比模式微調 === */
@media (prefers-contrast: more) {
  :root { --text:#fff; --text-light:#cbd; --bg-card:rgba(255,255,255,0.12); }
  .btn-outline { border-width:3px; }
}

/* ============================================================
   字級切換（長輩 / 老花友善模式）— 移植自 ICSD × 漢神
   ============================================================ */

/* === Large（老花友善）整體再放大 +30% over normal === */
html[data-fontsize="large"] {
  font-size: 22px;          /* 17.5 → 22 (+25%) 帶動 rem */
  /* 同步放大全站字級變數，涵蓋所有用 var(--fs-*) 的元件
     （含 Frank 卡 / 領隊卡 / Frank cheer 等） */
  --fs-xs: 14px;            /* 12 → 14 */
  --fs-sm: 16px;            /* 13 → 16 */
  --fs-base: 18px;          /* 15 → 18 */
  --fs-md: 19px;            /* 16 → 19 */
  --fs-lg: 22px;            /* 18 → 22 */
  --fs-xl: 26px;            /* 22 → 26 */
  --fs-2xl: 32px;           /* 28 → 32 */
  --fs-hero: 38px;          /* 32 → 38 */
}
/* Large 模式：Frank / leader 卡片補強（小卡 compact 太擠，給點呼吸） */
html[data-fontsize="large"] .leader-card.compact { padding: 12px 16px; gap: 14px; }
html[data-fontsize="large"] .leader-card.compact .leader-avatar { width: 52px; height: 52px; font-size: 28px; }
html[data-fontsize="large"] .leader-card.compact .leader-nick { font-size: 14px; }
html[data-fontsize="large"] .frank-cheer-portrait { font-size: 150px !important; }
html[data-fontsize="large"] .frank-cheer-text { text-shadow: 0 0 18px var(--accent); }
html[data-fontsize="large"] .frank-name { font-size: 22px !important; }
html[data-fontsize="large"] .frank-role { font-size: 16px !important; }
html[data-fontsize="large"] .frank-reply { font-size: 19px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] body { font-size: 19.5px; line-height: 1.85; letter-spacing: 0.3px; }
html[data-fontsize="large"] .top-bar-title { font-size: 23px; letter-spacing: 1px; }
html[data-fontsize="large"] .btn { font-size: 20px; padding: 18px 28px; min-height: 56px; font-weight: 800; }
html[data-fontsize="large"] .btn-lg { font-size: 23px; padding: 22px 32px; min-height: 64px; }
html[data-fontsize="large"] .btn-sm { font-size: 17px; padding: 12px 20px; min-height: 48px; }
html[data-fontsize="large"] .input,
html[data-fontsize="large"] .select { font-size: 21px; padding: 20px 22px; min-height: 60px; }
html[data-fontsize="large"] .form-label { font-size: 17px; }
html[data-fontsize="large"] .rank-name { font-size: 19px; font-weight: 800; }
html[data-fontsize="large"] .rank-score { font-size: 26px; }
html[data-fontsize="large"] .rank-emoji { font-size: 28px; }
html[data-fontsize="large"] .game-card-name { font-size: 21px !important; font-weight: 800 !important; line-height: 1.5 !important; }
html[data-fontsize="large"] .game-card-desc { font-size: 18px !important; line-height: 1.7 !important; color: #fff !important; }
html[data-fontsize="large"] .game-card-icon { font-size: 44px !important; min-width: 60px; }
html[data-fontsize="large"] .game-card { padding: 18px !important; }
html[data-fontsize="large"] .chat-msg-body { font-size: 19px !important; padding: 12px 18px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .chat-msg-head { font-size: 14px !important; }
html[data-fontsize="large"] .countdown-time { font-size: 30px !important; letter-spacing: 3px !important; }
html[data-fontsize="large"] .countdown-label { font-size: 16px !important; }
html[data-fontsize="large"] #currentPhase { font-size: 15px !important; line-height: 1.6 !important; }
html[data-fontsize="large"] .info-text { font-size: 19px !important; line-height: 2 !important; }
html[data-fontsize="large"] .info-text b { font-weight: 900 !important; }
html[data-fontsize="large"] .section-title { font-size: 22px !important; font-weight: 900 !important; }
html[data-fontsize="large"] .section-desc { font-size: 17px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .simon-msg { font-size: 20px !important; line-height: 1.8 !important; }
html[data-fontsize="large"] .simon-name { font-size: 18px !important; font-weight: 900 !important; }
html[data-fontsize="large"] .frank-msg { font-size: 21px !important; line-height: 1.8 !important; }
html[data-fontsize="large"] .frank-resp-btn { font-size: 19px !important; padding: 16px 20px !important; min-height: 56px !important; }
html[data-fontsize="large"] .tab-item-label { font-size: 14px !important; font-weight: 700 !important; }
html[data-fontsize="large"] .tab-item-icon { font-size: 26px !important; }
html[data-fontsize="large"] .floor-tab { font-size: 17px !important; padding: 10px 20px !important; }
html[data-fontsize="large"] .sch-time { font-size: 17px !important; }
html[data-fontsize="large"] .sch-content { font-size: 18px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .sch-content small { font-size: 14px !important; }
html[data-fontsize="large"] .floor-tier { font-size: 19px !important; }
html[data-fontsize="large"] .floor-desc { font-size: 17px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .badge-pts,
html[data-fontsize="large"] .badge-cooking,
html[data-fontsize="large"] .badge-photo { font-size: 15px !important; padding: 4px 12px !important; }
html[data-fontsize="large"] .form-group { margin-bottom: 22px !important; }

/* === Large 模式：補強遊戲 intro、聊天標頭、Modal/Dialog、地圖角落物件 === */
html[data-fontsize="large"] .game-intro-title { font-size: 32px !important; }
html[data-fontsize="large"] .game-intro-desc { font-size: 18px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .game-intro-rounds { font-size: 16px !important; }
html[data-fontsize="large"] .chat-ch-btn { font-size: 16px !important; padding: 10px 18px !important; }
html[data-fontsize="large"] .chat-close-btn { font-size: 16px !important; padding: 10px 14px !important; }
html[data-fontsize="large"] .chat-input-bar input { font-size: 18px !important; padding: 12px 18px !important; }
html[data-fontsize="large"] .chat-input-bar button { width: 48px !important; height: 48px !important; font-size: 22px !important; }
html[data-fontsize="large"] .chat-fab { width: 64px !important; height: 64px !important; font-size: 30px !important; bottom: 90px !important; right: 14px !important; }
html[data-fontsize="large"] #chat-online-count { font-size: 15px !important; }
/* 對話框（gatekeeper / dialogue） — 多用 inline style，覆蓋常見 selector */
html[data-fontsize="large"] .dialogue-text,
html[data-fontsize="large"] .dialogue-msg,
html[data-fontsize="large"] .gk-text,
html[data-fontsize="large"] .modal-text { font-size: 19px !important; line-height: 1.8 !important; }
html[data-fontsize="large"] .dialogue-char-name { font-size: 17px !important; }
/* 緊急事件 / 通知條 */
html[data-fontsize="large"] .emergency-title { font-size: 19px !important; }
html[data-fontsize="large"] .emergency-desc { font-size: 17px !important; line-height: 1.7 !important; }
html[data-fontsize="large"] .notification-bar { font-size: 17px !important; padding: 16px 20px !important; }
/* tooltip 與 popup */
html[data-fontsize="large"] #tutorial-tip { max-width: 380px !important; }
html[data-fontsize="large"] .t-title { font-size: 19px !important; }
html[data-fontsize="large"] .t-desc { font-size: 16px !important; }
html[data-fontsize="large"] .t-btn { font-size: 16px !important; padding: 12px 16px !important; }

/* === 字級切換按鈕 — BSID 青藍配色 === */
.font-toggle {
  background: rgba(0,188,212,0.14); border: 1.5px solid rgba(0,188,212,0.55);
  color: #80DEEA; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.2s;
  padding: 0;
}
.font-toggle .ft-icon { font-size: 15px; line-height: 1; }
.font-toggle .ft-label { font-size: 11px; line-height: 1; font-weight: 900; }
.font-toggle:active { transform: scale(0.92); }
.font-toggle.active { background: linear-gradient(135deg,#00BCD4,#0097A7); color:#fff; border-color:#00BCD4; box-shadow:0 0 12px rgba(0,188,212,0.5); }

/* inline 版（嵌在 top-bar，貼在鈴鐺旁邊）*/
.font-toggle-inline {
  width: 44px; height: 36px; border-radius: 18px;
  flex-direction: column; gap: 0; margin-right: 4px;
  box-shadow: none;
}
.font-toggle-inline .ft-icon { font-size: 13px; }
.font-toggle-inline .ft-label { font-size: 9px; margin-top: 1px; }

/* float 版（極少數沒 top-bar 的頁面 fallback，如 index）*/
.font-toggle-float {
  position: fixed; top: 12px; right: 12px; z-index: 70;
  width: 56px; height: 40px; padding: 0 12px; border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.font-toggle-float .ft-icon { font-size: 15px; }
.font-toggle-float .ft-label { font-size: 11px; margin-left: 4px; }

/* Large 模式：放大按鈕本身 */
html[data-fontsize="large"] .font-toggle-inline { width: 56px; height: 42px; border-radius: 21px; border-width: 2px; }
html[data-fontsize="large"] .font-toggle-inline .ft-icon { font-size: 16px; }
html[data-fontsize="large"] .font-toggle-inline .ft-label { font-size: 11px; }
html[data-fontsize="large"] .font-toggle-float { width: 72px; height: 50px; padding: 0 16px; }
html[data-fontsize="large"] .font-toggle-float .ft-icon { font-size: 18px; }
html[data-fontsize="large"] .font-toggle-float .ft-label { font-size: 13px; }