:root { --u: calc(min(100vw, 177.7778vh) / 1024); --bg-deep: #0b1220; --text: #f5f7ff; --text-dim: rgba(235, 240, 255, .72); --panel: rgba(66, 72, 102, .80); --panel-line: rgba(255,255,255,.10); --navy: #0b1220; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg-deep); color: var(--text); font-family: "Roboto", "Noto Sans TC", "PingFang HK", sans-serif; }
body { display: grid; place-items: center; }

/* 全屏項目概念圖背景 */
.site-bg { position: fixed; inset: 0; z-index: 0; background: #7fa6d0 url('/images/khr-bg.jpg') center bottom / cover no-repeat; }
.site-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,14,30,.10), rgba(8,14,30,.05) 50%, rgba(8,14,30,.30)); }

.stage { position: relative; z-index: 3; width: calc(1024 * var(--u)); height: calc(576 * var(--u)); display: grid; grid-template-rows: calc(42 * var(--u)) 1fr calc(40 * var(--u)); }

/* 頂部深色導航列 (GTwin 風格) */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u)); background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.brand { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.brand-logo { width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; font-size: calc(16 * var(--u)); background: linear-gradient(135deg, #e5322d, #a81d1a); overflow: hidden; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-title { font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: .01em; line-height: 1.1; max-width: calc(430 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-title b { color: #ff7a2f; font-weight: 800; }
.brand-sub { font-size: calc(8 * var(--u)); color: var(--text-dim); margin-top: calc(2 * var(--u)); letter-spacing: .04em; }
.top-right { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.top-site { font-size: calc(12 * var(--u)); font-weight: 700; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); max-width: calc(260 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-wrap { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.clock { font-family: "Consolas", "Roboto Mono", monospace; font-size: calc(20 * var(--u)); font-weight: 700; }
.date { font-size: calc(8.5 * var(--u)); color: var(--text-dim); font-weight: 500; }

/* 主體：左欄（資訊＋影片） / 右欄（天氣、警告、AI、廣播）；QR 為浮動層 */
.main { display: grid; grid-template-columns: 1fr calc(430 * var(--u)); gap: calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); min-height: 0; }
.col { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-height: 0; overflow: hidden; }

.panel { background: var(--panel); border: 1px solid var(--panel-line); border-radius: calc(4 * var(--u)); box-shadow: 0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.30); backdrop-filter: blur(calc(6 * var(--u))); padding: calc(9 * var(--u)) calc(11 * var(--u)); flex-shrink: 0; }
.panel-title { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: calc(6 * var(--u)); }
.pt-ico { font-size: calc(13 * var(--u)); }

/* 左：地盤資訊（橫向填滿，雙欄大字；精簡行距以騰出高度給影片） */
.info-panel { padding: calc(7 * var(--u)) calc(11 * var(--u)); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(5 * var(--u)) calc(22 * var(--u)); }
.info-item { min-width: 0; }
.info-item:last-child { grid-column: 1 / -1; }
.info-label { font-size: calc(8.5 * var(--u)); color: #f5a524; letter-spacing: .02em; line-height: 1.25; }
.info-value { font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.22; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.info-wide { grid-column: 1 / -1; }
.info-contract { font-size: calc(10.5 * var(--u)); font-weight: 400; line-height: 1.3; color: rgba(255,255,255,.84); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.info-foot { margin-top: calc(5 * var(--u)); padding-top: calc(5 * var(--u)); border-top: 1px solid rgba(255,255,255,.12); font-size: calc(7.5 * var(--u)); letter-spacing: .04em; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-foot b { color: rgba(255,255,255,.8); font-weight: 600; }

/* 左：影片（吃剩餘高度，貼近 16:9 減少黑邊） */
.video-panel { padding: calc(3 * var(--u)); flex: 1 1 auto; min-height: 0; display: flex; }
.video-theater { position: relative; width: 100%; height: 100%; border-radius: calc(3 * var(--u)); overflow: hidden; background: #05080f; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; }
.video-theater video, .video-theater iframe { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 0.8s ease-in-out; border: none; background: transparent; }
.video-theater .loading { opacity: 0; }

/* 左：廣播（逐句顯示，過長以跑馬燈播放，fade out / fade in 換句） */
.announce-panel { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); min-height: calc(38 * var(--u)); margin-top: auto; }
.ca-badge { padding: calc(3 * var(--u)) calc(8 * var(--u)); background: #ffcf33; color: #000; font-weight: 900; border-radius: calc(3 * var(--u)); font-size: calc(10 * var(--u)); flex-shrink: 0; letter-spacing: .06em; }
.ca-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ca-text { width: 100%; opacity: 1; transition: opacity .45s ease; }
.ca-text.is-fading { opacity: 0; }
.ca-msg { display: inline-block; white-space: nowrap; font-size: calc(13.5 * var(--u)); font-weight: 800; color: #fff; letter-spacing: .01em; will-change: transform; }
.ca-msg.is-scrolling { animation: annMarquee var(--ann-dur, 12s) linear forwards; }
@keyframes annMarquee { from { transform: translateX(0); } to { transform: translateX(var(--ann-dist, 0)); } }

/* 右：今日天氣 */
.wx-summary-box { display: flex; align-items: center; justify-content: space-between; }
.wx-left { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.wx-icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); display: grid; place-items: center; }
.wx-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(2deg); }
.wx-fallback { font-size: calc(34 * var(--u)); display: block; }
.wx-temp { font-size: calc(38 * var(--u)); font-weight: 700; line-height: 1; }
.wx-temp sup { font-size: .5em; margin-left: calc(2 * var(--u)); vertical-align: top; }
.wx-right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(2 * var(--u)); }
.wx-station { font-size: calc(8 * var(--u)); color: var(--text-dim); }
.wx-hum { font-size: calc(10 * var(--u)); font-weight: 600; color: #bfe6ff; }
.wx-status-tag { font-size: calc(9 * var(--u)); font-weight: 700; padding: calc(1 * var(--u)) calc(7 * var(--u)); border-radius: 999px; background: rgba(255,255,255,0.15); }
.wx-range { font-size: calc(12 * var(--u)); font-weight: 500; }
.wx-range b { font-weight: 800; }

/* 右：預報 4x2 */
.fc-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: calc(6 * var(--u)) calc(2 * var(--u)); }
.fc-item { display: flex; flex-direction: column; align-items: center; gap: calc(1 * var(--u)); }
.fc-emoji { font-size: calc(19 * var(--u)); line-height: 1.1; }
.fc-tag { font-size: calc(7.5 * var(--u)); color: #ffcf7a; font-weight: 600; }
.fc-temp { font-size: calc(8.5 * var(--u)); font-weight: 500; color: #e8ecff; }
.fc-date { font-size: calc(8.5 * var(--u)); font-weight: 600; }
.fc-temp { font-size: calc(8.5 * var(--u)); font-weight: 500; color: #e8ecff; }
.fc-loading { grid-column: 1 / -1; font-size: calc(10 * var(--u)); color: var(--text-dim); }

/* 右：警告 */
.warning-container { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); }
.ok-banner { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 700; color: #86efac; }
.ok-ico { font-size: calc(12 * var(--u)); }
.warn-tile-row { flex: 1 1 calc(130 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); border: 2px solid var(--c, #f5b700); background: linear-gradient(135deg, color-mix(in srgb, var(--c, #f5b700) 25%, transparent), rgba(0,0,0,0.35)); overflow: hidden; }
.warn-tile-row img { flex: 0 0 auto; width: calc(26 * var(--u)); height: calc(26 * var(--u)); object-fit: contain; }
.warn-tile-row > div { min-width: 0; flex: 1 1 auto; }
.warn-tile-row .wt-name { font-size: calc(11.5 * var(--u)); font-weight: 900; line-height: 1.15; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.warn-tile-row .wt-en { font-size: calc(7 * var(--u)); font-weight: 700; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 警告生效時：圖示放大彈跳後縮回，並持續呼吸發光 */
.warn-tile-row.warn-live { animation: warnTileGlow 2.4s ease-in-out infinite; }
.warn-tile-row.warn-live img { animation: warnIconSettle 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1, warnIconBeat 2.4s ease-in-out 1.6s infinite; transform-origin: center; }
@keyframes warnTileGlow { 0%, 100% { box-shadow: 0 0 calc(4 * var(--u)) color-mix(in srgb, var(--c, #f5b700) 35%, transparent); } 50% { box-shadow: 0 0 calc(16 * var(--u)) color-mix(in srgb, var(--c, #f5b700) 85%, transparent); } }
@keyframes warnIconSettle { 0% { transform: scale(.2) rotate(-18deg); opacity: .2; } 45% { transform: scale(1.9) rotate(6deg); opacity: 1; } 70% { transform: scale(1.45) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes warnIconBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.wx-forecast-card { width: 100%; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.wfc-header { display: flex; align-items: center; justify-content: space-between; }
.wfc-tag { font-size: calc(10 * var(--u)); font-weight: 800; color: #86efac; }
.wfc-title { font-size: calc(8 * var(--u)); color: rgba(255,255,255,0.7); letter-spacing: 0.1em; }
.wfc-body { font-size: calc(10 * var(--u)); line-height: 1.35; color: #f8fafc; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 右：AI 職安面板 (吃剩餘高度) */
.ai-panel { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; display: flex; }
.ai-insight-box { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.ai-header { position: relative; z-index: 20; padding: calc(8 * var(--u)) calc(11 * var(--u)) calc(4 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); color: #7dd3fc; font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: .03em; }
.ai-header .pulse-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); background: #38bdf8; border-radius: 50%; box-shadow: 0 0 8px #38bdf8; flex-shrink: 0; }
.ai-content { position: relative; flex: 1; overflow: hidden; margin: 0 calc(11 * var(--u)) calc(5 * var(--u)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%); }
.ai-scroll-track { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; animation: aiScrollUp 25s linear infinite; }
.ai-scroll-track:hover { animation-play-state: paused; }
.ai-scroll-group { display: flex; flex-direction: column; }
.ai-tip-item { display: flex; align-items: flex-start; gap: calc(6 * var(--u)); background: rgba(0,0,0,0.22); padding: calc(6 * var(--u)) calc(8 * var(--u)); border-radius: calc(3 * var(--u)); border-left: 3px solid #38bdf8; color: #eef6ff; font-size: calc(10.5 * var(--u)); line-height: 1.4; margin-bottom: calc(6 * var(--u)); }
.ai-tip-item .tip-icon { font-size: calc(13 * var(--u)); flex-shrink: 0; }
@keyframes aiScrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* 動畫彈出層 */
.icon-pop-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.85); backdrop-filter: blur(12px); animation: overlayFadeIn 5s forwards; pointer-events: none; }
.pop-content { display: flex; flex-direction: column; align-items: center; animation: popAndFly 5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.pop-content img { width: calc(250 * var(--u)); height: calc(250 * var(--u)); object-fit: contain; border-radius: calc(4 * var(--u)); filter: drop-shadow(0 20px 50px rgba(0,0,0,0.8)); }
.pop-text { margin-top: calc(18 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 900; color: #fff; text-shadow: 0 5px 20px rgba(0,0,0,0.8); white-space: nowrap; }
.pop-sub { font-size: calc(18 * var(--u)); font-weight: 700; color: #ff8c1a; margin-top: calc(6 * var(--u)); white-space: nowrap; }
@keyframes overlayFadeIn { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
/* 放大呈現 → 停留 → 縮小飛向右上「天氣警告」面板位置並淡出 */
@keyframes popAndFly {
  0%   { transform: translateY(22vh) scale(.2); opacity: 0; }
  12%  { transform: translateY(-2vh) scale(1.35); opacity: 1; }
  20%  { transform: translateY(0) scale(1.18); opacity: 1; }
  30%  { transform: translateY(0) scale(1); opacity: 1; }
  82%  { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translate(30vw, 5vh) scale(.12); opacity: 0; }
}

/* 多語系 QR Code：浮動層（跨左右欄邊界），彈出 10 秒後收起約 20 秒再重現 */
.qr-dock { position: absolute; right: calc(448 * var(--u)); bottom: calc(70 * var(--u)); z-index: 300; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); background: rgba(11, 18, 32, 0.88); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: calc(6 * var(--u)); padding: calc(5 * var(--u)); box-shadow: 0 5px 20px rgba(0,0,0,0.5); transform-origin: bottom center; animation: qrCycle 30s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.ncs-floating-qr { position: relative; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); background: rgba(11, 18, 32, 0.88); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: calc(6 * var(--u)); padding: calc(5 * var(--u)); z-index: 50; box-shadow: 0 5px 20px rgba(0,0,0,0.5); transform-origin: bottom center; animation: qrCycle 30s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.qr-dock img, .ncs-floating-qr img { display: block; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 3px; background: #fff; padding: 2px; }
.qr-cap { display: flex; flex-direction: column; align-items: center; font-size: calc(7.5 * var(--u)); font-weight: 700; color: #dbeafe; letter-spacing: .04em; white-space: nowrap; }
.qr-cap small { font-size: calc(4.6 * var(--u)); color: rgba(219,234,254,.65); letter-spacing: .1em; margin-top: calc(1 * var(--u)); white-space: nowrap; }
/* 0-1.2s 彈出 → 停留至約 10.5s → 1.2s 收起 → 其餘約 18s 隱藏 */
@keyframes qrCycle {
  0%   { opacity: 0; transform: translateY(calc(24 * var(--u))) scale(.35); }
  4%   { opacity: 1; transform: translateY(0) scale(1.08); }
  7%   { opacity: 1; transform: translateY(0) scale(1); }
  35%  { opacity: 1; transform: translateY(0) scale(1); }
  40%  { opacity: 0; transform: translateY(calc(18 * var(--u))) scale(.35); }
  100% { opacity: 0; transform: translateY(calc(24 * var(--u))) scale(.35); }
}

/* 全屏演習（後台「突發演習排程」觸發） */
.event-fullscreen-overlay { position: fixed; inset: 0; z-index: 99999; background: radial-gradient(circle at 50% 40%, rgba(255,70,60,.35), transparent 60%), linear-gradient(160deg, #b40012, #7a0010 60%, #4a000a); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(24 * var(--u)); opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s ease; }
.event-fullscreen-overlay.active { opacity: 1; visibility: visible; }
.event-fullscreen-overlay::before { content: ""; position: absolute; inset: calc(-20 * var(--u)); background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 calc(18 * var(--u)), transparent calc(18 * var(--u)) calc(36 * var(--u))); animation: efStripes 3s linear infinite; pointer-events: none; }
@keyframes efStripes { from { transform: translate(0,0); } to { transform: translate(calc(36 * var(--u)), calc(36 * var(--u))); } }
.ef-badge { position: relative; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(5 * var(--u)) calc(16 * var(--u)); border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35); font-size: calc(13 * var(--u)); font-weight: 800; letter-spacing: .18em; color: #ffe9e9; }
.ef-dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #ffd400; box-shadow: 0 0 calc(10 * var(--u)) #ffd400; animation: efBlink 1s steps(2, start) infinite; }
@keyframes efBlink { 50% { opacity: .15; } }
.ef-icon { position: relative; font-size: calc(110 * var(--u)); line-height: 1; margin: calc(10 * var(--u)) 0 calc(2 * var(--u)); filter: drop-shadow(0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.55)); animation: efPulse 1.6s ease-in-out infinite; }
@keyframes efPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.ef-title { position: relative; font-size: calc(58 * var(--u)); font-weight: 900; color: #fff; line-height: 1.15; text-shadow: 0 calc(4 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.55); }
.ef-desc { position: relative; margin-top: calc(14 * var(--u)); max-width: calc(880 * var(--u)); font-size: calc(23 * var(--u)); font-weight: 700; line-height: 1.55; color: #fff3f3; }
.ef-actions { position: relative; margin-top: calc(22 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); }
.ef-time { font-size: calc(15 * var(--u)); font-weight: 800; letter-spacing: .06em; color: #ffd9d9; }
.ef-pill { padding: calc(7 * var(--u)) calc(18 * var(--u)); border-radius: 999px; background: #ffd400; color: #3a0000; font-size: calc(15 * var(--u)); font-weight: 900; letter-spacing: .02em; box-shadow: 0 calc(4 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.4); animation: efPill 2s ease-in-out infinite; }
@keyframes efPill { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* 跑馬燈 */
.ticker { display: flex; align-items: stretch; background: var(--navy); border-top: 2px solid #f5a524; overflow: hidden; z-index: 10; transition: background 0.8s ease; }
body.is-severe .ticker { background: linear-gradient(90deg, #a3001a, #d90f2c 40%, #c2001f); border-top-color: #ffcf33; }
.ticker-label { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(14 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 900; color: #fff; background: rgba(245,165,36,.25); border-right: 2px solid rgba(255,255,255,.3); }
.ticker-label small { font-size: calc(7 * var(--u)); letter-spacing: .25em; opacity: .85; margin-top: calc(1 * var(--u)); }
.ticker-viewport { position: relative; flex: 1 1 auto; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; width: max-content; white-space: nowrap; will-change: transform; animation: tickerMove var(--tk-dur, 40s) linear infinite; }
.tk-copy { display: flex; flex: 0 0 auto; }
.tk-item { font-size: calc(19 * var(--u)); font-weight: 800; color: #fff; letter-spacing: .03em; }
.tk-sep { font-size: calc(12 * var(--u)); color: #f5a524; padding: 0 calc(22 * var(--u)); align-self: center; }
@keyframes tickerMove { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

video::-webkit-media-controls { display: none !important; } video::-webkit-media-controls-enclosure { display: none !important; } video::-webkit-media-controls-panel { display: none !important; } video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; } video { outline: none; border: none; pointer-events: none; }