.home-header {
  position: relative;
  min-height: 86px;
  padding: max(12px, env(safe-area-inset-top)) 12px 12px;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(1, 5, 13, 0.12), rgba(1, 6, 16, 0.84)), url("assets/art/home/header-cosmic-generated.png");
  background-size: cover;
  background-position: center top;
}

.home-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 177, 90, .58), rgba(101, 159, 224, .4), transparent);
}

.header-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-areas: "brand alert";
  align-items: center;
  gap: 12px;
}

.brand-block {
  grid-area: brand;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-crest {
  flex: 0 0 58px;
  width: 58px;
  height: 58px;
  padding: 3px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223, 190, 103, .56);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 50, 75, .88), rgba(4, 10, 22, .94));
  box-shadow: 0 0 0 4px rgba(214,177,90,.05), 0 9px 24px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.09);
}
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-copy { min-width: 0; display: flex; align-items: center; }
.brand-name {
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: clamp(24px, 6.8vw, 36px);
  font-weight: 700;
  line-height: .86;
  letter-spacing: -.025em;
  text-shadow: 0 2px 16px rgba(214,177,90,.18);
}
.header-actions {
  display: contents;
}

.notification-wrap { grid-area: alert; position: relative; }
.notification-button {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 1px solid rgba(214,177,90,.28);
  border-radius: 50%;
  background: rgba(5, 14, 31, .78);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 8px 22px rgba(0,0,0,.22);
  cursor: pointer;
}
.notification-button img { width: 100%; height: 100%; object-fit: contain; }
.notification-button img { transform: scale(1.5); }
.notification-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border: 1px solid #ffdbe7;
  border-radius: 50%;
  background: #e64b78;
  box-shadow: 0 0 9px rgba(230,75,120,.86);
}

.notification-panel {
  position: absolute;
  z-index: 20;
  top: 50px;
  right: 0;
  width: min(300px, calc(100vw - 34px));
  padding: 14px;
  border: 1px solid rgba(101,185,255,.35);
  border-radius: 17px;
  background: rgba(4, 13, 31, .96);
  box-shadow: 0 18px 45px rgba(0,0,0,.58);
  backdrop-filter: blur(18px);
}
.notification-panel[hidden] { display: none; }
.notification-panel strong { display: block; margin-bottom: 5px; font-size: 14px; }
.notification-panel p { margin: 0; color: #aebbd7; font-size: 12px; line-height: 1.5; }

.feature-grid {
  padding: 12px 12px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.feature-card,
.lifestyle-card {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(132, 165, 208, .22);
  border-radius: 16px;
  background: #071020;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .32), 0 0 18px var(--glow, rgba(45, 100, 170, .18));
  cursor: pointer;
  isolation: isolate;
}

a.feature-card {
  color: inherit;
  text-decoration: none;
}

.feature-card::before,
.lifestyle-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid var(--edge, rgba(109, 157, 214, .54));
  border-radius: inherit;
  box-shadow: inset 0 1px rgba(255,255,255,.11), inset 0 -16px 28px rgba(0,0,0,.08);
  pointer-events: none;
}

.feature-card:hover,
.feature-card:focus-visible,
.lifestyle-card:hover,
.lifestyle-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  transition: transform 150ms ease, filter 150ms ease;
  filter: brightness(1.04) saturate(1.03);
}

.feature-card:active,
.lifestyle-card:active { transform: translateY(0) scale(.992); }

.feature-card img,
.lifestyle-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card img { aspect-ratio: var(--ratio); }

.card-motv { --ratio: 341 / 332; --edge: rgba(214,177,90,.58); --glow: rgba(214,177,90,.14); }
.card-etv { --ratio: 340 / 332; --edge: rgba(98,156,222,.56); --glow: rgba(60,122,198,.17); }
.card-live { --ratio: 341 / 253; --edge: rgba(198,85,126,.52); --glow: rgba(198,65,119,.15); }
.card-music { --ratio: 340 / 253; --edge: rgba(129,101,185,.5); --glow: rgba(103,75,170,.16); }
.card-news { --ratio: 341 / 243; --edge: rgba(92,157,204,.52); --glow: rgba(65,130,183,.15); }
.card-games { --ratio: 340 / 243; --edge: rgba(135,104,185,.5); --glow: rgba(111,72,169,.15); }

.card-action {
  position: absolute;
  z-index: 4;
  left: 5.5%;
  bottom: 8%;
  width: 52%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(214,177,90,.52);
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(180deg, rgba(19, 36, 60, .82), rgba(4, 11, 25, .86));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 18px rgba(0,0,0,.18);
  font-size: clamp(10px, 2.55vw, 13px);
  font-weight: 700;
  pointer-events: none;
  backdrop-filter: blur(3px);
}

.card-action .arrow { margin-left: 7px; }

.card-copy {
  position: absolute;
  z-index: 3;
  inset: 0 42% 0 0;
  padding: 11% 5% 32% 7%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: linear-gradient(90deg, rgba(1, 6, 15, .88) 0%, rgba(2, 8, 19, .62) 72%, rgba(2, 8, 19, 0) 100%);
}
.card-copy strong {
  font-family: var(--font-display);
  font-size: clamp(24px, 6.1vw, 42px);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.025em;
  text-shadow: 0 2px 12px rgba(0,0,0,.82);
}
body:not(.language-en) .card-copy strong { font-family: "Noto Serif TC", var(--font-display); font-size: clamp(18px, 4.7vw, 32px); letter-spacing: .01em; }
.card-copy span {
  margin-top: 14%;
  color: #eef2ff;
  font-family: var(--font-ui);
  font-size: clamp(9px, 2.3vw, 13px);
  font-weight: 600;
  line-height: 1.42;
  white-space: pre-line;
  text-shadow: 0 1px 6px rgba(0,0,0,.95);
}

.card-badge {
  position: absolute;
  z-index: 5;
  top: 4%;
  right: 4%;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 999px;
  color: #fff;
  background: rgba(171, 40, 76, .92);
  box-shadow: 0 8px 18px rgba(60,0,18,.34);
  font-size: clamp(8px, 2.1vw, 13px);
  font-weight: 700;
}

.lifestyle-card {
  width: calc(100% - 24px);
  margin: 12px 12px 0;
  --edge: rgba(214,177,90,.46);
  --glow: rgba(214,177,90,.1);
}
.lifestyle-card img { aspect-ratio: 694 / 254; }
.banner-play {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: clamp(34px, 8.7vw, 63px);
  height: clamp(34px, 8.7vw, 63px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,177,90,.72);
  border-radius: 50%;
  background: rgba(4, 12, 28, .72);
  box-shadow: 0 8px 24px rgba(0,0,0,.42), 0 0 0 4px rgba(214,177,90,.08);
  transform: translate(-50%, -50%);
  backdrop-filter: none;
}
.banner-play img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; transform: scale(1.12); }
.banner-copy {
  position: absolute;
  z-index: 3;
  inset: 0 42% 0 0;
  padding: 7% 3% 4% 5%;
  display: block;
  text-align: left;
  background: linear-gradient(90deg, rgba(2, 8, 17, .98) 0%, rgba(3, 10, 21, .91) 66%, rgba(3, 10, 21, .15) 96%, transparent 100%);
}
.banner-copy strong { display: block; font-family: var(--font-display); font-size: clamp(20px, 4.9vw, 34px); line-height: 1; }
body:not(.language-en) .banner-copy strong { font-family: "Noto Serif TC", var(--font-display); font-size: clamp(17px, 4.25vw, 29px); }
.banner-copy span { display: block; margin-top: 10%; color: #d8e0ed; font-size: clamp(9px, 2.35vw, 14px); font-weight: 600; line-height: 1.4; }

.home-page .site-shell {
  padding-bottom: calc(78px + var(--safe-bottom));
}

.home-page .language-control {
  bottom: calc(18px + var(--safe-bottom));
}

.home-page .toast {
  bottom: calc(76px + var(--safe-bottom));
}

.video-dialog {
  width: min(94vw, 720px);
  max-width: 720px;
}

.video-dialog-inner {
  padding: 18px;
}

.video-dialog h2 {
  margin: 0 44px 14px 2px;
  color: var(--gold-bright);
  font-size: clamp(24px, 6vw, 34px);
}

#feature-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(214, 177, 90, .35);
  border-radius: 14px;
  background: #000;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  object-fit: contain;
}

@media (max-width: 370px) {
  .home-header { padding-inline: 10px; }
  .brand-crest { flex-basis: 52px; width: 52px; height: 52px; }
  .brand-name { font-size: 24px; }
  .feature-grid { padding-inline: 10px; gap: 10px; }
  .lifestyle-card { width: calc(100% - 20px); margin-inline: 10px; }
}

@media (min-width: 560px) {
  .feature-grid { gap: 14px 16px; padding-inline: 18px; }
  .lifestyle-card { width: calc(100% - 36px); margin-inline: 18px; }
}