:root {
  /* === 巨城遊樂嘉年華 主題（夜晚嘉年華 Night Carnival） ===
   * --primary   珊瑚紅 #FF4D6D   嘉年華主色
   * --secondary 檸檬黃 #FFC23C   票券／燈光
   * --accent    薄荷綠 #2EC4B6   清爽點綴
   * --grape     葡萄紫 #C77DFF   夜間霓虹
   * --sky       天空藍 #4CC9F0   風城天空
   * --bg        莓果夜紫 #241130 （暖色深底，與 ICSD 冷藍黑徹底區隔）
   * --text      暖奶白 #FFF3E9
   */
  --primary:#FF4D6D; --primary-dark:#E63956;
  --secondary:#FFC23C; --secondary-dark:#FFAA00;
  --accent:#2EC4B6; --accent-dark:#1FA89B;
  --grape:#C77DFF; --sky:#4CC9F0;
  --bg:#241130; --bg-2:#2E1640; --bg-card:rgba(255,255,255,0.07);
  --text:#FFF3E9; --text-light:#D7C2D6;
  --line:rgba(255,255,255,0.14);
  --shadow:0 8px 28px rgba(0,0,0,0.40);
  --shadow-sm:0 4px 16px rgba(0,0,0,0.32);
  --radius:18px;
  /* legacy 別名（沿用 ICSD 頁面舊變數名，避免破版） */
  --hanshin:#C77DFF;
  --glow-cyan:rgba(46,196,182,0.40); --glow-pink:rgba(255,77,109,0.40); --glow-blue:rgba(76,201,240,0.42);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Baloo 2','Nunito',-apple-system,BlinkMacSystemFont,'PingFang TC','Microsoft JhengHei',sans-serif;
  background:var(--bg); color:var(--text); -webkit-tap-highlight-color:transparent; overflow-x:hidden;
}
/* 嘉年華底圖存在時，body 透明讓背景顯現 */
body:has(.carnival-bg), body:has(.tech-stars-bg) { background:transparent; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:13px 26px; border-radius:999px; font-size:15px; font-weight:800; border:none; cursor:pointer; transition:transform 0.12s, box-shadow 0.2s; letter-spacing:0.5px; }
.btn:active { transform:translateY(2px) scale(0.99); }
.btn-primary { background:linear-gradient(135deg,#FF6B85,#FF4D6D); color:#fff; box-shadow:0 5px 0 #B82742, 0 10px 18px rgba(255,77,109,0.40); }
.btn-primary:active { box-shadow:0 2px 0 #B82742, 0 5px 10px rgba(255,77,109,0.40); }
.btn-secondary { background:linear-gradient(135deg,#FFD23F,#FFB300); color:#5A3000; box-shadow:0 5px 0 #C98A00, 0 10px 18px rgba(255,179,0,0.38); }
.btn-secondary:active { box-shadow:0 2px 0 #C98A00, 0 5px 10px rgba(255,179,0,0.38); }
.btn-accent { background:linear-gradient(135deg,#41D8C9,#2EC4B6); color:#06302C; box-shadow:0 5px 0 #178479, 0 10px 18px rgba(46,196,182,0.36); }
.btn-grape { background:linear-gradient(135deg,#C77DFF,#A24BE8); color:#fff; box-shadow:0 5px 0 #7A30C0, 0 10px 18px rgba(199,125,255,0.36); }
.btn-outline { background:transparent; border:2.5px dashed var(--secondary); color:var(--secondary); }
.btn-block { width:100%; }
.btn-lg { padding:16px 30px; font-size:17px; }
.btn-sm { padding:8px 16px; font-size:13px; }

.input,.select { width:100%; padding:14px 16px; border:2px solid var(--line); border-radius:14px; font-size:15px; background:rgba(255,255,255,0.06); color:var(--text); outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-weight:600; }
.input:focus,.select:focus { border-color:var(--primary); box-shadow:0 0 0 4px var(--glow-pink); }
.input::placeholder { color:rgba(255,243,233,0.4); }
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:800; color:var(--secondary); margin-bottom:6px; letter-spacing:1px; }

/* 卡片（半透明，浮在夜晚嘉年華底圖上） */
.card { background:var(--bg-card); border:1.5px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); backdrop-filter:blur(10px); position:relative; }

.notification-bar { position:fixed; top:-60px; left:16px; right:16px; background:rgba(46,22,64,0.96); border:2px solid var(--secondary); padding:12px 16px; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,0.45); z-index:200; transition:top 0.4s ease; font-size:14px; color:var(--text); font-weight:700; backdrop-filter:blur(8px); }
.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 { position:sticky; top:0; display:flex; align-items:center; padding:12px 16px; background:rgba(36,17,48,0.92); border-bottom:3px solid var(--secondary); z-index:50; backdrop-filter:blur(10px); box-shadow:0 4px 14px rgba(0,0,0,0.3); }
.top-bar-back { background:none; border:none; font-size:22px; cursor:pointer; width:40px; color:var(--secondary); font-weight:900; }
.top-bar-title { flex:1; text-align:center; font-size:17px; font-weight:900; color:var(--text); letter-spacing:0.5px; }
.page-container { padding:16px; max-width:480px; margin:0 auto; }

/* 排行榜 */
.rank-item { display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--bg-card); border:1.5px solid var(--line); border-radius:16px; margin-bottom:10px; box-shadow:var(--shadow-sm); animation:fadeIn 0.3s ease both; backdrop-filter:blur(8px); }
.rank-number { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.12); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:900; color:var(--text-light); }
.rank-number.top1 { background:linear-gradient(135deg,#FFD23F,#FFAA00); color:#5A3000; box-shadow:0 0 14px rgba(255,194,60,0.55); }
.rank-number.top2 { background:linear-gradient(135deg,#E6EEF6,#A9B6C4); color:#33414F; }
.rank-number.top3 { background:linear-gradient(135deg,#F6B98A,#D98A52); color:#5A2E12; }
.rank-emoji { font-size:22px; }
.rank-name { font-size:15px; font-weight:800; }
.rank-bar { height:6px; background:linear-gradient(to right,var(--primary),var(--secondary)); border-radius:99px; margin-top:5px; transition:width 0.5s; }
.rank-score { font-size:19px; font-weight:900; color:var(--secondary); }
.my-team { background:linear-gradient(135deg,rgba(255,77,109,0.22),rgba(255,194,60,0.16)); border-color:var(--secondary); box-shadow:0 0 0 2px rgba(255,194,60,0.25), var(--shadow-sm); }

/* 遊戲 HUD（蓋在 canvas 上） */
.game-hud { display:flex; justify-content:space-around; padding:8px 16px; background:rgba(0,0,0,0.30); border-radius:14px; }
.hud-item { text-align:center; }
.hud-label { font-size:11px; color:#FFE082; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,0.6); }
.hud-value { font-size:20px; font-weight:900; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.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,243,233,0.55); font-size:13px; font-weight:700; animation:danmakuScroll 8s linear forwards; pointer-events:none; }
@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:34px; height:34px; border:4px solid rgba(255,77,109,0.20); border-top-color:var(--primary); border-radius:50%; animation:spin 0.6s linear infinite; margin:0 auto; }

/* === 長輩友善字體模式（按頂部 Aa+ 啟用，全頁字體 ×1.25） === */
html.font-large body { font-size:18px; }
html.font-large .top-bar-title { font-size:20px !important; }
html.font-large .btn { font-size:17px; }
html.font-large .btn-lg { font-size:19px; }
html.font-large .input, html.font-large .select { font-size:17px; }
html.font-large .game-card-name { font-size:17px !important; }
html.font-large .game-card-desc { font-size:14px !important; }
html.font-large .simon-msg { font-size:16px !important; line-height:1.5; }
html.font-large .simon-name { font-size:15px !important; }
html.font-large .login-title { font-size:26px !important; }
html.font-large .login-welcome { font-size:14px !important; }
html.font-large .form-label { font-size:15px !important; }
html.font-large .info-hero-title { font-size:28px !important; }
html.font-large .sch-content { font-size:15px !important; }
html.font-large .sch-time { font-size:15px !important; }
html.font-large .section-header-title { font-size:21px !important; }
html.font-large .section-title { font-size:17px !important; }
/* 頂部字體開關按鈕 */
.font-toggle-btn { display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:6px 10px; background:rgba(255,194,60,0.12); border:2px solid rgba(255,194,60,0.4); border-radius:18px; color:var(--secondary); font-weight:900; font-size:13px; cursor:pointer; transition:all 0.15s; min-width:44px; min-height:32px; }
.font-toggle-btn:active { transform:scale(0.95); }
.font-toggle-btn.on { background:linear-gradient(135deg,#FFD23F,#FFB300); color:#5A3000; border-color:#FFB300; box-shadow:0 0 10px rgba(255,179,0,0.4); }
.font-toggle-btn .icon { font-size:14px; line-height:1; }
.font-toggle-btn .plus { font-size:11px; opacity:0.85; }

/* ============================================================
 * 🎪 CARNIVAL 夜晚嘉年華背景 — 莓果夜紫 + 彩色光暈 + 彩紙 + 串燈 + 漂浮氣球
 * Usage: 在 <body> 開頭加 <div class="carnival-bg"></div>
 *        （別名 .tech-stars-bg / .tech-grid-overlay / .tech-shooting-star
 *          沿用 ICSD 頁面，免改 body 也能套用嘉年華主題）
 * 純 CSS、GPU 加速、無 JS
 * ============================================================ */
.carnival-bg, .tech-stars-bg {
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(ellipse 75% 50% at 50% -10%, rgba(199,125,255,0.32), transparent 70%),
    radial-gradient(ellipse 55% 40% at 14% 24%, rgba(255,77,109,0.24), transparent 70%),
    radial-gradient(ellipse 55% 40% at 86% 76%, rgba(76,201,240,0.20), transparent 70%),
    radial-gradient(ellipse 50% 35% at 82% 18%, rgba(255,194,60,0.18), transparent 70%),
    linear-gradient(180deg, #2A1533 0%, #1E0F2A 58%, #2A1533 100%);
}
/* 彩紙碎片（confetti，在深底上很跳） */
.carnival-bg::before, .tech-stars-bg::before {
  content:""; position:absolute; inset:-12%; pointer-events:none;
  background-image:
    radial-gradient(5px 5px at 12% 14%, #FF4D6D 60%, transparent 100%),
    radial-gradient(4px 4px at 31% 58%, #FFC23C 60%, transparent 100%),
    radial-gradient(5px 5px at 47% 22%, #2EC4B6 60%, transparent 100%),
    radial-gradient(4px 4px at 58% 71%, #C77DFF 60%, transparent 100%),
    radial-gradient(5px 5px at 73% 11%, #4CC9F0 60%, transparent 100%),
    radial-gradient(4px 4px at 89% 47%, #FF4D6D 60%, transparent 100%),
    radial-gradient(5px 5px at 17% 83%, #FFC23C 60%, transparent 100%),
    radial-gradient(4px 4px at 38% 91%, #2EC4B6 60%, transparent 100%),
    radial-gradient(5px 5px at 64% 87%, #C77DFF 60%, transparent 100%),
    radial-gradient(4px 4px at 9% 39%, #4CC9F0 60%, transparent 100%);
  background-size: 460px 460px; background-repeat: repeat;
  animation: confettiFloat1 7s ease-in-out infinite alternate; opacity:0.9;
}
/* 光點層（bokeh 燈光） */
.carnival-bg::after, .tech-stars-bg::after {
  content:""; position:absolute; inset:-12%; pointer-events:none;
  background-image: radial-gradient(9px 9px at 22px 22px, rgba(255,210,120,0.10) 60%, transparent 100%);
  background-size: 60px 60px; background-repeat: repeat;
  animation: confettiFloat2 9s ease-in-out infinite alternate; opacity:0.85;
}
@keyframes confettiFloat1 {
  0%{opacity:0.65; transform:translate3d(0,0,0) rotate(0deg);}
  50%{opacity:1;}
  100%{opacity:0.75; transform:translate3d(-8px,10px,0) rotate(2deg);}
}
@keyframes confettiFloat2 {
  0%{opacity:0.55; transform:translate3d(0,0,0);}
  100%{opacity:0.9; transform:translate3d(10px,8px,0);}
}

/* 頂部串燈 bunting（別名 .tech-grid-overlay）— 發光小燈泡一串 */
.carnival-bunting, .tech-grid-overlay {
  position:fixed; top:0; left:-5%; right:-5%; height:16px; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(4px 4px at 11px 9px, #FF4D6D 60%, transparent 100%),
    radial-gradient(4px 4px at 33px 9px, #FFC23C 60%, transparent 100%),
    radial-gradient(4px 4px at 55px 9px, #2EC4B6 60%, transparent 100%),
    radial-gradient(4px 4px at 77px 9px, #4CC9F0 60%, transparent 100%),
    radial-gradient(4px 4px at 99px 9px, #C77DFF 60%, transparent 100%);
  background-size: 110px 16px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 4px rgba(255,210,120,0.5));
  animation: buntingGlow 2.4s ease-in-out infinite alternate; opacity:0.95;
}
@keyframes buntingGlow { from{opacity:0.7} to{opacity:1} }

/* 漂浮氣球（別名 .tech-shooting-star）— 緩緩上升、發光 */
.carnival-balloon, .tech-shooting-star {
  position:fixed; bottom:-80px; left:12%; width:38px; height:46px; z-index:-1; pointer-events:none;
  background:radial-gradient(circle at 35% 30%, #FF8FA3, #FF4D6D 70%); border-radius:50% 50% 48% 48%;
  box-shadow:0 0 18px rgba(255,77,109,0.4);
  animation: balloonRise 16s linear infinite; opacity:0;
}
.carnival-balloon::after, .tech-shooting-star::after {
  content:""; position:absolute; bottom:-26px; left:50%; width:1px; height:26px; background:rgba(255,243,233,0.3); transform:translateX(-50%);
}
.carnival-balloon.b, .tech-shooting-star.b {
  left:80%; width:32px; height:40px; animation-duration:21s; animation-delay:6s;
  background:radial-gradient(circle at 35% 30%, #7FE3FB, #4CC9F0 70%);
  box-shadow:0 0 18px rgba(76,201,240,0.4);
}
@keyframes balloonRise {
  0%{transform:translateY(0) translateX(0) rotate(-4deg); opacity:0;}
  10%{opacity:0.85;}
  90%{opacity:0.85;}
  100%{transform:translateY(-118vh) translateX(24px) rotate(4deg); opacity:0;}
}

/* 行動裝置降低密度 */
@media (max-width: 480px) {
  .carnival-bg::before, .tech-stars-bg::before { background-size: 380px 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .carnival-bg::before, .carnival-bg::after, .tech-stars-bg::before, .tech-stars-bg::after,
  .carnival-bunting, .tech-grid-overlay, .carnival-balloon, .tech-shooting-star { animation: none !important; }
}

/* ============================================================
 * 🎟️ 嘉年華元件：票券缺口卡、集點印章
 * ============================================================ */
.ticket-card { position:relative; background:var(--bg-card); border-radius:18px; padding:22px; box-shadow:var(--shadow); border:2px dashed var(--line); backdrop-filter:blur(10px); }
.ticket-card::before, .ticket-card::after { content:""; position:absolute; top:50%; width:22px; height:22px; background:var(--bg); border-radius:50%; transform:translateY(-50%); }
.ticket-card::before { left:-12px; } .ticket-card::after { right:-12px; }
.stamp { display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; border:3px dashed var(--secondary); color:var(--secondary); font-weight:900; font-size:22px; transform:rotate(-8deg); }
.stamp.done { background:var(--primary); color:#fff; border-style:solid; border-color:var(--primary); }

/* === 主持人「城寶團長」mascot（沿用 ICSD .simon-* 類名，免改頁面） === */
.simon-banner { display:flex; align-items:center; gap:12px; padding:13px 16px; margin:12px 0; background:linear-gradient(135deg,rgba(255,77,109,0.22),rgba(255,194,60,0.16)); border:2px solid var(--secondary); border-radius:18px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; backdrop-filter:blur(8px); }
.simon-banner::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 50%, rgba(255,194,60,0.18), transparent 60%); pointer-events:none; }
.simon-avatar { width:56px; height:56px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FF8FA3, #FF4D6D 75%); flex-shrink:0; box-shadow:0 0 0 3px rgba(255,255,255,0.18), 0 0 16px rgba(255,77,109,0.5); display:flex; align-items:center; justify-content:center; font-size:30px; position:relative; z-index:1; }
.simon-avatar::after { content:"🎩"; }
.simon-text { flex:1; position:relative; z-index:1; }
.simon-name { font-size:13px; font-weight:900; color:var(--secondary); letter-spacing:1px; }
.simon-msg { font-size:14px; color:var(--text); margin-top:2px; line-height:1.45; font-weight:600; }
/* 嘉年華徽章（沿用 ICSD .hanshin-badge 類名） */
.hanshin-badge, .carnival-badge { display:inline-block; padding:5px 14px; background:linear-gradient(135deg,#FFD23F,#FFAA00); color:#5A3000; font-weight:900; font-size:11px; letter-spacing:2px; border-radius:999px; box-shadow:0 3px 8px rgba(255,179,0,0.35); }
/* 城寶團長激勵彈跳訊息（沿用 .simon-cheer 類名） */
.simon-cheer { position:fixed; bottom:24%; left:50%; transform:translateX(-50%) scale(0); padding:14px 28px; background:linear-gradient(135deg,#FF4D6D,#FFC23C); border:3px solid #fff; color:#fff; font-weight:900; font-size:18px; border-radius:22px; box-shadow:0 8px 30px rgba(255,77,109,0.5); z-index:300; pointer-events:none; }
.simon-cheer.show { animation:simonCheer 2.4s ease forwards; }
@keyframes simonCheer { 0%{transform:translateX(-50%) scale(0);opacity:0} 20%{transform:translateX(-50%) scale(1.12);opacity:1} 80%{transform:translateX(-50%) scale(1);opacity:1} 100%{transform:translateX(-50%) scale(0.9);opacity:0} }
@keyframes spin { to{transform:rotate(360deg)} }