:root {
--mainColorA:#2e7d32;
--mainColorB:#1b5e20;
--subColorA:#ffd54f;
--subColorB:#ffb300;
--extraColorA:#ee5a52;
--extraColorB:#c62828
}

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

html, body {
position:relative;
display:block;
height:100vh;
height:100dvh;
background:#000;
font-family:"myriad-pro", sans-serif;
overflow:hidden
}

#gameContainer {
position:relative;
display:block;
width:100vw;
height:100vh;
height:100dvh;
max-width:1920px;
margin:0 auto
}

canvas {
display:block;
width:100%;
height:100%;
image-rendering:pixelated
}

.ui {
position:absolute;
display:block;
width:calc(100% - 32px);
color:#fff;
font-size:18px;
text-shadow:2px 2px 4px rgba(0,0,0,.8);
top:16px;
left:16px;
z-index:10
}

.ui .stat {
display:inline-block;
margin-right:14px
}

.game-controls {
position:absolute;
display:flex;
gap:8px;
top:60px;
left:16px;
z-index:11
}

.control-btn {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:44px;
background:rgba(0,0,0,.7);
color:#fff;
border:none;
border-radius:6px;
font-size:18px;
cursor:pointer;
padding:8px 12px;
transition:background .2s ease
}

.control-btn:hover { background:rgba(0,0,0,.9) }
.control-btn.muted { background:rgba(200,50,50,.8) }

.hearts-container {
position:absolute;
display:flex;
gap:4px;
top:0;
right:0
}

.heart {
width:40px;
height:40px
}

.overlay-backdrop {
position:fixed;
display:block;
width:100vw;
height:100vh;
background:transparent;
top:0;
left:0;
z-index:19;
pointer-events:auto
}

.overlay {
position:absolute;
display:none;
min-width:400px;
max-width:95vw;
max-height:90vh;
background:rgba(0,0,0,.95);
color:#fff;
border-radius:15px;
text-align:center;
overflow-y:auto;
top:50%;
left:50%;
transform:translate(-50%, -50%);
z-index:20;
padding:25px
}

.overlay h2 {
font-size:2rem;
color:#ff6b6b;
margin-bottom:20px
}

.overlay p {
font-size:1.1rem;
margin-bottom:15px
}

.overlay button {
display:inline-block;
background:#ff6b6b;
color:#fff;
border:none;
border-radius:8px;
font-size:1rem;
font-weight:600;
cursor:pointer;
margin:10px 5px 0;
padding:12px 22px;
transition:background .2s ease
}

.overlay button:hover { background:#ff5252 }

.overlay button.secondary {
background:#666;
transition:background .2s ease
}

.overlay button.secondary:hover { background:#777 }

.game-over-layout {
display:flex;
flex-direction:column;
gap:20px;
width:100%
}

.game-over-main {
flex:1;
text-align:center
}

.game-over-scores {
background:rgba(255,255,255,0.05);
border-radius:8px;
padding:15px;
max-height:240px;
overflow-y:auto
}

.game-over-scores h3 {
font-size:1.2rem;
color:#ffdd44;
text-align:center;
margin-bottom:12px
}

.scores-list {
display:flex;
flex-direction:column;
gap:6px;
font-size:0.9rem
}

.score-item {
display:flex;
align-items:center;
justify-content:space-between;
background:rgba(255,255,255,0.08);
border-radius:6px;
padding:8px 12px;
min-height:32px;
transition:background 0.2s ease
}

.score-item:hover { background:rgba(255,255,255,0.12) }

.score-item.podium-1 {
background:linear-gradient(45deg, rgba(255,215,0,0.3), rgba(255,237,78,0.2));
border-left:3px solid #ffd700
}

.score-item.podium-2 {
background:linear-gradient(45deg, rgba(192,192,192,0.3), rgba(245,245,245,0.2));
border-left:3px solid #c0c0c0
}

.score-item.podium-3 {
background:linear-gradient(45deg, rgba(205,127,50,0.3), rgba(218,165,32,0.2));
border-left:3px solid #cd7f32
}

.score-rank {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:24px;
height:24px;
background:rgba(255,255,255,0.1);
border-radius:50%;
font-size:0.8rem;
font-weight:bold;
color:#ccc;
flex-shrink:0
}

.score-name {
font-family:monospace;
font-weight:bold;
color:#fff;
letter-spacing:1px;
flex:1;
text-align:center;
font-size:0.85rem
}

.score-distance {
font-weight:600;
color:#ff6b6b;
font-size:0.85rem;
flex-shrink:0
}

.game-over-scores::-webkit-scrollbar { width:6px }

.game-over-scores::-webkit-scrollbar-track {
background:rgba(255,255,255,0.05);
border-radius:3px
}

.game-over-scores::-webkit-scrollbar-thumb {
background:rgba(255,255,255,0.2);
border-radius:3px;
transition:background 0.3s ease
}

.game-over-scores::-webkit-scrollbar-thumb:hover {
background:rgba(255,255,255,0.35)
}

.game-over-scores {
scrollbar-width:thin;
scrollbar-color:rgba(255,255,255,0.2) rgba(255,255,255,0.05)
}

.score-form { margin:20px 0 }

.score-input-group {
text-align:center;
margin-bottom:20px
}

.score-input-group label {
display:block;
margin-bottom:8px;
color:#fff;
font-weight:500
}

.score-input {
background-color:rgba(255,255,255,0.1);
border:2px solid rgba(255,255,255,0.3);
color:#fff;
padding:12px 16px;
border-radius:8px;
font-size:18px;
font-weight:bold;
text-align:center;
text-transform:uppercase;
letter-spacing:2px;
width:120px;
margin:0 auto;
display:block
}

.score-input:focus {
outline:none;
border-color:#4caf50;
background-color:rgba(255,255,255,0.15)
}

.score-input::placeholder {
color:rgba(255,255,255,0.6);
letter-spacing:1px
}

#playerName {
max-width:80px;
font-size:16px;
letter-spacing:2px;
-webkit-text-size-adjust:100%;
-webkit-appearance:none;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation
}

.buttons-container {
display:flex;
gap:10px;
justify-content:center;
margin-top:20px
}

.instructions {
position:absolute;
display:block;
color:#fff;
text-align:center;
text-shadow:2px 2px 4px rgba(0,0,0,.8);
bottom:16px;
left:50%;
transform:translateX(-50%)
}

.orientation-warning {
position:fixed;
display:none;
width:100vw;
height:100vh;
height:100dvh;
background:rgba(0,0,0,.95);
color:#fff;
font-size:18px;
text-align:center;
justify-content:center;
align-items:center;
flex-direction:column;
top:0;
left:0;
z-index:1000;
pointer-events:auto
}

.rotate-icon {
font-size:48px;
margin:20px
}

.saving-indicator {
position:absolute;
display:block;
background:rgba(0,255,0,.8);
color:#fff;
border-radius:4px;
font-size:.9rem;
opacity:0;
top:10px;
right:10px;
padding:5px 10px;
transition:opacity .3s ease
}

.saving-indicator.show { opacity:1 }

.game-title-overlay {
position:absolute;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
height:100%;
background-image:url('background.jpg');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
top:0;
left:0;
z-index:10;
pointer-events:none
}

.game-title-overlay::before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
z-index:1
}

.game-logo {
position:absolute;
top:20px;
right:20px;
width:150px;
height:auto;
z-index:3;
filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5))
}

.game-title-content {
position:relative;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
z-index:2;
max-width:90%;
padding:40px 20px
}

.game-title-overlay h1 {
font-family:"urbana";
font-size:4.5rem;
font-weight:bold;
margin-bottom:25px;
text-shadow:3px 3px 6px rgba(0,0,0,0.9);
color:var(--subColorA);
letter-spacing:2px;
line-height:1.1
}

.game-description {
font-size:1.5rem;
color:#e0e0e0;
text-shadow:1px 1px 3px rgba(0,0,0,0.8);
line-height:1.4;
margin-bottom:8px;
max-width:600px
}

.game-description.sub {
font-size:1rem;
color:#ccc;
margin-bottom:35px
}

.start-game-button {
background-color:var(--mainColorA);
color:#fff;
border:none;
border-radius:12px;
font-size:1.3rem;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
cursor:pointer;
box-shadow:0 6px 20px rgba(238,90,82,0.4);
transition:all 0.3s ease;
pointer-events:auto;
padding:18px 35px
}

.start-game-button:hover {
transform:translateY(-2px);
box-shadow:0 8px 25px rgba(238,90,82,0.6);
background:linear-gradient(135deg, #ee5a52 0%, #ff6b6b 100%)
}

.start-game-button i {
margin-right:8px;
vertical-align:middle
}

.start-game-button:active {
transform:translateY(0);
box-shadow:0 4px 15px rgba(238,90,82,0.4)
}

.game-logo-corner {
position:absolute;
width:60px;
height:auto;
opacity:0.8;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
bottom:8px;
left:8px;
z-index:15
}

.developer-logo {
position:absolute;
width:150px;
height:auto;
opacity:0.8;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
bottom:8px;
right:8px;
z-index:15
}

@media (max-width:767px) and (orientation:portrait) {
	.orientation-warning { display:flex }

	#gameContainer { display:none }
}

@media (max-width:1024px) {
	.ui { font-size:16px }

	.instructions {
	font-size:14px;
	bottom:10px
	}

	.game-controls { display:flex }
}

@media (max-width:768px) and (orientation:landscape) {
	.game-logo {
	top:15px;
	right:15px;
	width:120px
	}

	.game-title-content {
	padding:25px 15px;
	max-width:95%
	}

	.game-title-overlay h1 { 
	font-size:2.2rem;
	margin-bottom:18px;
	letter-spacing:1px
	}

	.game-description {
	font-size:0.95rem;
	margin-bottom:6px;
	line-height:1.3
	}

	.game-description.sub {
	font-size:0.9rem;
	margin-bottom:25px
	}

	.start-game-button {
	font-size:1.1rem;
	padding:14px 28px
	}

	.game-logo-corner {
	width:32px;
	bottom:6px;
	left:6px
	}
}

@media (max-width:667px) and (orientation:landscape) {
	.overlay {
	min-width:90vw;
	max-width:90vw;
	max-height:85vh;
	padding:15px
	}

	.game-over-layout {
	display:flex;
	flex-direction:row;
	gap:20px;
	align-items:stretch
	}

	.game-over-main {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:center
	}

	.game-over-scores {
	flex:1;
	max-height:none;
	min-width:45%
	}

	.overlay h2 {
	font-size:1.2rem;
	margin-bottom:10px
	}

	.overlay p {
	font-size:0.9rem;
	margin-bottom:10px
	}

	.score-form { margin:15px 0 }

	.buttons-container { 
	margin-top:15px;
	gap:8px
	}

	.overlay button {
	font-size:0.85rem;
	padding:10px 16px
	}

	.game-over-scores h3 {
	font-size:1rem;
	margin-bottom:8px
	}

	.scores-list { font-size:0.75rem }

	.score-item {
	padding:6px 8px;
	min-height:26px
	}

	.score-rank {
	min-width:18px;
	height:18px;
	font-size:0.65rem
	}

	.score-name { font-size:0.7rem }
	.score-distance { font-size:0.7rem }
}

@media (max-width:480px) and (orientation:landscape) {
	.game-logo {
	top:10px;
	right:10px;
	width:100px
	}

	.game-title-content { padding:20px 12px }

	.game-title-overlay h1 { 
	font-size:1.8rem;
	margin-bottom:15px
	}

	.game-description {
	font-size:0.85rem;
	margin-bottom:5px
	}

	.game-description.sub {
	font-size:0.8rem;
	margin-bottom:20px
	}

	.start-game-button {
	font-size:1rem;
	padding:12px 24px
	}

	.game-logo-corner {
	width:24px;
	bottom:4px;
	left:4px
	}

	.overlay h2 { font-size:1.1rem }

	.overlay p { font-size:0.8rem }

	.overlay button {
	font-size:0.75rem;
	padding:8px 12px
	}

	.score-input-group {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-bottom:12px
	}

	.score-input-group label {
	font-size:0.75rem;
	color:#ccc;
	white-space:nowrap;
	margin-bottom:0
	}

	.score-input {
	width:70px;
	height:35px;
	font-size:14px;
	padding:8px 10px;
	letter-spacing:1px
	}
	}

	@media (max-width:480px) and (orientation:landscape) and (max-height:400px) {
	.game-over-layout {
	flex-direction:column;
	gap:10px
	}

	.game-over-scores { max-height:100px }

	.overlay { max-height:90vh }
}

@media (max-height:500px) and (orientation:landscape) {
	.game-logo {
	top:8px;
	right:8px;
	width:80px
	}

	.game-title-content { padding:15px 10px }

	.game-title-overlay h1 {
	font-size:1.5rem;
	margin-bottom:10px
	}

	.game-description {
	font-size:0.8rem;
	margin-bottom:4px
	}

	.game-description.sub {
	font-size:0.75rem;
	margin-bottom:15px
	}

	.start-game-button {
	font-size:0.9rem;
	padding:10px 20px
	}
}

@media (max-width:1440px) and (orientation:landscape) and (max-height:900px) {
	.overlay {
	min-width:70vw;
	max-width:70vw;
	max-height:75vh;
	padding:10px;
	overflow:hidden
	}

	.game-over-layout {
	display:flex;
	flex-direction:row;
	gap:15px;
	align-items:flex-start;
	height:100%
	}

	.game-over-main {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	height:100%
	}

	.game-over-scores {
	flex:1;
	max-height:100%;
	overflow:hidden;
	padding:10px
	}

	.overlay h2 {
	font-size:1.1rem;
	margin-bottom:8px
	}

	.overlay p {
	font-size:0.9rem;
	margin-bottom:8px
	}

	.score-form { 
	margin:8px 0;
	flex-shrink:0
	}

	.score-input-group {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin-bottom:8px
	}

	.score-input-group label {
	font-size:0.8rem;
	color:#ccc;
	white-space:nowrap;
	margin-bottom:0
	}

	.score-input {
	width:70px;
	height:32px;
	font-size:14px;
	padding:6px 8px;
	letter-spacing:1px
	}

	.buttons-container { 
	margin-top:8px;
	gap:8px;
	flex-shrink:0
	}

	.overlay button {
	font-size:0.75rem;
	padding:8px 12px
	}

	.game-over-scores h3 {
	font-size:0.9rem;
	margin-bottom:6px
	}

	.scores-list { 
	font-size:0.7rem;
	gap:3px;
	overflow:hidden
	}

	.score-item {
	padding:4px 6px;
	min-height:20px
	}

	.score-rank {
	min-width:16px;
	height:16px;
	font-size:0.6rem
	}

	.score-name { font-size:0.65rem }
	.score-distance { font-size:0.65rem }
}


@media (max-width:568px) and (orientation:landscape) {
	.overlay {
	min-width:70vw;
	max-height:70vh;
	padding:8px
	}

	.game-over-layout { gap:10px }

	.overlay h2 {
	font-size:1rem;
	margin-bottom:6px
	}

	.overlay p {
	font-size:0.8rem;
	margin-bottom:6px
	}

	.score-form { margin:6px 0 }

	.score-input {
	width:60px;
	height:28px;
	font-size:12px;
	padding:4px 6px
	}

	.score-input-group label { font-size:0.7rem }

	.buttons-container { margin-top:6px }

	.overlay button {
	font-size:0.7rem;
	padding:6px 10px
	}

	.game-over-scores h3 {
	font-size:0.8rem;
	margin-bottom:4px
	}

	.scores-list { font-size:0.6rem }

	.score-item {
	padding:3px 4px;
	min-height:16px
	}

	.score-rank {
	min-width:12px;
	height:12px;
	font-size:0.5rem
	}

	.score-name { font-size:0.55rem }
	.score-distance { font-size:0.55rem }
}

@media (max-width:480px) and (orientation:landscape) and (max-height:320px) {
	.overlay { max-height:80vh }

	.game-over-layout {
	flex-direction:column;
	gap:5px
	}

	.game-over-scores { max-height:60px }

	.scores-list { gap:1px }

	.score-item { min-height:12px }
}

@media (max-width:768px) and (orientation:landscape) {
	.game-controls {
	top:40px;
	left:12px;
	gap:6px
	}

	.control-btn {
	min-width:36px;
	font-size:16px;
	padding:6px 8px
	}

	.developer-logo {
	width:36px;
	bottom:6px;
	right:6px
	}

	.game-logo-corner {
	width:42px;
	bottom:6px;
	left:6px
	}
}

@media (max-width:480px) and (orientation:landscape) {
	.developer-logo {
	width:28px;
	bottom:4px;
	right:4px
	}

	.game-logo-corner {
	width:32px;
	bottom:4px;
	left:4px
	}
}

.developer-logo-ingame {
position:absolute;
width:120px;
height:auto;
opacity:0.8;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
bottom:8px;
right:8px;
z-index:25;
transition:opacity 0.3s ease;
pointer-events:auto !important
}

.game-title-overlay ~ .developer-logo-ingame {
display:none !important
}

.developer-logo-start {
position:absolute;
width:120px;
height:auto;
opacity:0.9;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
bottom:20px;
right:20px;
z-index:5;
transition:opacity 0.3s ease;
pointer-events:auto !important
}

.developer-logo-ingame:hover,
.developer-logo-start:hover {
opacity:1;
transform:scale(1.10)
}

@media (max-width:1024px) {
	.developer-logo-start,
	.developer-logo-ingame {
	width:60px;
	bottom:15px;
	right:15px
	}
}

.game-title-overlay ~ .ui .game-controls { display:none !important }

@media (max-width:1440px) and (orientation:landscape) {
	.developer-logo-start,
	.developer-logo-ingame {
	width:60px;
	bottom:15px;
	right:15px
	}

	.game-controls {
	top:45px;
	left:12px;
	gap:6px
	}
}

@media (max-width:1440px) {
.control-btn {
min-width:36px;
font-size:14px;
padding:6px 8px
}

.game-controls {
gap:6px
}
}

@media (max-width:768px) {
.control-btn {
min-width:32px;
font-size:12px;
padding:5px 7px
}

.game-controls {
gap:5px
}
}

@media (max-width:480px) {
.control-btn {
min-width:28px;
font-size:11px;
padding:4px 6px
}

.game-controls {
gap:4px
}
}