* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { background: #08111f; color: #edf5ff; font-family: "Noto Sans TC", sans-serif; line-height: 1.7; overflow-x: hidden; }

a { color: inherit; text-decoration: none; }

img { display: block; height: auto; max-width: 100%; }

/* header */
header { align-items: center; backdrop-filter: blur(18px); background: rgba(8, 17, 31, 0.76); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; left: 0; padding: 18px 6%; position: fixed; top: 0; width: 100%; z-index: 50; }
header .site-title { align-items: center; color: #ffffff; display: flex; font-size: 24px; font-weight: 900; gap: 12px; letter-spacing: 1px; }
header .site-title::before { background: radial-gradient( circle at 35% 35%, #ffffff 0 10%, #1a2940 11% 22%, #ffffff 23% 34%, #1a2940 35% 48%, #16e27d 49% 100% ); border-radius: 50%; box-shadow: 0 0 28px rgba(22, 226, 125, 0.45); content: ""; height: 38px; width: 38px; }
header nav { align-items: center; display: flex; gap: 26px; }
header nav a { color: rgba(237, 245, 255, 0.78); font-size: 15px; font-weight: 500; position: relative; transition: color 0.3s ease; }
header nav a::after { background: #16e27d; border-radius: 999px; bottom: -8px; content: ""; height: 3px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; width: 100%; }
header nav a:hover { color: #ffffff; }
header nav a:hover::after { transform: scaleX(1); }
header .play-link { background: linear-gradient(135deg, #16e27d, #34d9ff); border-radius: 999px; box-shadow: 0 12px 30px rgba(22, 226, 125, 0.22); color: #07111d; font-weight: 900; padding: 10px 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
header .play-link:hover { box-shadow: 0 18px 40px rgba(52, 217, 255, 0.25); color: #07111d; transform: translateY(-2px); }
header .play-link::after { display: none; }

/* hero-section */
#hero-section { align-items: center; background: radial-gradient( circle at 78% 18%, rgba(52, 217, 255, 0.22), transparent 32% ), radial-gradient( circle at 10% 12%, rgba(22, 226, 125, 0.2), transparent 28% ), linear-gradient(145deg, #08111f 0%, #102642 52%, #06101d 100%); display: grid; gap: 52px; grid-template-columns: 1.05fr 0.95fr; min-height: 100vh; overflow: hidden; padding: 130px 6% 80px; position: relative; }
#hero-section::before { background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 52px 52px; content: ""; inset: 0; opacity: 0.45; position: absolute; }
#hero-section .hero-content { opacity: 0; position: relative; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s ease; z-index: 2; }
#hero-section.is-active .hero-content { opacity: 1; transform: translateY(0); }
#hero-section .hero-kicker { align-items: center; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; color: #9df9c7; display: inline-flex; font-size: 14px; font-weight: 700; gap: 10px; margin-bottom: 22px; padding: 8px 16px; }
#hero-section .hero-kicker::before { background: #16e27d; border-radius: 50%; box-shadow: 0 0 0 8px rgba(22, 226, 125, 0.12); content: ""; height: 8px; width: 8px; }
#hero-section .hero-title { color: #ffffff; font-size: clamp(42px, 6vw, 82px); font-weight: 900; letter-spacing: -2px; line-height: 1.08; margin-bottom: 24px; }
#hero-section .hero-title span { background: linear-gradient(135deg, #16e27d, #34d9ff); -webkit-background-clip: text; color: transparent; }
#hero-section .hero-text { color: rgba(237, 245, 255, 0.78); font-size: 19px; max-width: 620px; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }
#hero-section .hero-link { align-items: center; background: #16e27d; border-radius: 18px; box-shadow: 0 18px 42px rgba(22, 226, 125, 0.28); color: #06101d; display: inline-flex; font-weight: 900; justify-content: center; min-width: 168px; padding: 14px 24px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#hero-section .hero-link:hover { box-shadow: 0 24px 50px rgba(22, 226, 125, 0.36); transform: translateY(-4px); }
#hero-section .hero-link.secondary { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; color: #ffffff; }
#hero-section .hero-media { opacity: 0; position: relative; transform: translateX(42px) scale(0.96); transition: opacity 0.9s ease 0.1s, transform 0.9s ease 0.1s; z-index: 2; }
#hero-section.is-active .hero-media { opacity: 1; transform: translateX(0) scale(1); }
#hero-section .hero-image { aspect-ratio: 4 / 5; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 42px; box-shadow: 0 34px 90px rgba(0, 0, 0, 0.45); object-fit: cover; width: 100%; }
#hero-section .hero-card { backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 26px; bottom: 34px; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28); left: -26px; padding: 18px 22px; position: absolute; width: min(270px, 78%); }
#hero-section .hero-card-title { color: #ffffff; font-size: 18px; font-weight: 900; }
#hero-section .hero-card-text { color: rgba(237, 245, 255, 0.72); font-size: 14px; margin-top: 4px; }
#hero-section .hero-ball { animation: hero-float 5s ease-in-out infinite; background: radial-gradient( circle at 35% 30%, #ffffff 0 12%, #152238 13% 26%, #ffffff 27% 40%, #152238 41% 54%, #16e27d 55% 100% ); border-radius: 50%; box-shadow: 0 18px 42px rgba(22, 226, 125, 0.35); height: 92px; position: absolute; right: -16px; top: 54px; width: 92px; z-index: 3; }

/* feature-section */
#feature-section { background: #f4f8fb; color: #101928; padding: 96px 6%; }
#feature-section .feature-content { margin: 0 auto 44px; max-width: 820px; opacity: 0; text-align: center; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
#feature-section.is-active .feature-content { opacity: 1; transform: translateY(0); }
#feature-section .feature-subtitle { color: #13985b; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#feature-section .feature-title { color: #08111f; font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; }
#feature-section .feature-text { color: #5b6675; font-size: 17px; margin-top: 16px; }
#feature-section .feature-grid { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
#feature-section .feature-item { background: #ffffff; border: 1px solid rgba(8, 17, 31, 0.08); border-radius: 28px; box-shadow: 0 20px 46px rgba(8, 17, 31, 0.08); opacity: 0; overflow: hidden; padding: 28px; transform: translateY(36px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease; }
#feature-section.is-active .feature-item { opacity: 1; transform: translateY(0); }
#feature-section.is-active .feature-item:nth-child(2) { transition-delay: 0.08s; }
#feature-section.is-active .feature-item:nth-child(3) { transition-delay: 0.16s; }
#feature-section.is-active .feature-item:nth-child(4) { transition-delay: 0.24s; }
#feature-section .feature-item:hover { box-shadow: 0 28px 62px rgba(8, 17, 31, 0.13); transform: translateY(-8px); }
#feature-section .feature-icon { align-items: center; background: linear-gradient(135deg, #16e27d, #34d9ff); border-radius: 22px; color: #06101d; display: flex; font-size: 30px; font-weight: 900; height: 62px; justify-content: center; margin-bottom: 22px; width: 62px; }
#feature-section .feature-item-title { color: #08111f; font-size: 21px; font-weight: 900; margin-bottom: 10px; }
#feature-section .feature-item-text { color: #647184; font-size: 15px; }

/* game-section */
#game-section { background: linear-gradient(180deg, #f4f8fb 0%, #e8f0f6 100%); color: #101928; padding: 92px 6%; }
#game-section .game-content { align-items: end; display: grid; gap: 28px; grid-template-columns: 1fr 0.8fr; margin-bottom: 40px; opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
#game-section.is-active .game-content { opacity: 1; transform: translateY(0); }
#game-section .game-subtitle { color: #13985b; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#game-section .game-title { color: #08111f; font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; }
#game-section .game-text { color: #5b6675; font-size: 17px; }
#game-section .game-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
#game-section .game-item { background: #ffffff; border-radius: 32px; box-shadow: 0 24px 56px rgba(8, 17, 31, 0.1); opacity: 0; overflow: hidden; transform: translateY(42px); transition: opacity 0.75s ease, transform 0.75s ease; }
#game-section.is-active .game-item { opacity: 1; transform: translateY(0); }
#game-section.is-active .game-item:nth-child(2) { transition-delay: 0.1s; }
#game-section.is-active .game-item:nth-child(3) { transition-delay: 0.2s; }
#game-section .game-image { aspect-ratio: 16 / 11; object-fit: cover; transition: transform 0.5s ease; width: 100%; }
#game-section .game-item:hover .game-image { transform: scale(1.06); }
#game-section .game-item-content { padding: 26px; }
#game-section .game-tag { background: rgba(22, 226, 125, 0.12); border-radius: 999px; color: #10874f; display: inline-flex; font-size: 13px; font-weight: 900; margin-bottom: 14px; padding: 5px 12px; }
#game-section .game-item-title { color: #08111f; font-size: 23px; font-weight: 900; margin-bottom: 10px; }
#game-section .game-item-text { color: #637084; font-size: 15px; margin-bottom: 20px; }
#game-section .game-link { align-items: center; color: #0b8f54; display: inline-flex; font-weight: 900; gap: 8px; transition: gap 0.3s ease, color 0.3s ease; }
#game-section .game-link:hover { color: #07653d; gap: 14px; }

/* skill-section */
#skill-section { background: #08111f; overflow: hidden; padding: 96px 6%; position: relative; }
#skill-section::before { background: radial-gradient( circle, rgba(52, 217, 255, 0.16), transparent 58% ); content: ""; height: 520px; left: -180px; position: absolute; top: 120px; width: 520px; }
#skill-section .skill-content { align-items: center; display: grid; gap: 56px; grid-template-columns: 0.9fr 1.1fr; position: relative; z-index: 2; }
#skill-section .skill-media { opacity: 0; transform: translateX(-42px); transition: opacity 0.8s ease, transform 0.8s ease; }
#skill-section.is-active .skill-media { opacity: 1; transform: translateX(0); }
#skill-section .skill-image { aspect-ratio: 1 / 1; border-radius: 42px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42); object-fit: cover; width: 100%; }
#skill-section .skill-right { opacity: 0; transform: translateX(42px); transition: opacity 0.8s ease, transform 0.8s ease; }
#skill-section.is-active .skill-right { opacity: 1; transform: translateX(0); }
#skill-section .skill-subtitle { color: #16e27d; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#skill-section .skill-title { color: #ffffff; font-size: clamp(30px, 4vw, 50px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; margin-bottom: 18px; }
#skill-section .skill-text { color: rgba(237, 245, 255, 0.72); font-size: 17px; margin-bottom: 30px; }
#skill-section .skill-list { display: grid; gap: 16px; }
#skill-section .skill-item { align-items: center; background: rgba(255, 255, 255, 0.075); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; display: grid; gap: 16px; grid-template-columns: auto 1fr; padding: 18px; transition: background 0.3s ease, transform 0.3s ease; }
#skill-section .skill-item:hover { background: rgba(255, 255, 255, 0.12); transform: translateX(8px); }
#skill-section .skill-number { align-items: center; background: rgba(22, 226, 125, 0.16); border-radius: 16px; color: #16e27d; display: flex; font-size: 18px; font-weight: 900; height: 52px; justify-content: center; width: 52px; }
#skill-section .skill-item-title { color: #ffffff; font-size: 18px; font-weight: 900; }
#skill-section .skill-item-text { color: rgba(237, 245, 255, 0.64); font-size: 14px; }

/* device-section */
#device-section { background: #ffffff; color: #101928; padding: 98px 6%; }
#device-section .device-content { background: linear-gradient(135deg, #0d1a2d, #0e3145 58%, #0c5f48); border-radius: 44px; display: grid; gap: 42px; grid-template-columns: 1fr 1fr; overflow: hidden; padding: 58px; position: relative; }
#device-section .device-content::after { background: radial-gradient( circle, rgba(255, 255, 255, 0.22), transparent 65% ); content: ""; height: 360px; position: absolute; right: -120px; top: -120px; width: 360px; }
#device-section .device-left { opacity: 0; position: relative; transform: translateY(34px); transition: opacity 0.75s ease, transform 0.75s ease; z-index: 2; }
#device-section.is-active .device-left { opacity: 1; transform: translateY(0); }
#device-section .device-subtitle { color: #9df9c7; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#device-section .device-title { color: #ffffff; font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; margin-bottom: 18px; }
#device-section .device-text { color: rgba(237, 245, 255, 0.72); font-size: 17px; }
#device-section .device-list { display: grid; gap: 14px; margin-top: 30px; }
#device-section .device-item { align-items: center; color: #ffffff; display: flex; font-weight: 700; gap: 12px; }
#device-section .device-item::before { background: #16e27d; border-radius: 50%; box-shadow: 0 0 0 7px rgba(22, 226, 125, 0.12); content: ""; height: 9px; width: 9px; }
#device-section .device-media { align-self: center; opacity: 0; position: relative; transform: translateY(44px) rotate(2deg); transition: opacity 0.85s ease 0.1s, transform 0.85s ease 0.1s; z-index: 2; }
#device-section.is-active .device-media { opacity: 1; transform: translateY(0) rotate(0); }
#device-section .device-image { aspect-ratio: 4 / 3; border: 12px solid rgba(255, 255, 255, 0.16); border-radius: 34px; box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34); object-fit: cover; width: 100%; }

/* ranking-section */
#ranking-section { background: #f4f8fb; color: #101928; padding: 92px 6%; }
#ranking-section .ranking-content { margin: 0 auto 40px; max-width: 760px; opacity: 0; text-align: center; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
#ranking-section.is-active .ranking-content { opacity: 1; transform: translateY(0); }
#ranking-section .ranking-subtitle { color: #13985b; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 10px; text-transform: uppercase; }
#ranking-section .ranking-title { color: #08111f; font-size: clamp(30px, 4vw, 48px); font-weight: 900; letter-spacing: -1px; line-height: 1.2; }
#ranking-section .ranking-list { display: grid; gap: 18px; margin: 0 auto; max-width: 980px; }
#ranking-section .ranking-item { align-items: center; background: #ffffff; border: 1px solid rgba(8, 17, 31, 0.08); border-radius: 26px; box-shadow: 0 18px 44px rgba(8, 17, 31, 0.07); display: grid; gap: 20px; grid-template-columns: auto 1fr auto; opacity: 0; padding: 20px; transform: translateX(-34px); transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease; }
#ranking-section.is-active .ranking-item { opacity: 1; transform: translateX(0); }
#ranking-section.is-active .ranking-item:nth-child(2) { transition-delay: 0.08s; }
#ranking-section.is-active .ranking-item:nth-child(3) { transition-delay: 0.16s; }
#ranking-section.is-active .ranking-item:nth-child(4) { transition-delay: 0.24s; }
#ranking-section .ranking-item:hover { box-shadow: 0 24px 58px rgba(8, 17, 31, 0.12); }
#ranking-section .ranking-number { align-items: center; background: #08111f; border-radius: 18px; color: #16e27d; display: flex; font-size: 20px; font-weight: 900; height: 58px; justify-content: center; width: 58px; }
#ranking-section .ranking-item-title { color: #08111f; font-size: 20px; font-weight: 900; }
#ranking-section .ranking-item-text { color: #667386; font-size: 15px; }
#ranking-section .ranking-link { background: rgba(22, 226, 125, 0.13); border-radius: 999px; color: #0b8f54; font-weight: 900; padding: 10px 16px; transition: background 0.3s ease, color 0.3s ease; }
#ranking-section .ranking-link:hover { background: #16e27d; color: #06101d; }

/* cta-section */
#cta-section { background: radial-gradient( circle at center top, rgba(22, 226, 125, 0.22), transparent 34% ), #08111f; padding: 96px 6%; text-align: center; }
#cta-section .cta-content { margin: 0 auto; max-width: 860px; opacity: 0; transform: translateY(34px); transition: opacity 0.8s ease, transform 0.8s ease; }
#cta-section.is-active .cta-content { opacity: 1; transform: translateY(0); }
#cta-section .cta-subtitle { color: #16e27d; font-size: 15px; font-weight: 900; letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; }
#cta-section .cta-title { color: #ffffff; font-size: clamp(34px, 5vw, 62px); font-weight: 900; letter-spacing: -1.5px; line-height: 1.15; margin-bottom: 18px; }
#cta-section .cta-text { color: rgba(237, 245, 255, 0.72); font-size: 18px; margin: 0 auto 34px; max-width: 620px; }
#cta-section .cta-link { background: linear-gradient(135deg, #16e27d, #34d9ff); border-radius: 20px; box-shadow: 0 22px 54px rgba(22, 226, 125, 0.26); color: #06101d; display: inline-flex; font-weight: 900; padding: 15px 30px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
#cta-section .cta-link:hover { box-shadow: 0 28px 64px rgba(52, 217, 255, 0.28); transform: translateY(-5px); }

/* footer */
footer { background: #050b14; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(237, 245, 255, 0.66); padding: 34px 6%; }
footer .footer-content { align-items: center; display: flex; gap: 20px; justify-content: space-between; }
footer .footer-title { color: #ffffff; font-size: 20px; font-weight: 900; }
footer .footer-text { font-size: 14px; }
footer .footer-list { display: flex; gap: 20px; list-style: none; }
footer .footer-list a { font-size: 14px; transition: color 0.3s ease; }
footer .footer-list a:hover { color: #16e27d; }

@keyframes hero-float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(18px) rotate(12deg); } 100% { transform: translateY(0) rotate(0deg); } }

@media (max-width: 1280px) {
	#feature-section .feature-grid { grid-template-columns: repeat(2, 1fr); }
	#game-section .game-grid { gap: 20px; }
	#device-section .device-content { padding: 48px; }
}
@media (max-width: 960px) {
	header { padding: 16px 5%; }
	header nav { display: none; }
	#hero-section { grid-template-columns: 1fr; padding: 120px 5% 70px; }
	#hero-section .hero-media { max-width: 560px; }
	#game-section .game-content { grid-template-columns: 1fr; }
	#game-section .game-grid { grid-template-columns: 1fr; }
	#skill-section .skill-content { grid-template-columns: 1fr; }
	#device-section .device-content { grid-template-columns: 1fr; }
	#ranking-section .ranking-item { grid-template-columns: auto 1fr; }
	#ranking-section .ranking-link { grid-column: 2; justify-self: start; }
}
@media (max-width: 768px) {
	header .site-title { font-size: 20px; }
	#hero-section { gap: 38px; min-height: auto; }
	#hero-section .hero-title { font-size: 42px; }
	#hero-section .hero-text { font-size: 17px; }
	#hero-section .hero-card { bottom: 18px; left: 16px; }
	#feature-section { padding: 76px 5%; }
	#feature-section .feature-grid { grid-template-columns: 1fr; }
	#game-section { padding: 76px 5%; }
	#skill-section { padding: 76px 5%; }
	#device-section { padding: 76px 5%; }
	#device-section .device-content { border-radius: 32px; padding: 34px; }
	#ranking-section { padding: 76px 5%; }
	#cta-section { padding: 76px 5%; }
	footer .footer-content { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 500px) {
	header { padding: 14px 20px; }
	header .site-title::before { height: 32px; width: 32px; }
	#hero-section { padding: 104px 20px 58px; }
	#hero-section .hero-title { font-size: 34px; letter-spacing: -1px; }
	#hero-section .hero-actions { flex-direction: column; }
	#hero-section .hero-link { width: 100%; }
	#hero-section .hero-ball { height: 68px; right: 8px; top: 24px; width: 68px; }
	#hero-section .hero-card { position: static; transform: translateY(-20px); width: 100%; }
	#feature-section { padding: 62px 20px; }
	#feature-section .feature-item { padding: 24px; }
	#game-section { padding: 62px 20px; }
	#game-section .game-item-content { padding: 22px; }
	#skill-section { padding: 62px 20px; }
	#skill-section .skill-item { grid-template-columns: 1fr; }
	#device-section { padding: 62px 20px; }
	#device-section .device-content { padding: 26px; }
	#ranking-section { padding: 62px 20px; }
	#ranking-section .ranking-item { grid-template-columns: 1fr; }
	#ranking-section .ranking-link { grid-column: auto; }
	#cta-section { padding: 62px 20px; }
	footer { padding: 30px 20px; }
	footer .footer-list { flex-wrap: wrap; }
}