* {
box-sizing:border-box;
margin:0;
padding:0;
max-width:100%
}

html {
width:100%;
overflow-x:hidden;
scroll-behavior:smooth
}

body {
font-family:"myriad-pro", sans-serif;
line-height:1.6;
color:#2c3e50;
background:#c8e6c9
}

.gameIntro_container {
position:relative;
width:100vw;
min-height:100vh;
background-image:url('background.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
overflow:hidden
}

.gameIntro_header {
position:relative;
text-align:center;
z-index:10;
padding:40px 20px 60px
}

.gameIntro_logo {
max-width:180px;
height:auto;
filter:drop-shadow(0 4px 8px rgba(0,0,0,0.1));
margin-bottom:10px
}

.gameIntro_title {
font-size:3.2rem;
font-weight:800;
color:#2e7d32;
text-shadow:2px 2px 4px rgba(0,0,0,0.1);
letter-spacing:-0.02em;
margin-bottom:15px
}

.gameIntro_subtitle {
font-size:1.4rem;
font-weight:600;
color:#388e3c;
margin-bottom:30px
}

.gameIntro_content {
position:relative;
max-width:1400px;
z-index:10;
margin:0 auto;
padding:0 20px
}

.gameIntro_mainSection {
display:grid;
grid-template-columns:1fr 400px;
gap:60px;
align-items:start;
margin-bottom:80px
}

.gameIntro_description,
.gameIntro_productCard,
.gameIntro_ruleCard,
.gameIntro_scores,
.gameIntro_emailForm {
background:rgba(255,255,255,0.55);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
backdrop-filter:blur(5px)
}

.gameIntro_description { padding:40px }

.gameIntro_productCard h2 {
font-size:2.0rem;
font-weight:700;
color:#2e7d32;
margin-bottom:15px
}

.gameIntro_description h1 {
font-size:2.2rem;
font-weight:700;
color:#2e7d32;
margin-bottom:25px
}

.gameIntro_description p {
font-size:1.1rem;
line-height:1.8;
color:#37474f;
margin-bottom:20px
}

.gameIntro_productCard {
text-align:center;
padding:30px
}

.gameIntro_productImage {
width:100%;
max-width:300px;
height:auto
}

.gameIntro_productCard h3 {
font-size:1.6rem;
font-weight:700;
color:#2e7d32;
margin-bottom:15px
}

.gameIntro_productCard p {
font-size:1rem;
line-height:1.6;
color:#555
}

.gameIntro_rules { margin-bottom:80px }

.gameIntro_rules h2 {
font-size:2.5rem;
font-weight:700;
text-align:center;
color:#2e7d32;
background:rgba(255,255,255,0.55);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
backdrop-filter:blur(5px);
transition:transform 0.3s ease;
margin:0 0 35px 0;
padding:35px
}

.gameIntro_rulesGrid {
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:40px
}

.gameIntro_ruleCard {
text-align:center;
transition:transform 0.3s ease;
padding:35px
}

.gameIntro_ruleCard:hover { transform:translateY(-5px) }

.gameIntro_ruleIcon {
width:240px;
height:240px;
border-radius:15px;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
margin:0 auto 25px
}

.gameIntro_ruleCard h3 {
font-size:1.5rem;
font-weight:600;
color:#2e7d32;
margin-bottom:15px
}

.gameIntro_ruleCard p {
font-size:1rem;
line-height:1.6;
color:#555
}

.gameIntro_scores {
display:block;
width:50%;
margin:0 auto 80px;
padding:20px
}

.gameIntro_scores h2 {
font-size:2.2rem;
font-weight:700;
text-align:center;
color:#2e7d32;
margin-bottom:30px
}

.gameIntro_scoresList {
display:flex;
flex-direction:column;
gap:8px;
max-height:400px;
overflow-y:auto;
padding:15px
}

.gameIntro_scoreItem {
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border:1px solid #e9ecef;
border-radius:8px;
font-size:1.1rem;
font-weight:600;
transition:all 0.2s ease;
padding:12px 20px
}

.gameIntro_scoreItem:hover {
background:#f1f3f4;
border-color:#d0d7de;
transform:translateX(2px)
}

.gameIntro_scoreItem:nth-child(1) {
background:linear-gradient(45deg, #ffd700, #ffed4e);
border-color:#ffc107;
color:#b8860b
}

.gameIntro_scoreItem:nth-child(2) {
background:linear-gradient(45deg, #e8e8e8, #f5f5f5);
border-color:#c0c0c0;
color:#666
}

.gameIntro_scoreItem:nth-child(3) {
background:linear-gradient(45deg, #cd7f32, #daa520);
border-color:#b8860b;
color:#8b4513
}

.gameIntro_scoreName {
font-weight:700;
font-family:monospace;
font-size:1.2rem;
color:#2e7d32;
letter-spacing:1px
}

.gameIntro_scoreValue {
font-weight:700;
color:#ff6b35;
font-size:1.1rem
}

.gameIntro_emailForm {
display:block;
width:100%;
max-width:800px;
text-align:center;
margin:0 auto 40px;
padding:40px
}

.gameIntro_emailText {
font-size:1rem;
line-height:1.6;
color:#37474f;
margin-bottom:30px
}

.gameIntro_emailText i {
color:#2e7d32;
margin-right:8px
}

.gameIntro_formControls { margin-bottom:30px }

.gameIntro_checkbox {
position:absolute;
opacity:0;
width:0;
height:0
}

.gameIntro_checkboxWrapper {
position:relative;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px
}

.gameIntro_checkboxLabel {
display:flex;
align-items:center;
position:relative;
cursor:pointer;
gap:10px;
font-size:0.95rem;
font-weight:500;
color:#37474f
}

.gameIntro_checkboxLabel:before {
content:"";
display:block;
width:20px;
height:20px;
background:#fff;
border:2px solid #ddd;
border-radius:4px;
transition:all 0.3s ease;
flex-shrink:0

}

.gameIntro_checkbox:checked + .gameIntro_checkboxLabel:before {
background:#2e7d32;
border-color:#2e7d32
}

.gameIntro_checkboxLabel i {
position:absolute;
font-size:12px;
color:#fff;
opacity:0;
transition:opacity 0.3s ease;
left:5px;
top:50%;
transform:translateY(-50%);
pointer-events:none
}

.gameIntro_checkbox:checked + .gameIntro_checkboxLabel i { opacity:1 }

.gameIntro_emailWrapper {
position:relative;
display:block;
max-width:400px;
margin:0 auto
}

.gameIntro_emailInput {
display:block;
width:100%;
background:#fff;
border:2px solid #e0e0e0;
border-radius:12px;
color:#333;
font-size:1.1rem;
font-family:inherit;
transition:all 0.3s ease;
padding:15px 50px 15px 20px
}

.gameIntro_emailInput:focus {
border-color:#2e7d32;
box-shadow:0 0 0 3px rgba(46,125,50,0.1);
outline:none
}

.gameIntro_emailInput:valid { border-color:#4caf50 }

.gameIntro_emailIcon {
position:absolute;
font-size:18px;
color:#999;
pointer-events:none;
right:15px;
top:50%;
transform:translateY(-50%)
}

.gameIntro_playButton {
display:inline-block;
width:auto;
min-width:280px;
background:linear-gradient(45deg, #ff6b35, #f7931e);
border:none;
border-radius:15px;
color:#fff;
font-size:1.8rem;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
box-shadow:0 8px 25px rgba(255,107,53,0.3);
transition:all 0.3s ease;
padding:20px 40px
}

.gameIntro_playButton:hover:not(:disabled) {
background:linear-gradient(45deg, #f7931e, #ff6b35);
box-shadow:0 12px 35px rgba(255,107,53,0.4);
transform:translateY(-3px)
}

.gameIntro_playButton:active:not(:disabled) { transform:translateY(-1px) }

.gameIntro_playButton:disabled {
background:#ccc;
cursor:not-allowed;
box-shadow:none;
transform:none
}

.gameIntro_playButton i {
margin-right:10px;
vertical-align:middle
}

.error-message {
background-color:#ffebee;
color:#c62828;
padding:12px 15px;
border-radius:6px;
margin-bottom:15px;
border-left:4px solid #c62828;
font-weight:500;
display:flex;
align-items:center;
gap:8px
}

.error-message i { font-size:16px }

.gameIntro_footer {
background:rgba(46,125,50,0.95);
text-align:center;
color:#fff;
backdrop-filter:blur(5px);
padding:50px 20px 30px
}

.gameIntro_footerContent {
max-width:1200px;
margin:0 auto
}

.gameIntro_socialLinks {
display:flex;
justify-content:center;
gap:25px;
margin-bottom:30px
}

.gameIntro_socialLink {
display:inline-flex;
align-items:center;
justify-content:center;
width:50px;
height:50px;
background:rgba(255,255,255,0.1);
border-radius:50%;
text-decoration:none;
color:#fff;
font-size:1.5rem;
transition:all 0.3s ease
}

.gameIntro_socialLink:hover {
background:rgba(255,255,255,0.2);
transform:translateY(-2px)
}

.gameIntro_footerLinks {
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-bottom:25px
}

.gameIntro_footerLinks a {
font-weight:500;
text-decoration:none;
color:#fff;
transition:color 0.3s ease
}

.gameIntro_footerLinks a:hover { color:#a5d6a7 }

.gameIntro_copyright, .gameIntro_copyright a, .gameIntro_copyright a:hover {
font-size:0.9rem;
color:white;
opacity:0.8;
margin-top:20px
}

#silen {
display:block;
position:relative;
max-width:250px;
text-align:center;
font-size:0.65rem;
color:rgba(255, 255, 255, 0.6);
text-decoration:none;
transition:all 0.3s ease;
margin:10px auto 0;
padding:15px 0;
}

#silen:hover { color:rgba(255, 255, 255, 0.9) }

#silen span {
display:block;
margin-bottom:8px;
font-family:inherit;
letter-spacing:0.02em;
}

#silen_logo {
width:50px;
height:auto;
opacity:0.7;
transition:opacity 0.3s ease
}

#silen:hover #silen_logo {
opacity:1;
filter:invert(63%) sepia(94%) saturate(747%) hue-rotate(344deg) brightness(147%) contrast(104%)
}

@media (max-width:768px) {
	.gameIntro_container { background-attachment:fixed }
}

@media (max-width:1024px) {
	.gameIntro_title { font-size:2.8rem }

	.gameIntro_subtitle { font-size:1.3rem }

	.gameIntro_mainSection {
	grid-template-columns:1fr;
	gap:40px
	}

	.gameIntro_description,
	.gameIntro_productCard { padding:30px }

	.gameIntro_rulesGrid {
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:30px
	}

	.gameIntro_ruleIcon {
	width:180px;
	height:180px
	}

	.gameIntro_scores { width:70% }

	.gameIntro_emailForm {
	max-width:600px;
	padding:35px
	}
}

@media (max-width:768px) {
	.gameIntro_header { padding:25px 15px 40px }

	.gameIntro_logo { max-width:140px }

	.gameIntro_title {
	font-size:2.2rem;
	margin-bottom:10px
	}

	.gameIntro_subtitle {
	font-size:1.1rem;
	margin-bottom:25px
	}

	.gameIntro_description,
	.gameIntro_productCard { padding:25px }

	.gameIntro_productCard h2 {
	font-size:1.6rem;
	margin-bottom:15px
	}

	.gameIntro_description h1 {
	font-size:1.8rem;
	margin-bottom:20px
	}

	.gameIntro_description p {
	font-size:1rem;
	margin-bottom:15px
	}

	.gameIntro_productCard h3 {	font-size:1.4rem }

	.gameIntro_rules h2 {
	font-size:2rem;
	padding:25px
	}

	.gameIntro_rulesGrid {
	grid-template-columns:1fr;
	gap:25px
	}

	.gameIntro_ruleCard { padding:25px }

	.gameIntro_ruleCard h3 { font-size:1.3rem }

	.gameIntro_ruleCard p { font-size:0.95rem }

	.gameIntro_ruleIcon {
	width:140px;
	height:140px
	}

	.gameIntro_scores {
	width:85%;
	padding:25px
	}

	.gameIntro_scores h2 {
	font-size:1.8rem;
	margin-bottom:25px
	}

	.gameIntro_scoreItem {
	font-size:1rem;
	padding:10px 15px
	}

	.gameIntro_scoreName { font-size:1.1rem }

	.gameIntro_scoreValue { font-size:1rem }

	.gameIntro_emailForm {
	width:90%;
	padding:30px 25px
	}

	.gameIntro_emailText {
	font-size:0.95rem;
	margin-bottom:25px
	}

	.gameIntro_checkboxLabel { font-size:0.9rem	}

	.gameIntro_emailInput {
	font-size:1rem;
	padding:12px 45px 12px 15px
	}

	.gameIntro_playButton {
	font-size:1.2rem;
	min-width:240px;
	padding:16px 32px
	}

	.gameIntro_footerLinks {
	flex-direction:column;
	gap:15px
	}

	.gameIntro_socialLinks { gap:20px }
}

@media (max-width:480px) {
	.gameIntro_header { padding:20px 10px 30px }

	.gameIntro_logo { max-width:120px }

	.gameIntro_title {
	font-size:1.8rem;
	margin-bottom:8px
	}

	.gameIntro_subtitle {
	font-size:1rem;
	margin-bottom:20px
	}

	.gameIntro_content { padding:0 10px	}

	.gameIntro_description,
	.gameIntro_productCard { padding:20px }

	.gameIntro_productCard h2 {
	font-size:1.3rem;
	margin-bottom:12px
	}

	.gameIntro_description h1 {
	font-size:1.5rem;
	margin-bottom:15px
	}

	.gameIntro_description p {
	font-size:0.9rem;
	line-height:1.6;
	margin-bottom:12px
	}

	.gameIntro_productCard h3 {
	font-size:1.2rem;
	margin-bottom:10px
	}

	.gameIntro_productCard p { font-size:0.9rem	}

	.gameIntro_rules h2 {
	font-size:1.6rem;
	padding:20px
	}

	.gameIntro_ruleCard { padding:20px }

	.gameIntro_ruleCard h3 {
	font-size:1.2rem;
	margin-bottom:10px
	}

	.gameIntro_ruleCard p {
	font-size:0.85rem;
	line-height:1.5
	}

	.gameIntro_ruleIcon {
	width:100px;
	height:100px;
	margin-bottom:15px
	}

	.gameIntro_scores {
	width:95%;
	padding:20px
	}

	.gameIntro_scores h2 {
	font-size:1.5rem;
	margin-bottom:20px
	}

	.gameIntro_scoresList {
	max-height:300px;
	padding:10px
	}

	.gameIntro_scoreItem {
	font-size:0.9rem;
	padding:8px 12px
	}

	.gameIntro_scoreName { font-size:1rem }

	.gameIntro_scoreValue { font-size:0.9rem }

	.gameIntro_emailForm {
	width:95%;
	padding:25px 20px
	}

	.gameIntro_emailText {
	font-size:0.85rem;
	line-height:1.5;
	margin-bottom:20px
	}

	.gameIntro_checkboxLabel {
	font-size:0.8rem;
	text-align:left
	}

	.gameIntro_emailInput {
	font-size:0.9rem;
	padding:10px 40px 10px 12px
	}

	.gameIntro_playButton {
	font-size:1.0rem;
	min-width:200px;
	padding:14px 28px
	}

	.gameIntro_footer { padding:40px 15px 25px }

	.gameIntro_copyright { font-size:0.8rem }
}

@media (max-width:360px) {
	.gameIntro_title { font-size:1.6rem }

	.gameIntro_subtitle { font-size:0.95rem	}

	.gameIntro_description,
	.gameIntro_productCard,
	.gameIntro_ruleCard {
	padding:15px
	}

	.gameIntro_productCard h2 {	font-size:1.1rem }

	.gameIntro_description h1 {	font-size:1.3rem }

	.gameIntro_description p { font-size:0.85rem }

	.gameIntro_rules h2 {
	font-size:1.4rem;
	padding:15px
	}

	.gameIntro_ruleIcon {
	width:80px;
	height:80px
	}

	.gameIntro_emailForm { padding:20px 15px }

	.gameIntro_playButton {
	font-size:0.8rem;
	min-width:180px;
	padding:12px 24px
	}
}
.skipLink {
position:absolute;
z-index:100;
background:#2e7d32;
border-radius:0 0 8px 0;
color:#fff;
text-decoration:none;
top:-100px;
left:0;
transition:top 0.2s ease;
padding:12px 20px
}

.skipLink:focus { top:0 }

.gameIntro_playBox {
display:block;
width:100%;
max-width:800px;
background:rgba(255,255,255,0.55);
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.1);
backdrop-filter:blur(5px);
text-align:center;
margin:0 auto 40px;
padding:40px
}

.gameIntro_playText {
font-size:1rem;
line-height:1.6;
color:#333;
margin-bottom:30px
}

a.gameIntro_playButton { text-decoration:none }

.gameIntro_scoreRank {
min-width:32px;
color:#2e7d32;
text-align:left;
font-size:0.95rem;
font-weight:700;
opacity:0.6
}

.gameIntro_scoresEmpty {
color:#333;
text-align:center;
font-size:1rem;
padding:20px
}

@media (max-width:768px) {
	.gameIntro_playBox { padding:30px 20px }

	.gameIntro_playText { font-size:0.95rem }
}
