:root { color-scheme: dark; background: #050403; }
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; background: #050403; }
body { font-family: Arial, "Microsoft JhengHei", sans-serif; }
.page-shell { display: grid; min-height: 100svh; place-items: center; background: radial-gradient(circle at 50% 20%, #281803 0, #090704 45%, #020202 100%); }
.image-landing { position: relative; width: 100%; max-width: 42rem; overflow: hidden; line-height: 0; box-shadow: 0 0 60px rgba(235, 158, 27, .12); }
.hero-image { display: block; width: 100%; height: auto; user-select: none; }
.brand-logo { position: absolute; z-index: 2; height: auto; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,.65)); }
.cta-hotspots { position: absolute; inset: 0; }
.cta-hotspot { position: absolute; display: block; border: 0; border-radius: 999px; background: transparent; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.cta-hotspot::after { position: absolute; inset: -3px; content: ""; border: 2px solid transparent; border-radius: inherit; opacity: 0; box-shadow: 0 0 0 5px rgba(255,255,255,.16), 0 0 30px 9px var(--cta-glow); transition: opacity .15s ease; }
.cta-hotspot:hover::after, .cta-hotspot:focus-visible::after { border-color: rgba(255,255,255,.85); opacity: 1; }
.cta-hotspot--twitch { --cta-glow: rgba(139, 68, 255, .85); }
.cta-hotspot--line { --cta-glow: rgba(28, 246, 107, .8); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.footer { padding: 1.25rem; background: #050403; color: #b5a793; font-size: .75rem; text-align: center; }.footer a { color: inherit; }
/* 桌機/橫螢：完整顯示直式主視覺，不裁切上下內容。 */
@media (min-width: 761px), (orientation: landscape) {
  .page-shell { height: 100svh; min-height: 0; overflow: hidden; }
  .image-landing { width: auto; height: 100svh; max-width: 100vw; aspect-ratio: 941 / 1675; }
  .hero-image { width: 100%; height: 100%; object-fit: contain; }
}
/* 手機/直螢：滿寬度顯示，以捲動看完直式素材。 */
@media (max-width: 760px) and (orientation: portrait) { .page-shell { display: block; }.image-landing { width: 100vw; max-width: none; }.cta-hotspot::after { inset: -2px; } }
@media (prefers-reduced-motion: reduce) { .cta-hotspot::after { transition: none; } }