:root {
  /* === BSID Engineer's Day 2026「一級玩家」漫畫熱血風 ===
   * 對應海報視覺：亮藍底 + 鮮黃標題 + 紅強調 + 黑色厚描邊 + halftone + speed lines + 星形爆炸框
   */
  --comic-blue:#1E88E5;
  --comic-blue-dark:#0D47A1;
  --comic-blue-light:#42A5F5;
  --comic-blue-deep:#1565C0;
  --comic-yellow:#FFD600;
  --comic-yellow-dark:#FBC02D;
  --comic-yellow-light:#FFE74D;
  --comic-red:#E53935;
  --comic-red-dark:#C62828;
  --comic-cream:#FFF8E7;
  --comic-paper:#FFFEF7;
  --comic-ink:#0A0A0A;
  --comic-success:#43A047;

  /* === 語義映射（保留舊 var 名最大化相容）=== */
  --primary:var(--comic-blue);
  --primary-dark:var(--comic-blue-dark);
  --secondary:var(--comic-yellow);
  --accent:var(--comic-red);
  --warn:#FB8C00;
  --error:var(--comic-red);
  --success:var(--comic-success);
  --bg:var(--comic-blue-deep);
  --bg-card:var(--comic-cream);
  --bg-card-strong:#FFFFFF;
  --text:var(--comic-ink);
  --text-light:#37474F;
  --text-dim:rgba(10,10,10,0.6);

  /* === 漫畫陰影系統（hard offset shadow）=== */
  --shadow-comic-sm:2px 2px 0 var(--comic-ink);
  --shadow-comic:4px 4px 0 var(--comic-ink);
  --shadow-comic-lg:6px 6px 0 var(--comic-ink);
  --shadow:var(--shadow-comic);
  --shadow-lg:var(--shadow-comic-lg);
  --glow-cyan:rgba(30,136,229,0.25);
  --glow-pink:rgba(229,57,53,0.25);
  --glow-gold:rgba(255,214,0,0.45);

  /* === 描邊系統 === */
  --border-comic:3px solid var(--comic-ink);
  --border-comic-thin:2px solid var(--comic-ink);
  --border-comic-thick:4px solid var(--comic-ink);

  /* === 圓角（漫畫風減小銳利）=== */
  --radius:8px;
  --radius-sm:4px;
  --radius-lg:12px;

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

  /* === 點擊熱區（WCAG 44px+）=== */
  --hit-sm:40px;
  --hit-md:48px;
  --hit-lg:56px;

  /* === 背景圖樣 === */
  --bg-halftone:url('../assets/comic/halftone-dots.svg');
  --bg-speedlines:url('../assets/comic/speed-lines.svg');
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body {
  font-family:'Bangers','Anton',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang TC','Noto Sans TC',sans-serif;
  background:var(--comic-blue-deep);
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,0.12), transparent 55%),
    var(--bg-halftone);
  background-repeat:repeat;
  color:var(--text);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  font-size:var(--fs-base);
  line-height:1.55;
  font-weight:600;
}

/* === Buttons（漫畫風：實底 + 黑邊 + 偏移影 + 按下沉入）=== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; min-height:var(--hit-md);
  border-radius:var(--radius);
  font-size:var(--fs-md); font-weight:900; letter-spacing:0.5px;
  border:var(--border-comic); color:var(--comic-ink);
  background:#fff;
  box-shadow:var(--shadow-comic);
  cursor:pointer;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
  line-height:1.2;
  text-decoration:none;
}
.btn:active { transform:translate(3px,3px); box-shadow:0 0 0 var(--comic-ink); }
.btn-primary { background:var(--comic-blue); color:#fff; text-shadow:1px 1px 0 var(--comic-ink); }
.btn-secondary { background:var(--comic-yellow); color:var(--comic-ink); }
.btn-accent { background:var(--comic-red); color:#fff; text-shadow:1px 1px 0 var(--comic-ink); }
.btn-outline { background:#fff; color:var(--comic-ink); }
.btn-block { width:100%; }
.btn-lg { padding:16px 28px; min-height:var(--hit-lg); font-size:var(--fs-lg); border-radius:10px; box-shadow:var(--shadow-comic-lg); border-width:4px; }
.btn-lg:active { transform:translate(4px,4px); box-shadow:0 0 0 var(--comic-ink); }
.btn-sm { padding:8px 14px; min-height:36px; font-size:var(--fs-sm); border-width:2px; box-shadow:var(--shadow-comic-sm); }
.btn-sm:active { transform:translate(2px,2px); box-shadow:0 0 0 var(--comic-ink); }
.btn[disabled] { opacity:0.55; cursor:not-allowed; }
.btn[disabled]:active { transform:none; box-shadow:var(--shadow-comic); }

/* === Inputs === */
.input,.select {
  width:100%; padding:13px 14px; min-height:var(--hit-md);
  border:var(--border-comic);
  border-radius:var(--radius);
  font-size:var(--fs-md); font-weight:700;
  background:#fff; color:var(--comic-ink);
  outline:none;
  box-shadow:var(--shadow-comic-sm);
  transition:transform 0.08s ease, box-shadow 0.08s ease;
  font-family:inherit;
}
.input:focus,.select:focus {
  background:var(--comic-yellow-light);
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--comic-ink);
}
.form-group { margin-bottom:18px; }
.form-label {
  display:block; font-size:var(--fs-sm); font-weight:900;
  color:var(--comic-ink); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:1.5px;
}

/* === Cards（漫畫風白底黑邊偏移影）=== */
.card {
  background:var(--bg-card);
  border:var(--border-comic);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow-comic);
  color:var(--text);
  position:relative;
}

/* === 漫畫風通用卡片變體 === */
.comic-card {
  background:var(--comic-cream);
  border:var(--border-comic);
  border-radius:10px;
  padding:18px;
  box-shadow:var(--shadow-comic);
  position:relative;
  color:var(--comic-ink);
}
.comic-card.paper { background:var(--comic-paper); }
.comic-card.blue { background:var(--comic-blue); color:#fff; }
.comic-card.yellow { background:var(--comic-yellow); color:var(--comic-ink); }
.comic-card.red { background:var(--comic-red); color:#fff; }

/* === 漫畫風斜切標籤（卡片頂部標頭 / "活動簡介:" 海報樣式）=== */
.comic-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--comic-blue);
  color:#fff; font-weight:900;
  padding:8px 22px 8px 16px;
  border:var(--border-comic);
  box-shadow:var(--shadow-comic-sm);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
  font-size:var(--fs-md);
  letter-spacing:1px;
  margin-bottom:12px;
}
.comic-tag::before { content:'★'; color:var(--comic-yellow); font-size:1.15em; line-height:1; }
.comic-tag.yellow { background:var(--comic-yellow); color:var(--comic-ink); }
.comic-tag.yellow::before { color:var(--comic-red); }
.comic-tag.red { background:var(--comic-red); color:#fff; }

/* === 16-pt 星形爆炸編號徽章 === */
.callout-star {
  width:56px; height:56px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:url('../assets/comic/star-burst.svg') center/contain no-repeat;
  color:var(--comic-ink); font-weight:900; font-size:22px;
  filter:drop-shadow(3px 3px 0 var(--comic-ink));
  font-family:'Anton','Bangers',sans-serif;
}
.callout-star.lg { width:72px; height:72px; font-size:28px; }
.callout-star.sm { width:42px; height:42px; font-size:16px; }
.callout-star.yellow { background-image:url('../assets/comic/star-burst-yellow.svg'); }

/* === 漫畫標題字（黃填充 + 黑描邊 + 微傾斜）=== */
.comic-title {
  font-family:'Anton','Bangers','Noto Sans TC',sans-serif;
  font-size:var(--fs-hero);
  font-weight:900;
  color:var(--comic-yellow);
  -webkit-text-stroke:3px var(--comic-ink);
  text-shadow:4px 4px 0 var(--comic-ink);
  letter-spacing:2px;
  line-height:1.05;
  transform:rotate(-1deg);
  display:inline-block;
  paint-order:stroke fill;
}
.comic-title.white { color:#fff; }
.comic-title.red { color:var(--comic-red); }
.comic-title.lg { font-size:48px; -webkit-text-stroke-width:4px; text-shadow:6px 6px 0 var(--comic-ink); }
.comic-title.sm { font-size:24px; -webkit-text-stroke-width:2px; text-shadow:3px 3px 0 var(--comic-ink); }

.comic-subtitle {
  font-family:'Anton','Bangers',sans-serif;
  font-size:var(--fs-xl);
  font-weight:900;
  color:#fff;
  -webkit-text-stroke:2px var(--comic-ink);
  text-shadow:3px 3px 0 var(--comic-ink);
  letter-spacing:1px;
  display:inline-block;
  paint-order:stroke fill;
}

/* === 漫畫強調字 === */
.cm-red { color:var(--comic-red); font-weight:900; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.cm-blue { color:var(--comic-blue); font-weight:900; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
.cm-yellow-hl { background:var(--comic-yellow); padding:2px 6px; border-radius:3px; font-weight:900; box-shadow:2px 2px 0 var(--comic-ink); }

/* === Halftone / Speed lines 背景輔助 === */
.halftone-bg {
  background-image:var(--bg-halftone);
  background-repeat:repeat;
}
.halftone-yellow {
  background-color:var(--comic-yellow);
  background-image:url('../assets/comic/halftone-yellow.svg');
  background-repeat:repeat;
}
.speed-lines-bg {
  position:relative;
}
.speed-lines-bg::before {
  content:''; position:absolute; inset:0;
  background:var(--bg-speedlines) center/cover no-repeat;
  pointer-events:none;
  z-index:0;
}
.speed-lines-bg > * { position:relative; z-index:1; }

/* === 點線分隔 === */
.divider-dots {
  height:1px;
  background-image:linear-gradient(to right, var(--comic-ink) 50%, transparent 0%);
  background-size:8px 1px;
  background-repeat:repeat-x;
  margin:10px 0;
  opacity:0.4;
}

/* === 喇叭橫條（底部「貼心提醒」）=== */
.megaphone-banner {
  background:var(--comic-cream);
  border:var(--border-comic);
  border-radius:8px;
  padding:10px 14px;
  box-shadow:var(--shadow-comic-sm);
  display:flex; align-items:center; gap:10px;
  font-weight:700; color:var(--comic-ink);
}
.megaphone-banner::before {
  content:'';
  width:36px; height:30px; flex-shrink:0;
  background:url('../assets/comic/megaphone.svg') center/contain no-repeat;
}

/* === Notification / Panels === */
.notification-bar {
  position:fixed; top:-80px; left:12px; right:12px;
  background:var(--comic-yellow);
  border:var(--border-comic);
  padding:12px 16px; border-radius:8px;
  box-shadow:var(--shadow-comic);
  z-index:200;
  transition:top 0.4s ease;
  font-size:var(--fs-md); color:var(--comic-ink);
  font-weight:800;
}
.notification-bar.show { top:60px; }
.message-panel {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--comic-blue-deep);
  background-image:var(--bg-halftone);
  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:10px 14px;
  background:var(--comic-blue);
  border-bottom:var(--border-comic);
  z-index:50;
  color:#fff;
}
.top-bar-back {
  background:var(--comic-yellow); border:var(--border-comic-thin);
  font-size:18px; font-weight:900;
  cursor:pointer; width:42px; height:42px; border-radius:8px;
  color:var(--comic-ink);
  box-shadow:var(--shadow-comic-sm);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.top-bar-back:active { transform:translate(2px,2px); box-shadow:none; }
.top-bar-title {
  flex:1; text-align:center;
  font-size:var(--fs-lg); font-weight:900;
  color:#fff;
  text-shadow:2px 2px 0 var(--comic-ink);
  letter-spacing:1px;
}

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

/* === Ranking（排行榜：漫畫卡 + callout 星）=== */
.rank-item {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:var(--comic-cream);
  border:var(--border-comic);
  border-radius:10px;
  margin-bottom:12px;
  box-shadow:var(--shadow-comic);
  animation:fadeIn 0.3s ease both;
  color:var(--comic-ink);
}
.rank-number {
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-md); font-weight:900;
  flex-shrink:0;
  background:url('../assets/comic/star-burst.svg') center/contain no-repeat;
  color:var(--comic-ink);
  filter:drop-shadow(2px 2px 0 var(--comic-ink));
}
.rank-number.top1,
.rank-number.top2,
.rank-number.top3 {
  background-image:url('../assets/comic/star-burst-yellow.svg');
  color:var(--comic-ink);
}
.rank-number.top1 { width:54px; height:54px; font-size:var(--fs-lg); }
.rank-emoji { font-size:26px; filter:drop-shadow(1px 1px 0 var(--comic-ink)); }
.rank-name { font-size:var(--fs-md); font-weight:900; color:var(--comic-ink); }
.rank-bar {
  height:8px;
  background:linear-gradient(to right, var(--comic-yellow), var(--comic-red));
  border:1.5px solid var(--comic-ink);
  border-radius:3px; margin-top:4px;
  transition:width 0.5s;
}
.rank-score {
  font-size:var(--fs-xl); font-weight:900;
  color:var(--comic-red);
  font-family:'Anton','Bangers',sans-serif;
  -webkit-text-stroke:1px var(--comic-ink);
}
.my-team {
  background:var(--comic-yellow);
  border-width:4px;
  box-shadow:var(--shadow-comic-lg);
}

/* === Game HUD === */
.game-hud {
  display:flex; justify-content:space-around;
  padding:10px 14px;
  background:var(--comic-yellow);
  border-bottom:var(--border-comic);
}
.hud-item { text-align:center; }
.hud-label {
  font-size:11px; font-weight:900;
  color:var(--comic-ink); letter-spacing:1px;
  text-transform:uppercase;
}
.hud-value {
  font-size:var(--fs-xl); font-weight:900;
  color:var(--comic-ink);
  font-family:'Anton','Bangers',sans-serif;
  text-shadow:2px 2px 0 var(--comic-yellow-dark);
}
.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; border:var(--border-comic); border-radius:8px; box-shadow:var(--shadow-comic); background:#fff; }

.danmaku-item {
  position:absolute; right:-300px; white-space:nowrap;
  color:#fff; font-weight:900;
  text-shadow:2px 2px 0 var(--comic-ink), -1px -1px 0 var(--comic-ink), 1px -1px 0 var(--comic-ink), -1px 1px 0 var(--comic-ink);
  font-size:var(--fs-sm);
  animation:danmakuScroll 8s linear forwards;
  pointer-events:none;
}

/* === NPC（Frank 領隊系統）=== */
.leader-card {
  background:var(--comic-cream);
  background-image:var(--bg-halftone);
  border:var(--border-comic);
  border-radius:10px;
  padding:14px 16px;
  display:flex; align-items:center; gap:14px;
  margin:12px 0;
  box-shadow:var(--shadow-comic);
  color:var(--comic-ink);
  position:relative;
}
.leader-card::before {
  content:'領隊';
  position:absolute; top:-12px; left:14px;
  background:var(--comic-yellow);
  color:var(--comic-ink);
  font-weight:900; font-size:11px;
  padding:3px 10px;
  border:var(--border-comic-thin);
  border-radius:4px;
  letter-spacing:1.5px;
  box-shadow:var(--shadow-comic-sm);
}
.leader-avatar {
  width:64px; height:64px; flex-shrink:0;
  border-radius:50%;
  background:var(--comic-yellow);
  display:flex; align-items:center; justify-content:center;
  font-size:38px;
  border:var(--border-comic);
  box-shadow:var(--shadow-comic-sm);
  position:relative;
  transition:transform .3s ease;
}
.leader-avatar[class*="mood-"]::after {
  position:absolute; right:-6px; bottom:-6px;
  width:28px; height:28px; border-radius:50%;
  background:#fff;
  border:var(--border-comic-thin);
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  animation:moodPop 0.5s ease both;
  box-shadow:var(--shadow-comic-sm);
}
.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:var(--shadow-comic-sm); }
  50%   { box-shadow:0 0 0 4px var(--comic-yellow), var(--shadow-comic); }
}
.leader-info { flex:1; min-width:0; }
.leader-name { font-size:var(--fs-lg); font-weight:900; color:var(--comic-ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.leader-nick { font-size:var(--fs-sm); color:var(--comic-blue-dark); margin-top:2px; font-weight:700; }
.leader-role { font-size:var(--fs-xs); color:var(--text-light); margin-top:4px; font-weight:700; }
.leader-quote { font-size:var(--fs-sm); color:var(--comic-ink); margin-top:10px; line-height:1.6; font-weight:700; padding-left:10px; border-left:3px solid var(--comic-red); }
.npc-badge {
  display:inline-block; padding:3px 10px; border-radius:4px;
  font-size:11px; font-weight:900;
  background:var(--comic-red); color:#fff;
  border:var(--border-comic-thin);
  box-shadow:var(--shadow-comic-sm);
}

/* === 緊湊型領隊卡（map 頂部用）=== */
.leader-card.compact { padding:8px 12px; gap:10px; margin:10px 12px; }
.leader-card.compact::before { font-size:10px; padding:2px 8px; top:-10px; }
.leader-card.compact .leader-avatar { width:44px; height:44px; font-size:24px; border-width:2px; }
.leader-card.compact .leader-avatar[class*="mood-"]::after { width:20px; height:20px; font-size:11px; right:-4px; bottom:-4px; }
.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:
    var(--bg-speedlines) center/cover no-repeat,
    radial-gradient(circle, var(--comic-yellow), var(--comic-red) 70%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  animation:cheerIn 0.45s ease, cheerOut 0.5s ease 2.3s forwards;
  pointer-events:none;
}
.frank-cheer-portrait {
  font-size:120px;
  animation:cheerBounce 0.55s ease infinite alternate;
  filter:drop-shadow(4px 4px 0 var(--comic-ink));
  background:#fff;
  border:6px solid var(--comic-ink);
  border-radius:50%;
  width:180px; height:180px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:8px 8px 0 var(--comic-ink);
}
.frank-cheer-text {
  font-family:'Anton','Bangers',sans-serif;
  font-size:42px; font-weight:900;
  color:var(--comic-yellow);
  -webkit-text-stroke:3px var(--comic-ink);
  text-shadow:5px 5px 0 var(--comic-ink);
  margin-top:24px;
  text-align:center; padding:0 20px;
  letter-spacing:2px;
  transform:rotate(-2deg);
}
.frank-cheer-sub {
  font-size:var(--fs-lg); font-weight:900;
  color:#fff;
  -webkit-text-stroke:1.5px var(--comic-ink);
  text-shadow:3px 3px 0 var(--comic-ink);
  margin-top:10px;
}
@keyframes cheerIn  { from{opacity:0;transform:scale(0.7) rotate(-8deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes cheerOut { to{opacity:0;transform:scale(1.2)} }
@keyframes cheerBounce { from{transform:translateY(-10px) rotate(-3deg)} to{transform:translateY(10px) rotate(3deg)} }

@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:4px solid var(--comic-ink);
  border-top-color:var(--comic-yellow);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
  margin:0 auto;
  background:#fff;
}
@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; --fs-hero:28px; }
  .btn { padding:11px 16px; }
  .btn-lg { padding:13px 22px; font-size:var(--fs-md); }
  .leader-avatar { width:54px; height:54px; font-size:32px; }
  .comic-title { font-size:26px; -webkit-text-stroke-width:2.5px; text-shadow:3px 3px 0 var(--comic-ink); }
}
/* === 大螢幕（pad/desktop 預覽）=== */
@media (min-width:640px) {
  .page-container { max-width:560px; padding:24px; }
  .danmaku-item { font-size:15px; }
}

/* === Accessibility === */
:focus-visible { outline:3px solid var(--comic-red); outline-offset:3px; border-radius:4px; }
.btn:focus-visible { outline-offset:4px; }
.input:focus-visible, .select:focus-visible { outline:none; }
.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(--comic-yellow); color:var(--comic-ink); z-index:9999; border-radius:4px; border:var(--border-comic-thin); }

/* === 偏好設定：減少動畫 === */
@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; }
  .comic-title { transform:none; }
}

/* === 印刷 / 高對比 === */
@media (prefers-contrast: more) {
  :root { --border-comic:4px solid #000; --shadow-comic:5px 5px 0 #000; }
}

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

html[data-fontsize="large"] {
  font-size: 22px;
  --fs-xs: 14px;
  --fs-sm: 16px;
  --fs-base: 18px;
  --fs-md: 19px;
  --fs-lg: 22px;
  --fs-xl: 26px;
  --fs-2xl: 32px;
  --fs-hero: 40px;
}
html[data-fontsize="large"] .leader-card.compact { padding: 12px 16px; gap: 14px; }
html[data-fontsize="large"] .leader-card.compact .leader-avatar { width: 54px; height: 54px; font-size: 30px; }
html[data-fontsize="large"] .leader-card.compact .leader-nick { font-size: 14px; }
html[data-fontsize="large"] .frank-cheer-portrait { width:220px !important; height:220px !important; font-size:150px !important; }
html[data-fontsize="large"] .frank-cheer-text { font-size:52px !important; }
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: 900; }
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: 18px 20px; min-height: 60px; }
html[data-fontsize="large"] .form-label { font-size: 17px; }
html[data-fontsize="large"] .rank-name { font-size: 19px; font-weight: 900; }
html[data-fontsize="large"] .rank-score { font-size: 28px; }
html[data-fontsize="large"] .rank-emoji { font-size: 30px; }
html[data-fontsize="large"] .rank-number { width:54px; height:54px; font-size: 19px; }
html[data-fontsize="large"] .rank-number.top1 { width:64px; height:64px; font-size:22px; }
html[data-fontsize="large"] .game-card-name { font-size: 21px !important; font-weight: 900 !important; line-height: 1.5 !important; }
html[data-fontsize="large"] .game-card-desc { font-size: 18px !important; line-height: 1.7 !important; color: var(--comic-ink) !important; font-weight:700; }
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: 24px !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: 900 !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; }
html[data-fontsize="large"] .comic-title { font-size:48px; -webkit-text-stroke-width:4px; text-shadow:5px 5px 0 var(--comic-ink); }
html[data-fontsize="large"] .comic-tag { font-size:18px; padding:10px 26px 10px 18px; }
html[data-fontsize="large"] .callout-star { width:64px; height:64px; font-size:24px; }
html[data-fontsize="large"] .megaphone-banner { font-size:18px; padding:14px 18px; }

/* === 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; }
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; }
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; }

/* === 字級切換按鈕 — 漫畫風配色 === */
.font-toggle {
  background: var(--comic-yellow);
  border: var(--border-comic-thin);
  color: var(--comic-ink); font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 0.1s, box-shadow 0.1s;
  padding: 0;
  box-shadow: var(--shadow-comic-sm);
}
.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: translate(2px,2px); box-shadow: 0 0 0 var(--comic-ink); }
.font-toggle.active { background: var(--comic-red); color:#fff; }

.font-toggle-inline {
  width: 44px; height: 36px; border-radius: 6px;
  flex-direction: column; gap: 0; margin-right: 4px;
}
.font-toggle-inline .ft-icon { font-size: 13px; }
.font-toggle-inline .ft-label { font-size: 9px; margin-top: 1px; }

.font-toggle-float {
  position: fixed; top: 12px; right: 12px; z-index: 70;
  width: 56px; height: 40px; padding: 0 12px; border-radius: 6px;
}
.font-toggle-float .ft-icon { font-size: 15px; }
.font-toggle-float .ft-label { font-size: 11px; margin-left: 4px; }

html[data-fontsize="large"] .font-toggle-inline { width: 56px; height: 42px; border-width: 3px; }
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; }

/* === 共用：頁面背景（替代 inline 的 #0a0a1a）=== */
.page-bg {
  background:var(--comic-blue-deep);
  background-image:
    radial-gradient(ellipse at top, rgba(255,255,255,0.10), transparent 60%),
    var(--bg-halftone);
  min-height:100vh;
}

/* === 頂部彩色橫條 / 場地裝飾（漫畫海報底）=== */
.comic-strip {
  background:repeating-linear-gradient(
    45deg,
    var(--comic-yellow) 0 24px,
    var(--comic-blue) 24px 48px,
    var(--comic-red) 48px 72px
  );
  height:12px;
  border-top:var(--border-comic-thin);
  border-bottom:var(--border-comic-thin);
}