/* =============================================================
   HERO A2 — 車上生活版 Life on Board（疊加於 hero-a.css 之上）
   漂浮生活卡片：音樂 / 電影 / 遊戲 / 寶寶 / 導航 + 氛圍光帶
   每幕對應不同的娛樂與車上生活敘事。
   ============================================================= */

/* ---------- 生活元素層 ---------- */
.ha-life { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.ha-lifegroup { position: absolute; inset: 0; visibility: hidden; }
.ha-lifegroup.is-on { visibility: visible; }

/* ---------- 生活卡片（glass） ---------- */
.life-card {
  position: absolute;
  min-width: 190px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 22, 30, .08);
  box-shadow: 0 16px 44px rgba(16, 22, 30, .16);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  font-family: var(--font-mono);
  color: #10161e;
  will-change: transform;
}
.life-card .lc-k {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(16, 22, 30, .48);
}
.life-card .lc-k::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgb(var(--lc-rgb, var(--ckpt-rgb)));
  box-shadow: 0 0 8px rgba(var(--lc-rgb, var(--ckpt-rgb)), .8);
}
.life-card .lc-t { font-size: 13.5px; font-weight: 600; letter-spacing: .04em; margin-top: 7px; }
.life-card .lc-s { font-size: 10.5px; letter-spacing: .08em; color: rgba(16, 22, 30, .5); margin-top: 3px; }

/* 深色卡（暗場 / 劇院） */
.life-card.dark {
  background: rgba(12, 18, 26, .78);
  border-color: rgba(255, 255, 255, .1);
  color: #eef3fa;
}
.life-card.dark .lc-k { color: rgba(238, 243, 250, .5); }
.life-card.dark .lc-s { color: rgba(238, 243, 250, .5); }

/* ---------- 音樂卡：旋轉唱盤 + EQ ---------- */
.life-card.music { display: flex; gap: 14px; align-items: center; }
.lc-disc {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 14%, transparent 15%),
    repeating-radial-gradient(circle at 50% 50%, #22282f 0 2px, #313a44 2px 4px),
    #22282f;
  animation: lc-spin 5.2s linear infinite;
}
.lc-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 40%, rgba(255,255,255,.22) 46%, transparent 52%, transparent 100%);
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

.lc-eq { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-top: 8px; }
.lc-eq i {
  width: 4px; border-radius: 2px;
  background: rgb(var(--lc-rgb, var(--ent-rgb)));
  height: 30%;
  animation: lc-eq .9s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  animation-duration: var(--dur, .9s);
  transform-origin: bottom;
}
@keyframes lc-eq {
  from { height: 22%; opacity: .65; }
  to { height: 100%; opacity: 1; }
}

/* ---------- 電影卡：16:9 串流式螢幕（JETFLIX） ---------- */
.lc-screen16 {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden;
  background: #0b0f14; margin-top: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
.lc-screen16 .poster {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 90% at 72% 22%, rgba(255, 190, 120, .55), transparent 62%),
    linear-gradient(132deg, #241539 0%, #6d2a56 46%, #d95f38 100%);
}
.lc-screen16 .poster::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(2px 2px at 18% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.6px 1.6px at 36% 16%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 58% 40%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 82% 52%, rgba(255,255,255,.8), transparent 60%);
}
.lc-screen16 .badge {
  position: absolute; left: 8px; top: 8px;
  padding: 2px 6px; border-radius: 3px;
  background: #d81f26; color: #fff;
  font-size: 7.5px; font-weight: 800; letter-spacing: .18em;
}
.lc-screen16 .mtitle {
  position: absolute; left: 9px; bottom: 24px;
  color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}
.lc-screen16 .play {
  position: absolute; left: 50%; top: 44%; translate: -50% -50%;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .5);
}
.lc-screen16 .play::after {
  content: ""; position: absolute; left: 55%; top: 50%; translate: -50% -50%;
  width: 0; height: 0;
  border-left: 9px solid rgba(255, 255, 255, .95);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
.lc-screen16 .ctrl {
  position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px;
  border-radius: 3px; background: rgba(255, 255, 255, .22);
}
.lc-screen16 .ctrl i {
  position: absolute; inset: 0; border-radius: 3px;
  background: #d81f26;
  transform: scaleX(var(--p, .3)); transform-origin: left;
}
.lc-screen16 .ctrl i::after {
  content: ""; position: absolute; right: -3px; top: 50%; translate: 0 -50%;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(216, 31, 38, .8);
}
.lc-thumbs { display: flex; gap: 5px; margin-top: 8px; }
.lc-thumbs i {
  flex: 1; height: 16px; border-radius: 4px; opacity: .85;
}
.lc-thumbs i:nth-child(1) { background: linear-gradient(120deg, #23445e, #3f7ba0); }
.lc-thumbs i:nth-child(2) { background: linear-gradient(120deg, #5e2340, #a03f6b); }
.lc-thumbs i:nth-child(3) { background: linear-gradient(120deg, #234f38, #3fa06e); }
.lc-thumbs i:nth-child(4) { background: linear-gradient(120deg, #4f3b23, #a0803f); }
.lc-prog { position: relative; height: 3px; border-radius: 3px; background: rgba(16, 22, 30, .14); margin-top: 10px; overflow: hidden; }
.life-card.dark .lc-prog { background: rgba(255, 255, 255, .16); }
.lc-prog i {
  position: absolute; inset: 0; border-radius: 3px;
  background: rgb(var(--lc-rgb, var(--ent-rgb)));
  transform: scaleX(var(--p, .3)); transform-origin: left;
}

/* ---------- 遊戲卡：手把 + 分數 ---------- */
.lc-pad { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lc-pad svg { width: 40px; height: 26px; }
.lc-score { font-size: 16px; font-weight: 700; letter-spacing: .06em; }
.lc-combo {
  position: absolute; right: 10px; top: -12px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: rgb(var(--ent-rgb));
  text-shadow: 0 2px 10px rgba(var(--ent-rgb), .5);
  opacity: 0; pointer-events: none;
}

/* ---------- 寶寶卡：月亮 + zzz ---------- */
.lc-baby { display: flex; align-items: center; gap: 12px; }
.lc-moon {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 62% 36%, #ffe9b8, #f4c96b 70%);
  box-shadow: inset -9px -6px 0 rgba(16, 22, 30, .12), 0 0 18px rgba(244, 201, 107, .55);
}
.lc-zzz { position: relative; height: 40px; width: 34px; }
.lc-zzz span {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font-mono); font-weight: 700; color: rgba(16, 22, 30, .55);
  animation: lc-zzz 3s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
.lc-zzz span:nth-child(1) { font-size: 11px; }
.lc-zzz span:nth-child(2) { font-size: 14px; }
.lc-zzz span:nth-child(3) { font-size: 17px; }
@keyframes lc-zzz {
  0% { transform: translate(0, 0); opacity: 0; }
  25% { opacity: .9; }
  70% { transform: translate(16px, -26px); opacity: 0; }
  100% { transform: translate(16px, -26px); opacity: 0; }
}

/* ---------- 導航卡：路線 + 移動車點 ---------- */
.lc-route { margin-top: 9px; }
.lc-route svg { width: 100%; height: 54px; display: block; }
.lc-route .path { fill: none; stroke: rgba(16, 22, 30, .22); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1 7; }
.lc-route .trail { fill: none; stroke: rgb(var(--safe-rgb)); stroke-width: 2.5; stroke-linecap: round; }
.lc-route .car { fill: rgb(var(--safe-rgb)); filter: drop-shadow(0 0 6px rgba(var(--safe-rgb), .8)); }
.lc-route .pin { fill: none; stroke: rgb(var(--ent-rgb)); stroke-width: 2; }

/* ---------- 劇院卡（暗場大 EQ · 琥珀劇院燈光） ---------- */
.lc-theq { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 10px; }
.lc-theq i {
  width: 6px; border-radius: 3px;
  background: #34D399;
  box-shadow: 0 0 8px rgba(52, 211, 153, .45);
  height: 30%;
  animation: lc-eq 1s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
  animation-duration: var(--dur, 1s);
}

/* ---------- 時速表卡（暗場） ---------- */
.lc-speedo { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.lc-speedo svg { width: 84px; height: 50px; flex: none; }
.lc-speedo .sp-base { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 7; stroke-linecap: round; }
.lc-speedo .sp-arc {
  fill: none; stroke: url(#spgrad); stroke-width: 7; stroke-linecap: round;
}
.lc-speedo .sp-needle {
  stroke: #fff; stroke-width: 2.2; stroke-linecap: round;
  transform-origin: 60px 58px;
  filter: drop-shadow(0 0 4px rgba(56, 189, 248, .7));
}
.lc-speedo .sp-hub { fill: #fff; }
.lc-spval { display: flex; align-items: baseline; gap: 5px; }
.lc-spval b { font-size: 25px; font-weight: 800; letter-spacing: .02em; }
.lc-spval small { font-size: 10px; letter-spacing: .16em; opacity: .55; }

/* ---------- Baby 監測數據面板 ---------- */
.lc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 9px;
}
.lc-stats .st {
  padding: 7px 8px; border-radius: 9px;
  background: rgba(16, 22, 30, .05);
  border: 1px solid rgba(16, 22, 30, .07);
  text-align: center;
}
.lc-stats .st b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
.lc-stats .st span { display: block; font-size: 8.5px; letter-spacing: .16em; color: rgba(16, 22, 30, .45); margin-top: 2px; }
.lc-wave { margin-top: 9px; }
.lc-wave svg { width: 100%; height: 20px; display: block; }
.lc-wave .bwave {
  fill: none; stroke: rgb(var(--safe-rgb)); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 7 5;
  animation: lc-bflow 1.5s linear infinite;
  filter: drop-shadow(0 0 4px rgba(var(--safe-rgb), .45));
}
@keyframes lc-bflow { to { stroke-dashoffset: -24; } }

/* ---------- 漂浮音符 / 星星 ---------- */
.ha-notes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ha-note {
  position: absolute;
  font-size: 18px; font-weight: 700;
  color: rgba(var(--ent-rgb), .85);
  text-shadow: 0 2px 12px rgba(var(--ent-rgb), .4);
  will-change: transform, opacity;
}
.ha-star {
  position: absolute;
  color: rgba(255, 235, 190, .9);
  text-shadow: 0 0 10px rgba(255, 220, 150, .8);
  font-size: 12px;
  animation: lc-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes lc-twinkle {
  0%, 100% { opacity: .15; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ---------- 底部氛圍光帶（全幕，車內 ambient light 語彙） ---------- */
.ha-ambient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 9;
  background: linear-gradient(90deg,
    rgba(var(--ent-rgb), 0) 0%, rgba(var(--ent-rgb), .9) 18%,
    rgba(var(--ckpt-rgb), .9) 50%,
    rgba(var(--safe-rgb), .9) 82%, rgba(var(--safe-rgb), 0) 100%);
  background-size: 200% 100%;
  animation: ha-flow 7s linear infinite;
  opacity: .75;
  filter: drop-shadow(0 0 8px rgba(var(--ckpt-rgb), .5));
}
@keyframes ha-flow {
  from { background-position: 0% 0; }
  to { background-position: -200% 0; }
}

/* ---------- RWD ---------- */
@media (max-width: 980px) {
  .life-card { min-width: 160px; padding: 11px 13px; }
  .life-card .lc-t { font-size: 12px; }
  /* 行動版每幕僅保留主卡（第一張 life-card） */
  .ha-lifegroup .life-card ~ .life-card { display: none; }
}
@media (max-width: 560px) {
  .life-card { transform: scale(.86); transform-origin: top left; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-disc, .lc-eq i, .lc-theq i, .lc-zzz span, .ha-ambient, .ha-star { animation: none !important; }
}