:root { --night-color: #07111f; --deep-color: #0b1930; --panel-color: rgba(14, 31, 55, 0.84); --panel-light-color: rgba(27, 54, 88, 0.78); --line-color: rgba(146, 196, 255, 0.2); --text-color: #f4f8ff; --muted-color: #9eb1ca; --blue-color: #60b8ff; --cyan-color: #5ff3e3; --gold-color: #ffcc75; --purple-color: #a884ff; --shadow-color: rgba(0, 0, 0, 0.42); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; background: var(--night-color); color: var(--text-color); font-family: "Noto Sans TC", sans-serif; overflow-x: hidden; }
body::before { position: fixed; inset: 0; z-index: -3; background: radial-gradient( circle at 12% 18%, rgba(64, 135, 255, 0.18), transparent 26% ), radial-gradient( circle at 88% 24%, rgba(95, 243, 227, 0.12), transparent 22% ), linear-gradient(145deg, #06101c 0%, #0a172b 48%, #07111f 100%); content: ""; }
body::after { position: fixed; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.72), transparent 92% ); content: ""; }

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

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

header { position: fixed; top: 0; left: 0; z-index: 20; width: 100%; border-bottom: 1px solid transparent; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
header.is-scrolled { border-color: rgba(146, 196, 255, 0.14); background: rgba(5, 14, 27, 0.9); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22); backdrop-filter: blur(18px); }
header .header-content { display: flex; align-items: center; justify-content: space-between; width: min(1440px, 92%); min-height: 82px; margin: 0 auto; gap: 28px; }
header .site-title { display: flex; align-items: center; margin: 0; gap: 13px; font-size: 20px; font-weight: 800; letter-spacing: 0.12em; }
header .site-title::before { width: 36px; height: 36px; border: 1px solid rgba(95, 243, 227, 0.72); border-radius: 12px; background: linear-gradient( 135deg, rgba(96, 184, 255, 0.25), rgba(95, 243, 227, 0.08) ); box-shadow: 0 0 22px rgba(95, 243, 227, 0.25); content: ""; transform: rotate(45deg); }
header .site-title-text { display: flex; flex-direction: column; line-height: 1.15; }
header .site-title-brand { color: var(--cyan-color); font-size: 10px; font-weight: 700; letter-spacing: 0.34em; }
header .site-title-name { color: #ffffff; }
header .header-nav { display: flex; align-items: center; gap: 28px; }
header .header-nav a { position: relative; color: #dbe8f8; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; transition: color 0.25s ease; }
header .header-nav a::after { position: absolute; bottom: -9px; left: 50%; width: 0; height: 2px; border-radius: 10px; background: linear-gradient(90deg, var(--blue-color), var(--cyan-color)); content: ""; transition: width 0.25s ease, left 0.25s ease; }
header .header-nav a:hover { color: #ffffff; }
header .header-nav a:hover::after { left: 0; width: 100%; }
header .header-actions { display: flex; align-items: center; gap: 10px; }
header .header-action-link { padding: 10px 16px; border: 1px solid rgba(146, 196, 255, 0.26); border-radius: 999px; color: #e8f2ff; font-size: 13px; font-weight: 700; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
header .header-action-link:hover { border-color: rgba(95, 243, 227, 0.7); background: rgba(95, 243, 227, 0.08); transform: translateY(-2px); }
header .menu-trigger { display: none; width: 42px; height: 42px; border: 1px solid rgba(146, 196, 255, 0.24); border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
header .menu-trigger-line { display: block; width: 18px; height: 2px; margin: 5px auto; border-radius: 10px; background: #ffffff; transition: transform 0.25s ease, opacity 0.25s ease; }
header.is-open .menu-trigger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.is-open .menu-trigger-line:nth-child(2) { opacity: 0; }
header.is-open .menu-trigger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

main { display: block; }

#hero-section { position: relative; min-height: 860px; padding: 174px 4% 88px; overflow: hidden; }
#hero-section .hero-orbit { position: absolute; top: 140px; right: -160px; width: 680px; height: 680px; border: 1px solid rgba(96, 184, 255, 0.15); border-radius: 50%; }
#hero-section .hero-orbit::before { position: absolute; inset: 72px; border: 1px dashed rgba(95, 243, 227, 0.19); border-radius: 50%; content: ""; }
#hero-section .hero-orbit::after { position: absolute; top: 13%; left: 6%; width: 22px; height: 22px; border-radius: 50%; background: var(--cyan-color); box-shadow: 0 0 26px rgba(95, 243, 227, 0.85); content: ""; }
#hero-section .hero-content { display: grid; position: relative; z-index: 2; grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr); align-items: center; width: min(1440px, 100%); margin: 0 auto; gap: 64px; }
#hero-section .hero-eyebrow { display: inline-flex; align-items: center; margin: 0 0 22px; gap: 9px; color: var(--cyan-color); font-size: 12px; font-weight: 800; letter-spacing: 0.28em; }
#hero-section .hero-eyebrow::before { width: 42px; height: 1px; background: var(--cyan-color); content: ""; }
#hero-section .hero-title { margin: 0; font-size: clamp(52px, 6vw, 88px); font-weight: 900; letter-spacing: -0.06em; line-height: 1.02; }
#hero-section .hero-title-highlight { display: block; background: linear-gradient(100deg, #ffffff 0%, #b5e5ff 50%, #6cf2e4 100%); background-clip: text; color: transparent; }
#hero-section .hero-subtitle { max-width: 630px; margin: 24px 0 0; color: #b4c6dc; font-size: 17px; line-height: 1.9; }
#hero-section .hero-actions { display: flex; flex-wrap: wrap; margin-top: 36px; gap: 14px; }
#hero-section .hero-primary-link { display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 999px; background: linear-gradient(110deg, var(--blue-color), var(--cyan-color)); color: #061421; font-size: 14px; font-weight: 900; letter-spacing: 0.08em; box-shadow: 0 16px 32px rgba(68, 207, 224, 0.2); transition: transform 0.25s ease, box-shadow 0.25s ease; }
#hero-section .hero-primary-link:hover { box-shadow: 0 20px 42px rgba(68, 207, 224, 0.32); transform: translateY(-4px); }
#hero-section .hero-secondary-link { display: inline-flex; align-items: center; padding: 15px 24px; border: 1px solid rgba(146, 196, 255, 0.26); border-radius: 999px; color: #eff7ff; font-size: 14px; font-weight: 800; letter-spacing: 0.08em; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
#hero-section .hero-secondary-link:hover { border-color: rgba(95, 243, 227, 0.65); background: rgba(95, 243, 227, 0.08); transform: translateY(-4px); }
#hero-section .hero-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 590px; margin-top: 62px; border-top: 1px solid rgba(146, 196, 255, 0.18); gap: 0; }
#hero-section .hero-stat-item { padding: 20px 16px 0 0; }
#hero-section .hero-stat-value { display: block; color: #ffffff; font-size: 28px; font-weight: 900; }
#hero-section .hero-stat-text { display: block; margin-top: 4px; color: var(--muted-color); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; }
#hero-section .hero-media { position: relative; min-height: 560px; }
#hero-section .hero-main-figure { position: absolute; top: 20px; right: 0; width: min(640px, 100%); margin: 0; overflow: hidden; border: 1px solid rgba(146, 196, 255, 0.22); border-radius: 42px 42px 42px 120px; box-shadow: 0 36px 72px rgba(0, 0, 0, 0.4); transform: rotate(-2deg); }
#hero-section .hero-main-figure::after { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 50%, rgba(3, 11, 22, 0.88) 100% ); content: ""; }
#hero-section .hero-main-image { width: 100%; min-height: 520px; object-fit: cover; }
#hero-section .hero-floating-card { position: absolute; bottom: 0; left: -36px; z-index: 2; display: flex; width: 330px; padding: 18px; border: 1px solid rgba(146, 196, 255, 0.24); border-radius: 24px; background: rgba(7, 19, 35, 0.88); box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34); backdrop-filter: blur(18px); gap: 14px; transition: transform 0.3s ease; }
#hero-section .hero-floating-card:hover { transform: translateY(-8px); }
#hero-section .hero-floating-image { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; }
#hero-section .hero-floating-content { display: flex; flex-direction: column; justify-content: center; }
#hero-section .hero-floating-label { color: var(--cyan-color); font-size: 10px; font-weight: 800; letter-spacing: 0.18em; }
#hero-section .hero-floating-title { margin: 5px 0 0; color: #ffffff; font-size: 17px; font-weight: 800; }
#hero-section .hero-floating-text { margin: 6px 0 0; color: var(--muted-color); font-size: 12px; }

#category-section { padding: 28px 4% 112px; }
#category-section .category-content { width: min(1440px, 100%); margin: 0 auto; }
#category-section .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 28px; gap: 24px; }
#category-section .section-label { margin: 0 0 9px; color: var(--cyan-color); font-size: 11px; font-weight: 800; letter-spacing: 0.28em; }
#category-section .section-title { margin: 0; color: #ffffff; font-size: 38px; font-weight: 900; letter-spacing: -0.04em; }
#category-section .section-text { max-width: 520px; margin: 10px 0 0; color: var(--muted-color); font-size: 15px; line-height: 1.8; }
#category-section .filter-list { display: flex; flex-wrap: wrap; padding: 0; margin: 0 0 30px; gap: 10px; list-style: none; }
#category-section .filter-item a { display: block; padding: 11px 18px; border: 1px solid rgba(146, 196, 255, 0.18); border-radius: 999px; color: #b7c8dd; font-size: 13px; font-weight: 700; transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease; }
#category-section .filter-item a:hover { border-color: rgba(95, 243, 227, 0.58); color: #ffffff; }
#category-section .filter-item.is-active a { border-color: rgba(95, 243, 227, 0.68); background: rgba(95, 243, 227, 0.12); color: var(--cyan-color); }
#category-section .game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
#category-section .game-card { position: relative; overflow: hidden; border: 1px solid rgba(146, 196, 255, 0.16); border-radius: 24px; background: rgba(14, 31, 55, 0.76); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.15); opacity: 1; transform: translateY(0); transition: opacity 0.28s ease, transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease; }
#category-section .game-card:hover { border-color: rgba(95, 243, 227, 0.58); box-shadow: 0 22px 44px rgba(0, 0, 0, 0.32); transform: translateY(-8px); }
#category-section .game-card.is-hidden { display: none; }
#category-section .game-media { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
#category-section .game-media::after { position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 48%, rgba(5, 15, 28, 0.88) 100% ); content: ""; }
#category-section .game-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease; }
#category-section .game-card:hover .game-image { transform: scale(1.08); }
#category-section .game-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: rgba(5, 15, 28, 0.68); color: #e7f6ff; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; backdrop-filter: blur(10px); }
#category-section .game-content { padding: 18px; }
#category-section .game-title { margin: 0; color: #ffffff; font-size: 17px; font-weight: 800; }
#category-section .game-text { min-height: 45px; margin: 9px 0 0; color: var(--muted-color); font-size: 13px; line-height: 1.7; }
#category-section .game-link { display: inline-flex; margin-top: 15px; color: var(--cyan-color); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }
#category-section .game-link::after { margin-left: 8px; content: "→"; transition: transform 0.25s ease; }
#category-section .game-link:hover::after { transform: translateX(5px); }

#feature-section { position: relative; padding: 120px 4%; overflow: hidden; background: linear-gradient( 135deg, rgba(14, 33, 58, 0.78), rgba(7, 18, 34, 0.9) ); }
#feature-section .feature-content { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(480px, 1.05fr); align-items: center; width: min(1440px, 100%); margin: 0 auto; gap: 78px; }
#feature-section .feature-media { position: relative; min-height: 560px; }
#feature-section .feature-main-image { position: absolute; top: 0; left: 0; width: 76%; height: 510px; border: 1px solid rgba(146, 196, 255, 0.2); border-radius: 28px; object-fit: cover; box-shadow: 0 28px 54px rgba(0, 0, 0, 0.34); }
#feature-section .feature-small-image { position: absolute; right: 0; bottom: 0; width: 42%; border: 10px solid #0c1b31; border-radius: 28px; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.34); }
#feature-section .feature-marker { position: absolute; right: 12%; top: 10%; width: 88px; height: 88px; border: 1px solid rgba(95, 243, 227, 0.62); border-radius: 50%; box-shadow: 0 0 0 14px rgba(95, 243, 227, 0.05), 0 0 0 28px rgba(95, 243, 227, 0.025); }
#feature-section .feature-marker::before { position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan-color); box-shadow: 0 0 22px rgba(95, 243, 227, 0.86); content: ""; transform: translate(-50%, -50%); }
#feature-section .section-label { margin: 0 0 12px; color: var(--gold-color); font-size: 11px; font-weight: 800; letter-spacing: 0.28em; }
#feature-section .section-title { margin: 0; color: #ffffff; font-size: clamp(38px, 4vw, 60px); font-weight: 900; letter-spacing: -0.05em; line-height: 1.16; }
#feature-section .feature-text { margin: 20px 0 0; color: #aebfd3; font-size: 16px; line-height: 1.95; }
#feature-section .feature-list { display: grid; padding: 0; margin: 34px 0 0; gap: 14px; list-style: none; }
#feature-section .feature-item { display: flex; align-items: center; gap: 14px; color: #e4eefb; font-size: 14px; font-weight: 700; }
#feature-section .feature-item::before { width: 12px; height: 12px; border: 2px solid var(--cyan-color); border-radius: 50%; box-shadow: 0 0 14px rgba(95, 243, 227, 0.35); content: ""; }
#feature-section .feature-link { display: inline-flex; margin-top: 38px; padding: 14px 22px; border: 1px solid rgba(255, 204, 117, 0.46); border-radius: 999px; color: var(--gold-color); font-size: 13px; font-weight: 900; letter-spacing: 0.1em; transition: background 0.25s ease, transform 0.25s ease; }
#feature-section .feature-link:hover { background: rgba(255, 204, 117, 0.1); transform: translateY(-4px); }

#news-section { padding: 120px 4%; }
#news-section .news-content { width: min(1440px, 100%); margin: 0 auto; }
#news-section .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 30px; gap: 24px; }
#news-section .section-label { margin: 0 0 9px; color: var(--purple-color); font-size: 11px; font-weight: 800; letter-spacing: 0.28em; }
#news-section .section-title { margin: 0; color: #ffffff; font-size: 38px; font-weight: 900; letter-spacing: -0.04em; }
#news-section .section-more-link { color: var(--cyan-color); font-size: 13px; font-weight: 800; letter-spacing: 0.1em; }
#news-section .news-list { display: grid; padding: 0; margin: 0; border-top: 1px solid rgba(146, 196, 255, 0.18); list-style: none; }
#news-section .news-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; padding: 23px 12px; border-bottom: 1px solid rgba(146, 196, 255, 0.14); gap: 22px; transition: background 0.25s ease, padding 0.25s ease; }
#news-section .news-item:hover { padding-right: 22px; padding-left: 22px; background: rgba(96, 184, 255, 0.05); }
#news-section .news-date { color: var(--cyan-color); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
#news-section .news-title { margin: 0; color: #e9f3ff; font-size: 15px; font-weight: 700; line-height: 1.7; }
#news-section .news-tag { padding: 6px 10px; border: 1px solid rgba(146, 196, 255, 0.18); border-radius: 999px; color: #aec3db; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; }

#journey-section { padding: 46px 4% 128px; }
#journey-section .journey-content { display: grid; position: relative; grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr); align-items: center; width: min(1440px, 100%); padding: 62px; border: 1px solid rgba(146, 196, 255, 0.2); border-radius: 34px; background: linear-gradient( 130deg, rgba(28, 58, 94, 0.78), rgba(11, 29, 52, 0.92) ); overflow: hidden; gap: 58px; }
#journey-section .journey-content::after { position: absolute; right: -110px; bottom: -160px; width: 380px; height: 380px; border: 1px solid rgba(95, 243, 227, 0.18); border-radius: 50%; content: ""; }
#journey-section .journey-label { margin: 0 0 12px; color: var(--cyan-color); font-size: 11px; font-weight: 800; letter-spacing: 0.28em; }
#journey-section .journey-title { margin: 0; color: #ffffff; font-size: clamp(38px, 4vw, 58px); font-weight: 900; letter-spacing: -0.05em; line-height: 1.15; }
#journey-section .journey-text { margin: 20px 0 0; color: #b3c5db; font-size: 15px; line-height: 1.9; }
#journey-section .journey-links { display: flex; flex-wrap: wrap; margin-top: 30px; gap: 12px; }
#journey-section .journey-primary-link { display: inline-flex; padding: 14px 21px; border-radius: 999px; background: #ffffff; color: #0a1b30; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; transition: transform 0.25s ease, box-shadow 0.25s ease; }
#journey-section .journey-primary-link:hover { box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2); transform: translateY(-4px); }
#journey-section .journey-secondary-link { display: inline-flex; padding: 14px 21px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; color: #ffffff; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; transition: background 0.25s ease, transform 0.25s ease; }
#journey-section .journey-secondary-link:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-4px); }
#journey-section .journey-grid { display: grid; position: relative; z-index: 2; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#journey-section .journey-item { padding: 22px 16px; border: 1px solid rgba(146, 196, 255, 0.2); border-radius: 20px; background: rgba(7, 19, 35, 0.52); text-align: center; backdrop-filter: blur(12px); transition: border-color 0.25s ease, transform 0.25s ease; }
#journey-section .journey-item:hover { border-color: rgba(95, 243, 227, 0.58); transform: translateY(-6px); }
#journey-section .journey-number { display: block; color: var(--cyan-color); font-size: 28px; font-weight: 900; }
#journey-section .journey-caption { display: block; margin-top: 6px; color: #d9e6f5; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

.reveal-item { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-item.is-active { opacity: 1; transform: translateY(0); }

footer { border-top: 1px solid rgba(146, 196, 255, 0.15); background: rgba(3, 11, 21, 0.78); }
footer .footer-content { display: flex; align-items: center; justify-content: space-between; width: min(1440px, 92%); min-height: 100px; margin: 0 auto; gap: 24px; }
footer .footer-brand { color: #ffffff; font-size: 15px; font-weight: 800; letter-spacing: 0.15em; }
footer .footer-text { margin: 6px 0 0; color: #8296b0; font-size: 11px; letter-spacing: 0.08em; }
footer .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
footer .footer-links a { color: #a9bbd0; font-size: 12px; font-weight: 700; transition: color 0.25s ease; }
footer .footer-links a:hover { color: var(--cyan-color); }

@media (max-width: 1280px) {
	#hero-section .hero-content { grid-template-columns: minmax(0, 0.9fr) minmax(470px, 1.1fr); gap: 38px; }
	#hero-section .hero-floating-card { left: -12px; }
	#category-section .game-grid { grid-template-columns: repeat(3, 1fr); }
	#feature-section .feature-content { gap: 52px; }
	#journey-section .journey-content { padding: 50px; gap: 40px; }
}
@media (max-width: 960px) {
	header .header-nav { position: fixed; top: 74px; right: 4%; left: 4%; display: grid; padding: 20px; border: 1px solid rgba(146, 196, 255, 0.18); border-radius: 18px; background: rgba(5, 14, 27, 0.96); opacity: 0; pointer-events: none; transform: translateY(-14px); transition: opacity 0.25s ease, transform 0.25s ease; backdrop-filter: blur(18px); gap: 18px; }
	header.is-open .header-nav { opacity: 1; pointer-events: auto; transform: translateY(0); }
	header .header-actions { margin-left: auto; }
	header .menu-trigger { display: block; }
	#hero-section { min-height: auto; padding-top: 150px; }
	#hero-section .hero-content { grid-template-columns: 1fr; gap: 42px; }
	#hero-section .hero-media { min-height: 500px; }
	#hero-section .hero-main-figure { left: 0; right: auto; width: 100%; }
	#hero-section .hero-main-image { min-height: 460px; }
	#feature-section .feature-content { grid-template-columns: 1fr; gap: 44px; }
	#feature-section .feature-media { order: 2; }
	#journey-section .journey-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	header .header-content { min-height: 72px; }
	header .site-title { font-size: 17px; }
	header .header-action-link { display: none; }
	#hero-section { padding: 132px 5% 76px; }
	#hero-section .hero-title { font-size: 58px; }
	#hero-section .hero-subtitle { font-size: 15px; }
	#hero-section .hero-stats-grid { margin-top: 42px; }
	#hero-section .hero-stat-value { font-size: 23px; }
	#hero-section .hero-media { min-height: 420px; }
	#hero-section .hero-main-image { min-height: 370px; }
	#hero-section .hero-floating-card { bottom: -12px; width: 290px; }
	#category-section { padding: 24px 5% 88px; }
	#category-section .section-heading { display: block; }
	#category-section .section-title { font-size: 32px; }
	#category-section .game-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	#category-section .game-content { padding: 15px; }
	#category-section .game-title { font-size: 15px; }
	#category-section .game-text { min-height: 0; font-size: 12px; }
	#feature-section { padding: 90px 5%; }
	#feature-section .feature-media { min-height: 460px; }
	#feature-section .feature-main-image { width: 82%; height: 410px; }
	#news-section { padding: 88px 5%; }
	#news-section .section-heading { display: block; }
	#news-section .section-more-link { display: inline-flex; margin-top: 14px; }
	#news-section .news-item { grid-template-columns: 1fr; padding: 18px 4px; gap: 7px; }
	#news-section .news-tag { width: fit-content; }
	#journey-section { padding: 26px 5% 92px; }
	#journey-section .journey-content { padding: 36px 26px; }
	#journey-section .journey-grid { grid-template-columns: 1fr; }
	footer .footer-content { display: block; padding: 24px 0; }
	footer .footer-links { margin-top: 16px; }
}
@media (max-width: 500px) {
	header .site-title::before { width: 28px; height: 28px; border-radius: 9px; }
	header .site-title-brand { font-size: 8px; }
	header .site-title-name { font-size: 15px; }
	#hero-section .hero-title { font-size: 46px; }
	#hero-section .hero-actions { display: grid; }
	#hero-section .hero-primary-link { justify-content: center; }
	#hero-section .hero-secondary-link { justify-content: center; }
	#hero-section .hero-stats-grid { grid-template-columns: 1fr; gap: 16px; }
	#hero-section .hero-stat-item { padding-top: 12px; }
	#hero-section .hero-media { min-height: 340px; }
	#hero-section .hero-main-figure { border-radius: 28px 28px 28px 74px; }
	#hero-section .hero-main-image { min-height: 290px; }
	#hero-section .hero-floating-card { left: 10px; width: calc(100% - 20px); padding: 12px; }
	#hero-section .hero-floating-image { width: 66px; height: 66px; }
	#category-section .section-title { font-size: 28px; }
	#category-section .game-grid { grid-template-columns: 1fr; }
	#category-section .game-media { aspect-ratio: 1.24 / 1; }
	#feature-section .section-title { font-size: 36px; }
	#feature-section .feature-media { min-height: 370px; }
	#feature-section .feature-main-image { width: 86%; height: 320px; }
	#feature-section .feature-small-image { width: 46%; border-width: 7px; }
	#journey-section .journey-title { font-size: 36px; }
	#journey-section .journey-links { display: grid; }
	#journey-section .journey-primary-link { justify-content: center; }
	#journey-section .journey-secondary-link { justify-content: center; }
}