*,*::before,*::after { margin:0; padding:0; box-sizing:border-box}img { max-width:100%; height:auto; display:block}body { background:linear-gradient(135deg,#2b2b62 0%,#404584 50%,#592a6f 100%); background-size:100% 100%,cover; color:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif; line-height:1.6; min-height:100vh; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; position:relative; overflow-x:hidden}header { text-align:center; padding:1rem 0}.social-share-fixed { position:fixed; bottom:20px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; transition:all 0.3s ease}.share-fixed-button { display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:rgba(26,26,46,0.9); border:2px solid rgba(217,19,29,0.5); color:#ffffff; text-decoration:none; transition:all 0.3s ease; backdrop-filter:blur(10px); box-shadow:0 4px 15px rgba(0,0,0,0.3); cursor:pointer}.share-fixed-button:hover { transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.4); border-color:#D9131D}.share-fixed-icon { width:24px; height:24px; font-size:20px; display:flex; align-items:center; justify-content:center}.share-fixed-button.steam-share:hover { background:linear-gradient(45deg,#1b2838,#2a475e); border-color:#66c0f4}.share-fixed-button.twitter-share:hover { background:linear-gradient(45deg,#1da1f2,#0d8bd9); border-color:#1da1f2}.share-fixed-button.facebook-share:hover { background:linear-gradient(45deg,#1877f2,#0d5bb8); border-color:#1877f2}.share-fixed-button.instagram-share:hover { background:linear-gradient(45deg,#E4405F,#C13584,#833AB4); border-color:#E4405F}.copy-notification { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:rgba(26,26,46,0.95); color:#ffffff; padding:1rem 2rem; border-radius:25px; border:2px solid #D9131D; font-weight:bold; z-index:1001; backdrop-filter:blur(10px); box-shadow:0 8px 25px rgba(0,0,0,0.5); transition:transform 0.3s ease}.copy-notification.show { transform:translate(-50%,-50%) scale(1)}.language-tabs { display:flex; justify-content:center; margin:1rem 0 2rem 0; gap:0.5rem}.tab-button { background:linear-gradient(45deg,#1a1a2e,#16213e); color:#ffffff; border:2px solid #D9131D; padding:10px 20px; border-radius:25px; cursor:pointer; font-size:1rem; font-weight:bold; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.3); text-decoration:none; display:inline-block}.tab-button:hover { background:linear-gradient(45deg,#16213e,#0f3460); transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.4); text-decoration:none}.tab-button.active { background:linear-gradient(45deg,#D9131D,#E02A2A); border-color:#E02A2A; box-shadow:0 4px 15px rgba(217,19,29,0.4); text-decoration:none}.tab-button.active:hover { background:linear-gradient(45deg,#E02A2A,#D9131D); transform:translateY(-1px); box-shadow:0 6px 20px rgba(217,19,29,0.5); text-decoration:none}.header-image { max-width:100%; height:auto; max-height:70vh; width:auto; aspect-ratio:16/9; object-fit:cover; border-radius:15px; box-shadow:0 8px 25px rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.1); display:block; margin:0 auto}main { display:flex; justify-content:center; align-items:center; min-height:60vh; padding:0 2rem 2rem 2rem}.content { text-align:center; max-width:600px}.hero-content { text-align:center; max-width:800px; margin:0 auto; padding:0 0 2rem 0}.hero-title { font-size:4rem; margin-bottom:1.5rem; line-height:1.2; letter-spacing:0.05em; text-shadow:2px 2px 4px rgba(0,0,0,0.5); position:relative}.hero-title::after { content:''; position:absolute; bottom:-8px; left:0; width:100%; height:3px; background:linear-gradient(90deg,#D9131D,#FF6B6B,#D9131D); border-radius:2px; box-shadow:0 2px 4px rgba(217,19,29,0.3)}.title-main { display:block; color:#D9131D; font-weight:bold; margin-bottom:0; letter-spacing:0.02em}.title-accent { display:block; color:#D9131D; font-size:0.6em; font-weight:normal; opacity:0.9; letter-spacing:0.1em}.hero-subtitle { font-size:1.6rem; color:#DB0CDA; margin-bottom:1.5rem; font-weight:bold; text-align:center; line-height:1.3; white-space:nowrap}.hero-subtitle::first-letter { color:#DB0CDA; font-size:1em; font-weight:bold}.hero-description { font-size:1.1rem; margin-bottom:2.5rem; color:#ffffff; text-shadow:1px 1px 2px rgba(0,0,0,0.5); line-height:1.8; max-width:600px; margin-left:auto; margin-right:auto}.hero-description::first-letter { color:#ffffff; font-size:1em; font-weight:normal}.hero-stats { display:flex; justify-content:center; gap:2rem; margin:2.5rem 0; flex-wrap:wrap}.stat-item { text-align:center; padding:1rem; background:rgba(22,33,62,0.4); border-radius:10px; border:1px solid rgba(217,19,29,0.5); min-width:120px; transition:all 0.3s ease}.stat-item:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(217,19,29,0.2); border-color:#D9131D}.stat-number { display:block; font-size:1.8rem; font-weight:bold; color:#D9131D; margin-bottom:0.5rem}.stat-label { display:block; font-size:0.9rem; color:#e0e0e0; opacity:0.9}.hero-social-proof { margin-top:3rem; padding-top:2.5rem; border-top:1px solid rgba(217,19,29,0.5)}.developer-info { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:2rem}.developer-avatar { width:50px; height:50px; border-radius:50%; border:2px solid rgba(217,19,29,0.5); object-fit:cover}.social-proof-text { color:#e0e0e0; margin:0; font-size:1.1rem}.social-links { display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:350px; margin:0 auto}.social-link { display:flex; align-items:center; justify-content:flex-start; gap:0.8rem; padding:1.2rem 1.5rem 1.2rem 2.5rem; background:linear-gradient(135deg,rgba(217,19,29,0.3) 0%,rgba(22,33,62,0.9) 100%); color:#ffffff; text-decoration:none; border-radius:8px; border:2px solid rgba(217,19,29,0.9); transition:all 0.3s ease; font-size:0.9rem; width:100%; min-width:280px; height:56px; box-sizing:border-box; box-shadow:0 4px 12px rgba(217,19,29,0.4),0 0 0 1px rgba(217,19,29,0.1); font-weight:500}.social-link:hover { background:linear-gradient(135deg,rgba(217,19,29,0.5) 0%,rgba(22,33,62,1) 100%); border-color:#D9131D; transform:translateY(-3px); box-shadow:0 8px 25px rgba(217,19,29,0.6),0 0 0 1px rgba(217,19,29,0.2)}.social-link.twitter:hover { background:linear-gradient(135deg,rgba(29,161,242,0.5) 0%,rgba(22,33,62,1) 100%); border-color:#1da1f2; box-shadow:0 8px 25px rgba(29,161,242,0.6),0 0 0 1px rgba(29,161,242,0.2)}.social-link.cien:hover { background:linear-gradient(135deg,rgba(255,107,107,0.5) 0%,rgba(22,33,62,1) 100%); border-color:#ff6b6b; box-shadow:0 8px 25px rgba(255,107,107,0.6),0 0 0 1px rgba(255,107,107,0.2)}.social-icon { font-size:1.2rem}.social-icon-img { width:20px; height:20px; margin-right:0.5rem; vertical-align:middle}.cta-button.primary-cta { background:linear-gradient(45deg,#D9131D,#E02A2A); color:#ffffff; border-color:#E02A2A; padding:1.5rem 2.1rem; font-size:1.35rem; box-shadow:0 6px 20px rgba(217,19,29,0.4); min-height:68px}.cta-button.primary-cta:hover { background:linear-gradient(45deg,#E02A2A,#D9131D); transform:translateY(-3px); box-shadow:0 10px 30px rgba(217,19,29,0.5)}.cta-sub { display:block; font-size:0.8em; opacity:0.9; margin-top:0.2rem}h1 { font-size:3rem; margin-bottom:1rem; color:#D9131D; text-shadow:2px 2px 4px rgba(0,0,0,0.5)}p { font-size:1.2rem; margin-bottom:2rem; color:#f0f0f0; text-shadow:1px 1px 2px rgba(0,0,0,0.5); line-height:1.8}p::first-letter { color:#DB0CDA; font-size:1.3em; font-weight:bold}.social-proof-text::first-letter { color:#DB0CDA; font-size:1.3em; font-weight:bold}.subtitle { font-size:1.4rem; color:#D9131D; margin-bottom:2rem; font-weight:bold; text-align:center}.hero-cta { display:flex; gap:1.5rem; justify-content:center; align-items:center; margin:2.5rem 0 3rem; flex-wrap:wrap}.cta-button { display:flex; align-items:center; gap:0.8rem; padding:1rem 2rem; border-radius:12px; text-decoration:none; font-weight:bold; font-size:1.1rem; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2); border:2px solid transparent}.cta-button.steam-cta { background:linear-gradient(45deg,#1b2838,#2a475e); color:#ffffff; border-color:#66c0f4}.cta-button.steam-cta:hover { background:linear-gradient(45deg,#2a475e,#1b2838); transform:translateY(-2px); box-shadow:0 8px 25px rgba(102,192,244,0.3)}.cta-button.secondary-cta { background:rgba(217,19,29,0.1); color:#D9131D; border-color:#D9131D}.cta-button.secondary-cta:hover { background:rgba(217,19,29,0.2); transform:translateY(-2px); box-shadow:0 8px 25px rgba(217,19,29,0.3)}.cta-icon { font-size:1.3rem}.cta-icon-img { width:40px; height:40px; margin-right:0.8rem; vertical-align:middle; flex-shrink:0}.cta-text { display:flex; flex-direction:column; align-items:flex-start; line-height:1.2}.cta-main { font-size:1.1rem; font-weight:bold}.final-cta-section { margin:4rem 0 2rem; padding:4rem 2rem; background:linear-gradient(135deg,rgba(217,19,29,0.1),rgba(22,33,62,0.3)); border-radius:20px; border:2px solid rgba(217,19,29,0.5); text-align:center; position:relative; overflow:hidden}.final-cta-section::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(45deg,transparent,rgba(217,19,29,0.05),transparent); animation:shimmer 3s infinite}.cta-title { font-size:3rem; color:#D9131D; margin-bottom:1.5rem; font-weight:bold; text-shadow:2px 2px 4px rgba(0,0,0,0.5); position:relative; z-index:1}.cta-description { font-size:1.3rem; color:#f0f0f0; margin-bottom:2.5rem; line-height:1.8; position:relative; z-index:1}.cta-benefits { display:flex; justify-content:center; gap:2rem; margin-bottom:3rem; flex-wrap:wrap; position:relative; z-index:1}.benefit-item { display:flex; align-items:center; gap:0.5rem; padding:1rem 1.5rem; background:rgba(22,33,62,0.4); border-radius:25px; border:1px solid rgba(217,19,29,0.5); transition:all 0.3s ease}.benefit-item:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(217,19,29,0.3); border-color:#D9131D}.benefit-icon { font-size:1.5rem}.benefit-text { color:#f0f0f0; font-weight:500; font-size:1.1rem}.cta-buttons { display:flex; justify-content:center; gap:1.5rem; margin-bottom:2rem; flex-wrap:wrap; position:relative; z-index:1}.large-cta { padding:1.5rem 3rem; font-size:1.3rem; box-shadow:0 8px 25px rgba(217,19,29,0.4)}.large-cta:hover { transform:translateY(-5px); box-shadow:0 15px 40px rgba(217,19,29,0.5)}.cta-note { position:relative; z-index:1}.cta-note p { color:#DB0CDA; font-size:1.1rem; margin:0; font-style:italic; opacity:0.9}@keyframes shimmer { 0% { transform:translateX(-100%)} 100% { transform:translateX(100%)}}.final-cta-section h2 { color:#D9131D; font-size:2.2rem; margin-bottom:1rem; font-weight:bold}.final-cta-section p { color:#e0e0e0; font-size:1.1rem; margin-bottom:2rem; opacity:0.9}.final-cta-buttons { display:flex; gap:1.5rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:1.5rem; margin-bottom:0}.cta-button.large { padding:1.2rem 2.5rem; font-size:1.2rem}.cta-button.twitter { background:linear-gradient(45deg,#1da1f2,#0d8bd9); color:#ffffff; border-color:#1da1f2}.cta-button.twitter:hover { background:linear-gradient(45deg,#0d8bd9,#1da1f2); transform:translateY(-2px); box-shadow:0 8px 25px rgba(29,161,242,0.3)}.cta-button.cien { background:linear-gradient(45deg,#F6AD55,#ED8936); color:#ffffff; border-color:#F6AD55}.cta-button.cien:hover { background:linear-gradient(45deg,#ED8936,#F6AD55); transform:translateY(-2px); box-shadow:0 8px 25px rgba(246,173,85,0.3)}.title-icon { width:1.5rem; height:1.5rem; margin-right:0.75rem; vertical-align:text-top; border-radius:50%; object-fit:cover}.title-with-icon { display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:1.5rem; margin-top:0}.final-cta-section h2 { color:#D9131D; text-shadow:0 2px 4px rgba(0,0,0,0.5); font-weight:700}.icon-with-name { display:flex; align-items:flex-end; justify-content:center; margin-top:1rem; gap:0.5rem}.title-icon-large { width:6rem; height:6rem; border-radius:50%; object-fit:cover; box-shadow:0 4px 15px rgba(0,0,0,0.3)}.developer-name { color:#ffffff; font-size:0.9rem; font-weight:600; text-shadow:0 2px 4px rgba(0,0,0,0.5); margin-left:-1rem; margin-bottom:-0.5rem}section { margin-bottom:3rem; padding:2rem; background:rgba(26,26,46,0.3); border-radius:15px; border:1px solid rgba(217,19,29,0.4)}.story-section { background:rgba(26,26,46,0.3); padding:2rem; margin-bottom:2rem; border-radius:10px; border:1px solid rgba(217,19,29,0.5)}.story-content { max-width:1200px; margin:0 auto}.story-image-container { position:relative; display:inline-block; width:100%; margin:2rem 0}.story-image { width:100%; height:auto; border-radius:15px; box-shadow:0 8px 25px rgba(0,0,0,0.4); border:2px solid rgba(255,255,255,0.1); display:block}.story-overlay-button { position:absolute; top:62%; left:20%; width:8%; height:20%; background:rgba(255,255,255,0); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; cursor:default; transform:translateY(-70%)}.overlay-button-icon { font-size:24px; color:#D9131D}.story-intro,.story-turning-point { margin-bottom:2rem; padding:1.5rem; background:rgba(22,33,62,0.2); border-radius:8px; border-left:4px solid #D9131D; transition:all 0.3s ease}.story-intro:hover,.story-turning-point:hover { transform:translateX(5px); box-shadow:0 4px 15px rgba(217,19,29,0.2)}.story-intro h3,.story-turning-point h3 { color:#D9131D; font-size:1.4rem; margin-bottom:1rem; font-weight:bold}.story-intro p,.story-turning-point p { color:#f0f0f0; line-height:1.8; margin:0}.story-theme { margin-top:2rem; text-align:center}.story-theme blockquote { margin:0; padding:2rem; background:linear-gradient(135deg,rgba(217,19,29,0.1),rgba(22,33,62,0.3)); border-radius:15px; border:2px solid rgba(217,19,29,0.5); position:relative; font-style:italic}.story-theme blockquote::before { content:'"'; font-size:4rem; color:#D9131D; position:absolute; top:-10px; left:20px; opacity:0.3}.story-theme blockquote::after { content:'"'; font-size:4rem; color:#D9131D; position:absolute; bottom:-20px; right:20px; opacity:0.3}.story-theme blockquote p { color:#ffffff; font-size:1.3rem; line-height:1.6; margin:0; text-shadow:1px 1px 2px rgba(0,0,0,0.5)}.features-section { margin-bottom:3rem; padding:2rem; background:rgba(26,26,46,0.3); border-radius:15px; border:1px solid rgba(217,19,29,0.4)}.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:2rem}.feature-card { background:rgba(22,33,62,0.4); padding:1.5rem; border-radius:12px; border:1px solid rgba(217,19,29,0.5); text-align:center; transition:all 0.3s ease}.feature-card:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(217,19,29,0.2); border-color:#D9131D}.feature-icon { font-size:2.5rem; margin-bottom:1rem; display:block}.feature-card h3 { color:#D9131D; font-size:1.2rem; margin-bottom:0.8rem; font-weight:bold}.feature-card p { color:#e0e0e0; font-size:0.95rem; line-height:1.5; margin:0}.section-divider { display:flex; align-items:center; justify-content:center; margin:3rem 0; gap:1rem}.divider-line { flex:1; height:1px; background:rgba(217,19,29,0.3); max-width:150px}.divider-icon { font-size:1.5rem; padding:0.3rem; background:rgba(22,33,62,0.4); border-radius:50%; border:1px solid rgba(217,19,29,0.5)}.section-title { font-size:2rem; margin-bottom:1.5rem; color:#e0e0e0; text-align:center; display:flex; align-items:center; justify-content:center; gap:0.8rem}h2 { font-size:2rem; color:#e0e0e0; margin-bottom:1.5rem; text-align:center; text-shadow:1px 1px 2px rgba(0,0,0,0.3)}h3 { font-size:1.4rem; color:#f0f0f0; margin-bottom:1rem; border-left:3px solid #D9131D; padding-left:1rem}.system-item { margin-bottom:2rem; padding:1.5rem; background:rgba(22,33,62,0.2); border-radius:10px; border-left:2px solid rgba(217,19,29,0.5)}.system-item:last-child { margin-bottom:0}.system-content { display:flex; flex-direction:column; gap:1.5rem}.system-screenshot { max-width:100%; height:auto; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.3); border:2px solid rgba(255,255,255,0.08); transition:all 0.3s ease}.system-screenshot:hover { transform:scale(1.02); box-shadow:0 6px 20px rgba(0,0,0,0.4); border-color:rgba(255,255,255,0.15)}.links-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:2rem}.link-button { display:flex; align-items:center; padding:1.5rem; background:linear-gradient(45deg,#1a1a2e,#16213e); color:#ffffff; text-decoration:none; border-radius:15px; border:2px solid #D9131D; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.3)}.link-button:hover { background:linear-gradient(45deg,#D9131D,#E02A2A); transform:translateY(-3px); box-shadow:0 8px 25px rgba(217,19,29,0.4)}.link-icon { font-size:1.5rem; margin-right:1rem; min-width:2rem}.link-button.steam:hover { background:linear-gradient(45deg,#1b2838,#2a475e); border-color:#66c0f4}.link-button.twitter:hover { background:linear-gradient(45deg,#1da1f2,#0d8bd9); border-color:#1da1f2}.link-button.cien:hover { background:linear-gradient(45deg,#ff6b6b,#ff5252); border-color:#ff6b6b}.link-button.presskit:hover { background:linear-gradient(45deg,#9c27b0,#7b1fa2); border-color:#9c27b0}.specs-section { background:rgba(26,26,46,0.3); padding:2rem; margin-bottom:2rem; border-radius:10px; border:1px solid rgba(217,19,29,0.5)}.specs-content { max-width:800px; margin:0 auto}.specs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem}.spec-item { display:flex; justify-content:space-between; align-items:center; padding:1rem; background:rgba(22,33,62,0.2); border-radius:8px; border:1px solid rgba(217,19,29,0.5); transition:all 0.3s ease}.spec-item:hover { transform:translateY(-2px); box-shadow:0 4px 15px rgba(217,19,29,0.2); border-color:#D9131D}.spec-label { color:#e0e0e0; font-weight:500; font-size:1rem}.spec-value { color:#D9131D; font-weight:bold; font-size:1rem}.spec-value-tbd { color:#888888; font-weight:normal}.links-section { background:rgba(26,26,46,0.3); padding:2rem; margin-bottom:2rem; border-radius:10px; border:1px solid rgba(217,19,29,0.5)}.links-cta-grid { display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap}.video-section { margin-bottom:3rem; padding:2rem; background:rgba(26,26,46,0.3); border-radius:15px; border:1px solid rgba(217,19,29,0.4)}.video-container { position:relative; width:100%; max-width:800px; margin:2rem auto 0; aspect-ratio:16/9}.youtube-video { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:10px; box-shadow:0 8px 25px rgba(0,0,0,0.4)}.gallery-section { margin-bottom:3rem; padding:2rem; background:rgba(26,26,46,0.3); border-radius:15px; border:1px solid rgba(217,19,29,0.4)}.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; margin-top:2rem}.gallery-item { width:100%; height:auto; border-radius:10px; box-shadow:0 4px 15px rgba(0,0,0,0.3); border:2px solid rgba(255,255,255,0.08); transition:all 0.3s ease; cursor:pointer}.gallery-item:hover { transform:scale(1.05); box-shadow:0 8px 25px rgba(0,0,0,0.4); border-color:rgba(255,255,255,0.15)}.steam-capsule { width:100%; max-width:200px; height:auto; border-radius:8px; margin-bottom:1rem}.link-text { display:flex; align-items:center; flex-direction:column; gap:0.5rem}.steam-link { display:inline-block; background:linear-gradient(45deg,#1a1a2e,#16213e); color:#ffffff; text-decoration:none; padding:15px 30px; border-radius:25px; font-size:1.1rem; font-weight:bold; transition:all 0.3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.3); border:2px solid #D9131D}.steam-link:hover { background:linear-gradient(45deg,#D9131D,#E02A2A); transform:translateY(-2px); box-shadow:0 6px 20px rgba(217,19,29,0.4)}@media (min-width:1920px) { .content { max-width:1400px; margin:0 auto} h1 { font-size:4rem} h2 { font-size:2.5rem; color:#e0e0e0} h3 { font-size:1.8rem; color:#f0f0f0} .subtitle { font-size:1.8rem} .hero-subtitle { font-size:1.8rem; white-space:normal; line-height:1.4} p { font-size:1.4rem; line-height:2} .header-image { max-height:75vh; aspect-ratio:16/9; object-fit:cover} .links-grid { grid-template-columns:repeat(4,1fr); gap:2rem} .gallery-grid { grid-template-columns:repeat(4,1fr); gap:2rem} .system-content { flex-direction:row; align-items:center; gap:3rem} .system-screenshot { max-width:500px; flex-shrink:0}}@media (min-width:1200px) and (max-width:1919px) { .content { max-width:1200px; margin:0 auto} h1 { font-size:3.5rem} h2 { font-size:2.2rem; color:#e0e0e0} h3 { font-size:1.6rem; color:#f0f0f0} .subtitle { font-size:1.6rem} .hero-subtitle { font-size:1.6rem; white-space:normal; line-height:1.4} p { font-size:1.3rem} .header-image { max-height:70vh; aspect-ratio:16/9; object-fit:cover} .links-grid { grid-template-columns:repeat(4,1fr); gap:1.5rem} .gallery-grid { grid-template-columns:repeat(4,1fr); gap:1.5rem} .system-content { flex-direction:row; align-items:center; gap:2.5rem} .system-screenshot { max-width:400px; flex-shrink:0}}@media (min-width:768px) and (max-width:1199px) { .content { max-width:900px; margin:0 auto; padding:1.5rem} h1 { font-size:3rem} h2 { font-size:2rem; color:#e0e0e0} h3 { font-size:1.4rem; color:#f0f0f0} .subtitle { font-size:1.4rem} .hero-subtitle { font-size:1.4rem; white-space:normal; line-height:1.4} p { font-size:1.2rem} .header-image { max-height:65vh; aspect-ratio:16/9; object-fit:cover} .links-grid { grid-template-columns:repeat(2,1fr); gap:1.5rem} .gallery-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem} .system-content { flex-direction:column; gap:1.5rem} .system-screenshot { max-width:100%} section { padding:2rem; margin-bottom:2.5rem}}@media (min-width:600px) and (max-width:767px) { .hero-subtitle { font-size:1.1rem; white-space:normal; line-height:1.4}}@media (min-width:480px) and (max-width:599px) { .content { padding:1rem} .social-share-fixed { bottom:10px; right:10px; gap:8px} .share-fixed-button { width:45px; height:45px} .share-fixed-icon { width:20px; height:20px; font-size:18px} .section-divider { margin:3rem 0} .divider-icon { font-size:1.5rem; padding:0.3rem} .section-title { font-size:2rem; flex-direction:column; gap:0.5rem} h1 { font-size:2.5rem} h2 { font-size:1.8rem; color:#e0e0e0} h3 { font-size:1.3rem; color:#f0f0f0} .subtitle { font-size:1.3rem} .hero-subtitle { font-size:1rem; white-space:normal; line-height:1.4} .hero-description { margin-bottom:1.5rem} .hero-stats { margin:1.5rem 0} .hero-cta { margin:1.5rem 0 2rem} p { font-size:1.1rem} .header-image { max-height:60vh; aspect-ratio:16/9; object-fit:cover} .links-grid { grid-template-columns:1fr; gap:1rem} .gallery-grid { grid-template-columns:repeat(2,1fr); gap:1rem} .system-content { flex-direction:column; gap:1rem} .system-screenshot { max-width:100%} section { padding:1.5rem; margin-bottom:2rem} .system-item { padding:1.2rem; margin-bottom:1.5rem} .link-button { padding:1.2rem; font-size:1rem} .steam-capsule { max-width:180px}}@media (min-width:550px) and (max-width:599px) { .hero-subtitle { font-size:0.95rem; white-space:normal; line-height:1.4}}@media (max-width:549px) { .content { padding:0.8rem} .social-share-fixed { bottom:15px; right:15px; gap:6px} .share-fixed-button { width:40px; height:40px} .share-fixed-icon { width:18px; height:18px; font-size:16px} .hero-title { font-size:2.5rem} .hero-title::after { bottom:-6px; height:2px} .hero-subtitle { font-size:1rem; white-space:normal; line-height:1.4} .developer-avatar { width:40px; height:40px} .hero-description { font-size:0.9rem; margin-bottom:1.5rem} .hero-stats { gap:1rem; margin:1.5rem 0} .stat-item { min-width:100px; padding:0.8rem} .stat-number { font-size:1.4rem} .stat-label { font-size:0.8rem} .hero-cta { margin:1.5rem 0 2rem} .cta-button.primary-cta { padding:1.5rem 1.5rem; font-size:1.1rem; min-height:75px} .cta-icon-img { width:36px; height:36px; margin-right:0.8rem} .cta-main { white-space:nowrap; font-size:1.05rem} .cta-sub { font-size:0.85rem} .social-links { gap:0.8rem; max-width:320px} .social-link { padding:1rem 1.2rem 1rem 2rem; font-size:0.8rem; min-width:250px; height:52px} .section-divider { margin:2rem 0} .divider-icon { font-size:1.2rem; padding:0.2rem} .section-title { font-size:1.8rem; flex-direction:column; gap:0.3rem} .story-intro,.story-turning-point { padding:1rem; margin-bottom:1.5rem} .story-image { margin-bottom:1.5rem} .story-theme blockquote { padding:1.5rem} .story-theme blockquote p { font-size:1.1rem} .developer-info { flex-direction:column; text-align:center; gap:1rem; margin-bottom:1.5rem} .avatar-image { width:100px; height:100px} .developer-details h3 { font-size:1.5rem} .developer-stats { justify-content:center; gap:1rem} .developer-stats .stat { min-width:70px; padding:0.8rem} .highlights-grid { grid-template-columns:1fr; gap:1rem} .highlight-item { padding:1.5rem 1rem} .cta-title { font-size:2rem} .cta-description { font-size:1.1rem} .cta-buttons { flex-direction:column; gap:1rem} .large-cta { padding:1.2rem 2rem; font-size:1.1rem} h1 { font-size:2rem} h2 { font-size:1.5rem; color:#e0e0e0} h3 { font-size:1.2rem; color:#f0f0f0} .subtitle { font-size:1.2rem} p { font-size:1rem; line-height:1.6} .header-image { max-height:55vh; aspect-ratio:16/9; object-fit:cover} .links-grid { grid-template-columns:1fr; gap:0.8rem} .gallery-grid { grid-template-columns:1fr; gap:0.8rem} .system-content { flex-direction:column; gap:0.8rem} .system-screenshot { max-width:100%} section { padding:1rem; margin-bottom:1.5rem} .system-item { padding:1rem; margin-bottom:1rem} .link-button { padding:1rem; font-size:0.9rem} .steam-capsule { max-width:150px} .link-text { font-size:0.8rem} .language-tabs { margin:0.5rem 0 1rem 0; gap:0.3rem} .tab-button { padding:8px 12px; font-size:0.8rem} .steam-link { padding:10px 20px; font-size:0.9rem}}.clickable-image { cursor:pointer; transition:all 0.3s ease; position:relative; overflow:hidden}.clickable-image::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent); transition:left 0.5s ease; z-index:1}.clickable-image:hover::before { left:100%}.clickable-image:hover { opacity:0.9; transform:scale(1.02); box-shadow:0 8px 25px rgba(217,19,29,0.3)}.clickable-image:active { transform:scale(0.98)}.cta-button,.tab-button,.link-button { position:relative; overflow:hidden}.cta-button::before,.tab-button::before,.link-button::before { content:''; position:absolute; top:50%; left:50%; width:0; height:0; background:rgba(255,255,255,0.2); border-radius:50%; transform:translate(-50%,-50%); transition:width 0.6s ease,height 0.6s ease; z-index:0}.cta-button:active::before,.tab-button:active::before,.link-button:active::before { width:300px; height:300px}.feature-card,.system-item { position:relative; overflow:hidden}.feature-card::after,.system-item::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(45deg,transparent,rgba(217,19,29,0.1),transparent); transform:translateX(-100%); transition:transform 0.6s ease; z-index:1}.feature-card:hover::after,.system-item:hover::after { transform:translateX(100%)}h2,h3 { position:relative}h2::after,h3::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:linear-gradient(90deg,#D9131D,#E02A2A); transition:width 0.3s ease}h2:hover::after,h3:hover::after { width:100%}.gallery-item { position:relative; overflow:hidden}.gallery-item::before { content:'🔍'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); font-size:2rem; color:#D9131D; background:rgba(0,0,0,0.7); width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 0.3s ease; z-index:2}.gallery-item:hover::before { transform:translate(-50%,-50%) scale(1)}@keyframes pulse { 0% { transform:scale(1)} 50% { transform:scale(1.05)} 100% { transform:scale(1)}}.cta-button.loading { animation:pulse 1.5s infinite}@keyframes success { 0% { transform:scale(1)} 50% { transform:scale(1.1)} 100% { transform:scale(1)}}.cta-button.success { animation:success 0.6s ease; background:linear-gradient(45deg,#28a745,#20c997)}.fade-in { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease,transform 0.6s ease}.fade-in.visible { opacity:1; transform:translateY(0)}.feature-card:hover { background:linear-gradient(135deg,rgba(22,33,62,0.6),rgba(217,19,29,0.1)); border-color:#D9131D}.link-button:hover { background:linear-gradient(45deg,#D9131D,#E02A2A); transform:translateY(-3px); box-shadow:0 8px 25px rgba(217,19,29,0.4)}.cta-button:focus,.tab-button:focus,.link-button:focus { outline:none; box-shadow:0 0 0 3px rgba(217,19,29,0.3)}::selection { background:rgba(217,19,29,0.3); color:#ffffff}::-moz-selection { background:rgba(217,19,29,0.3); color:#ffffff}.modal { position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; opacity:0; visibility:hidden; transition:all 0.3s ease}.modal.show { opacity:1; visibility:visible}.modal-content { position:relative; max-width:90%; max-height:90%; background:linear-gradient(135deg,#1a1a2e,#16213e); border-radius:15px; border:2px solid #D9131D; box-shadow:0 20px 60px rgba(0,0,0,0.8); overflow:hidden; transform:scale(0.8); transition:transform 0.3s ease}.modal.show .modal-content { transform:scale(1)}.modal-close { position:absolute; top:15px; right:20px; color:#ffffff; font-size:2rem; font-weight:bold; cursor:pointer; z-index:1001; background:rgba(0,0,0,0.5); width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.3s ease}.modal-close:hover { background:rgba(217,19,29,0.8); transform:scale(1.1)}.modal-image { width:100%; height:auto; max-height:70vh; object-fit:contain; display:block}.modal-caption { padding:1.5rem; background:rgba(22,33,62,0.9); border-top:1px solid rgba(217,19,29,0.5)}.modal-caption h3 { color:#D9131D; font-size:1.4rem; margin-bottom:0.8rem; font-weight:bold}.modal-caption p { color:#e0e0e0; font-size:1rem; line-height:1.6; margin:0}.modal-navigation { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; pointer-events:none}.modal-nav { background:rgba(217,19,29,0.8); color:#ffffff; border:none; width:50px; height:50px; border-radius:50%; font-size:1.5rem; cursor:pointer; pointer-events:all; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; margin:0 20px}.modal-nav:hover { background:rgba(217,19,29,1); transform:scale(1.1)}.modal-nav:disabled { opacity:0.3; cursor:not-allowed; transform:none}@media (max-width:768px) { .modal-content { max-width:95%; max-height:95%; margin:10px} .modal-image { max-height:60vh} .modal-caption { padding:1rem} .modal-caption h3 { font-size:1.2rem} .modal-caption p { font-size:0.9rem} .modal-nav { width:40px; height:40px; font-size:1.2rem; margin:0 10px} .modal-close { top:10px; right:15px; width:35px; height:35px; font-size:1.5rem}}@media (max-width:480px) { .modal-content { max-width:98%; max-height:98%} .modal-image { max-height:50vh} .modal-caption { padding:0.8rem} .modal-caption h3 { font-size:1.1rem} .modal-caption p { font-size:0.8rem} .hero-title::after { bottom:-4px; height:2px} .modal-nav { width:35px; height:35px; font-size:1rem; margin:0 5px}}@media (hover:none) and (pointer:coarse) { .tab-button,.link-button,.gallery-item,.system-screenshot { min-height:44px; min-width:44px} .tab-button { padding:12px 20px} .link-button { padding:16px 20px} .gallery-item:hover,.system-screenshot:hover { transform:none} .gallery-item:active,.system-screenshot:active { transform:scale(0.98)} .video-container { max-width:100%; margin:1rem auto 0} .youtube-video { border-radius:8px} .hero-cta { flex-direction:column; gap:1rem} .cta-button { width:100%; justify-content:center} .features-grid { grid-template-columns:1fr} .cta-benefits { flex-direction:column; gap:1rem} .benefit-item { min-width:auto; width:100%} .final-cta-buttons { flex-direction:column; gap:1rem} .cta-button.large { width:100%; padding:1rem 1.5rem; font-size:1rem} .cta-button.large .cta-main { white-space:nowrap; font-size:0.95rem} .cta-button.large .cta-sub { font-size:0.8rem} .share-fixed-button:hover { transform:none} .share-fixed-button:active { transform:scale(0.95)}}