/* Reset and Base Styles */
* {
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html {
 scroll-behavior:smooth;
}

body {
 font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
 line-height:1.6;
 color:#333;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 min-height:100vh;
}

.container {
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
}

/* Header Styles */
.header {
 background:rgba(255,255,255,0.95);
 backdrop-filter:blur(10px);
 position:fixed;
 top:0;
 width:100%;
 z-index:1000;
 box-shadow:0 2px 20px rgba(0,0,0,0.1);
 transition:all 0.3s ease;
}

.navbar {
 padding:1rem 0;
}

.nav-container {
 max-width:1200px;
 margin:0 auto;
 padding:0 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.nav-logo {
 display:flex;
 align-items:center;
 gap:10px;
}

.logo-img {
 width:40px;
 height:40px;
 border-radius:8px;
}

.logo-text {
 font-size:1.5rem;
 font-weight:bold;
 color:#667eea;
}

.nav-menu {
 display:flex;
 list-style:none;
 gap:2rem;
}

.nav-link {
 text-decoration:none;
 color:#333;
 font-weight:500;
 transition:color 0.3s ease;
 position:relative;
}

.nav-link:hover {
 color:#667eea;
}

.nav-link::after {
 content:'';
 position:absolute;
 bottom:-5px;
 left:0;
 width:0;
 height:2px;
 background:#667eea;
 transition:width 0.3s ease;
}

.nav-link:hover::after {
 width:100%;
}

.hamburger {
 display:none;
 flex-direction:column;
 cursor:pointer;
}

.bar {
 width:25px;
 height:3px;
 background:#333;
 margin:3px 0;
 transition:0.3s;
}

/* Main Content */
.main-content {
 margin-top:80px;
}

/* Hero Section */
.hero {
 padding:4rem 0;
 text-align:center;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 color:white;
 position:relative;
 overflow:hidden;
}

.hero::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
 opacity:0.3;
}

.hero-content {
 position:relative;
 z-index:2;
 max-width:800px;
 margin:0 auto;
 padding:0 20px;
}

.hero-title {
 font-size:3.5rem;
 font-weight:bold;
 margin-bottom:1rem;
 text-shadow:2px 2px 4px rgba(0,0,0,0.3);
 animation:fadeInUp 1s ease;
}

.hero-description {
 font-size:1.2rem;
 margin-bottom:2rem;
 opacity:0.9;
 animation:fadeInUp 1s ease 0.2s both;
}

.cta-buttons {
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
 animation:fadeInUp 1s ease 0.4s both;
}

.btn {
 padding:1rem 2rem;
 border:none;
 border-radius:50px;
 font-size:1.1rem;
 font-weight:600;
 cursor:pointer;
 transition:all 0.3s ease;
 text-decoration:none;
 display:inline-block;
 position:relative;
 overflow:hidden;
}

.btn-primary {
 background:linear-gradient(45deg,#ff6b6b,#ee5a24);
 color:white;
 box-shadow:0 4px 15px rgba(255,107,107,0.4);
}

.btn-primary:hover {
 transform:translateY(-2px);
 box-shadow:0 6px 20px rgba(255,107,107,0.6);
}

.btn-secondary {
 background:rgba(255,255,255,0.2);
 color:white;
 border:2px solid rgba(255,255,255,0.3);
 backdrop-filter:blur(10px);
}

.btn-secondary:hover {
 background:rgba(255,255,255,0.3);
 transform:translateY(-2px);
}

/* Game Section - Primary Element */
.game-section {
 padding:3rem 0 2rem 0;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 color:white;
 position:relative;
 overflow:hidden;
}

.game-section::before {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="1" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="1" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
 opacity:0.3;
}

.game-header {
 text-align:center;
 margin-bottom:2rem;
 position:relative;
 z-index:2;
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
 padding:0 20px;
}

.game-title {
 font-size:3rem;
 font-weight:bold;
 margin-bottom:1rem;
 text-shadow:2px 2px 4px rgba(0,0,0,0.3);
 animation:fadeInUp 1s ease;
}

.game-description {
 font-size:1.2rem;
 margin-bottom:2rem;
 opacity:0.9;
 animation:fadeInUp 1s ease 0.2s both;
}



.game-container {
 max-width:800px;
 margin:0 auto;
 padding:20px;
 position:relative;
 background:white;
 border-radius:20px;
 box-shadow:0 15px 40px rgba(0,0,0,0.2);
 overflow:hidden;
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:700px;
 z-index:2;
 animation:fadeInUp 1s ease 0.6s both;
}

.game-overlay {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:rgba(0,0,0,0.8);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:10;
 backdrop-filter:blur(5px);
 transition:opacity 0.3s ease;
}

.game-overlay-content {
 text-align:center;
 color:white;
 animation:fadeInUp 1s ease 0.8s both;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 gap:1.5rem;
}

.game-logo {
 width:140px;
 height:auto;
 filter:drop-shadow(0 6px 12px rgba(0,0,0,0.4));
 transition:all 0.3s ease;
}

.game-play-btn {
 font-size:1.3rem;
 padding:18px 36px;
 border-radius:50px;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 border:none;
 color:white;
 font-weight:bold;
 cursor:pointer;
 transition:all 0.3s ease;
 box-shadow:0 10px 25px rgba(102,126,234,0.5);
 position:relative;
 overflow:hidden;
 min-width:200px;
 min-height:60px;
 display:flex;
 align-items:center;
 justify-content:center;
}

.game-play-btn:hover {
 transform:translateY(-3px);
 box-shadow:0 15px 30px rgba(102,126,234,0.7);
}

.game-play-btn:active {
 transform:translateY(-1px);
}

/* Loading Bar Styles */
.loading-bar-container {
 width:100%;
 height:8px;
 background:rgba(255,255,255,0.2);
 border-radius:4px;
 overflow:hidden;
 margin-top:10px;
 opacity:0;
 transition:opacity 0.3s ease;
}

.loading-bar-container.active {
 opacity:1;
}

.loading-bar-fill {
 height:100%;
 background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);
 border-radius:4px;
 width:0%;
 transition:width 0.1s ease;
 position:relative;
}

.loading-bar-fill::after {
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.3) 50%,transparent 100%);
 animation:shimmer 1.5s infinite;
}

@keyframes shimmer {
 0% {transform:translateX(-100%);}
 100% {transform:translateX(100%);}
}

.loading-text {
 font-size:0.9rem;
 margin-top:8px;
 opacity:0.8;
 transition:opacity 0.3s ease;
}

/* Secondary Hero Section */
.hero-secondary {
 padding:3rem 0;
 background:#f8f9fa;
 text-align:center;
}

.hero-secondary .hero-content {
 max-width:800px;
 margin:0 auto;
 padding:0 20px;
}

.hero-subtitle {
 font-size:2.5rem;
 font-weight:bold;
 margin-bottom:1rem;
 color:#333;
 animation:fadeInUp 1s ease;
}

.hero-secondary .hero-description {
 font-size:1.1rem;
 color:#666;
 line-height:1.6;
 animation:fadeInUp 1s ease 0.2s both;
}

.loading-screen {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
 display:flex;
 align-items:center;
 justify-content:center;
 z-index:10;
 transition:opacity 0.5s ease;
}

.loading-content {
 text-align:center;
 color:white;
}

.loading-logo {
 width:80px;
 height:80px;
 margin-bottom:2rem;
 animation:pulse 2s infinite;
}

.progress-container {
 width:300px;
}

.progress-bar {
 width:100%;
 height:8px;
 background:rgba(255,255,255,0.3);
 border-radius:4px;
 overflow:hidden;
 margin-bottom:1rem;
}

.progress-fill {
 height:100%;
 background:linear-gradient(90deg,#ff6b6b,#ee5a24);
 width:0%;
 transition:width 0.3s ease;
 border-radius:4px;
}

.loading-text {
 font-size:1.1rem;
 opacity:0.9;
}

.unity-container {
 width:100%;
 max-width:350px;/* Smaller width for better fit */
 margin:20px auto;
 background:#000;
 border-radius:20px;
 position:relative;
 /* Force vertical 9:16 aspect ratio */
 aspect-ratio:9 / 16 !important;
 min-height:400px;
 height:622px;/* 350px * 16/9 = 622px for vertical */
 max-height:622px;
 display:flex;
 align-items:center;
 justify-content:center;
 flex-direction:column;
}

#gameContainer {
 width:100%;
 height:100%;
 border-radius:20px;
 overflow:hidden;
 position:relative;
}

#gameContainer {
 width:100% !important;
 height:100% !important;
 max-width:350px !important;
 max-height:622px !important;
 aspect-ratio:9 / 16 !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
}

#gameContainer canvas {
 display:block !important;
 margin:0 auto;
 background:#000;
 border-radius:20px;
 /* Prevent context menu for better UX */
 -webkit-touch-callout:none;
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:none;
 -ms-user-select:none;
 user-select:none;
 /* Force vertical canvas sizing */
 width:100% !important;
 height:100% !important;
 max-width:350px !important;
 max-height:622px !important;
 object-fit:contain !important;
 /* Force vertical orientation */
 aspect-ratio:9 / 16 !important;
}

/* Game scaling optimizations */
.game-container.fullscreen {
 position:fixed;
 top:0;
 left:0;
 width:100vw;
 height:100vh;
 z-index:9999;
 border-radius:0;
 max-width:none;
}

.game-container.fullscreen .unity-container {
 width:100%;
 height:100%;
 max-height:none;
 border-radius:0;
}

/* Landscape orientation optimization for mobile */
@media screen and (orientation:landscape) and (max-height:600px) {
 .unity-container {
 aspect-ratio:16 / 9;
 max-height:90vh;
 min-height:300px;
}
 
 .game-section {
 padding:1rem 0;
}
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi) {
 #gameContainer canvas {
 image-rendering:-webkit-optimize-contrast;
 image-rendering:crisp-edges;
}
}

/* About Section */
.about-section {
 padding:4rem 0;
 background:white;
}

.section-title {
 font-size:2.5rem;
 text-align:center;
 margin-bottom:3rem;
 color:#333;
 position:relative;
}

.section-title::after {
 content:'';
 position:absolute;
 bottom:-10px;
 left:50%;
 transform:translateX(-50%);
 width:60px;
 height:4px;
 background:linear-gradient(90deg,#667eea,#764ba2);
 border-radius:2px;
}

.about-content {
 display:grid;
 grid-template-columns:2fr 1fr;
 gap:3rem;
 align-items:center;
}

.about-text p {
 font-size:1.1rem;
 margin-bottom:1.5rem;
 color:#666;
 line-height:1.8;
}

.about-img {
 width:100%;
 max-width:300px;
 border-radius:15px;
 box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* Features Section */
.features-section {
 padding:4rem 0;
 background:#f8f9fa;
}

.features-grid {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:2rem;
 margin-top:3rem;
}

.feature-card {
 background:white;
 padding:2rem;
 border-radius:15px;
 text-align:center;
 box-shadow:0 5px 20px rgba(0,0,0,0.1);
 transition:transform 0.3s ease,box-shadow 0.3s ease;
}

.feature-card:hover {
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.feature-icon {
 font-size:3rem;
 margin-bottom:1rem;
}

.feature-title {
 font-size:1.3rem;
 margin-bottom:1rem;
 color:#333;
}

.feature-description {
 color:#666;
 line-height:1.6;
}

/* How to Play Section */
.how-to-play-section {
 padding:4rem 0;
 background:white;
}

.steps-container {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
 gap:2rem;
 margin-top:3rem;
}

.step {
 display:flex;
 align-items:flex-start;
 gap:1.5rem;
 padding:2rem;
 background:#f8f9fa;
 border-radius:15px;
 transition:transform 0.3s ease;
}

.step:hover {
 transform:translateY(-3px);
}

.step-number {
 background:linear-gradient(135deg,#667eea,#764ba2);
 color:white;
 width:50px;
 height:50px;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.2rem;
 font-weight:bold;
 flex-shrink:0;
}

.step-content h3 {
 margin-bottom:0.5rem;
 color:#333;
}

.step-content p {
 color:#666;
 line-height:1.6;
}

/* Footer */
.footer {
 background:#2c3e50;
 color:white;
 padding:3rem 0 1rem;
}

.footer-content {
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 gap:2rem;
 margin-bottom:2rem;
}

.footer-section h3,
.footer-section h4 {
 margin-bottom:1rem;
 color:#ecf0f1;
}

.footer-section p {
 color:#bdc3c7;
 line-height:1.6;
}

.footer-links {
 list-style:none;
}

.footer-links li {
 margin-bottom:0.5rem;
}

.footer-links a {
 color:#bdc3c7;
 text-decoration:none;
 transition:color 0.3s ease;
}

.footer-links a:hover {
 color:#667eea;
}

.footer-bottom {
 border-top:1px solid #34495e;
 padding-top:1rem;
 text-align:center;
 color:#95a5a6;
 font-size:0.9rem;
}

/* Animations */
@keyframes fadeInUp {
 from {
 opacity:0;
 transform:translateY(30px);
}
 to {
 opacity:1;
 transform:translateY(0);
}
}

@keyframes pulse {
 0%,100% {
 transform:scale(1);
}
 50% {
 transform:scale(1.05);
}
}

/* Responsive Design */
@media (max-width:768px) {
 .hamburger {
 display:flex;
}

 .nav-menu {
 position:fixed;
 left:-100%;
 top:70px;
 flex-direction:column;
 background-color:white;
 width:100%;
 text-align:center;
 transition:0.3s;
 box-shadow:0 10px 27px rgba(0,0,0,0.05);
 padding:2rem 0;
}

 .nav-menu.active {
 left:0;
}

 .nav-menu li {
 margin:1rem 0;
}

 .hero-title {
 font-size:2.5rem;
}

 .hero-description {
 font-size:1rem;
}

 .cta-buttons {
 flex-direction:column;
 align-items:center;
}

 .btn {
 width:100%;
 max-width:300px;
}

 .about-content {
 grid-template-columns:1fr;
 text-align:center;
}

 .unity-container {
 /* Force 9:16 portrait aspect ratio on tablets */
 aspect-ratio:9 / 16 !important;
 min-height:350px;
 height:533px !important;/* 300px * 16/9 = 533px */
 max-height:533px;
 max-width:300px !important;
 width:300px !important;
 margin:20px auto;
}

 .section-title {
 font-size:2rem;
}

 .features-grid {
 grid-template-columns:1fr;
}

 .steps-container {
 grid-template-columns:1fr;
}

 .step {
 flex-direction:column;
 text-align:center;
}
}

@media (max-width:480px) {
 .hero-title {
 font-size:2rem;
}

 .unity-container {
 /* Force 9:16 portrait aspect ratio on mobile */
 aspect-ratio:9 / 16 !important;
 min-height:300px;
 height:400px !important;/* 225px * 16/9 = 400px */
 max-height:400px;
 max-width:225px !important;
 width:225px !important;
 margin:20px auto;
}

 .container {
 padding:0 15px;
}

 .game-container {
 padding:0 15px;
}
}

/* Loading States */
.loading {
 opacity:0.7;
 pointer-events:none;
}

.loaded .loading-screen {
 opacity:0;
 pointer-events:none;
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
 * {
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
}
}

/* Focus styles for accessibility */
.btn:focus,
.nav-link:focus {
 outline:2px solid #667eea;
 outline-offset:2px;
}

/* High contrast mode support */
@media (prefers-contrast:high) {
 .hero {
 background:#000;
 color:#fff;
}
 
 .btn-primary {
 background:#000;
 border:2px solid #fff;
}
}