:root {
    --grid-size: 40px;
    --grid-gap: 1px;
    --game-width: calc(13 * var(--grid-size) + 12 * var(--grid-gap));
    --game-height: calc(15 * var(--grid-size) + 14 * var(--grid-gap));
    --jumpman-red: #e52521;
    --jumpman-blue: #4a94d0;
    --grass-green: #8bac0f;
    --road-gray: #9bafb7;
    --sky-blue: #9bccde;
    --ice-blue: #a8e6f0;
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
}

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: #222;
    font-family: 'Press Start 2P', Arial, sans-serif;
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
}

/* Animation for day-night cycle */
@keyframes dayNightCycle {
    0% { background-color: #222; }
    25% { background-color: #444; }
    50% { background-color: #666; }
    75% { background-color: #444; }
    100% { background-color: #222; }
}

.day-night-cycle {
    animation: dayNightCycle 60s infinite;
}

.game-container {
    position: relative;
    width: var(--game-width);
    height: var(--game-height);
    max-width: 100vw;
    max-height: 100vh;
    overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Parallax background */
.parallax-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.parallax-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
}

.parallax-sky {
    background: linear-gradient(to bottom, #1e3c72, #2a5298);
    z-index: 1;
}

.parallax-clouds {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" viewBox="0 0 300 100"><path d="M50 50 C 60 30, 90 30, 100 50 S 140 70, 150 50 S 190 30, 200 50 S 240 70, 250 50" stroke="white" stroke-width="20" fill="none" opacity="0.7"/></svg>');
    background-size: 300px 100px;
    z-index: 2;
    animation: moveCloud 60s linear infinite;
}

.parallax-mountains {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200"><path d="M0 200 L100 100 L200 150 L300 50 L400 150 L500 100 L600 200 Z" fill="%234b6cb7"/></svg>');
    background-size: 600px 200px;
    z-index: 3;
    bottom: 0;
    animation: moveMountain 120s linear infinite;
}

@keyframes moveCloud {
    from { background-position: 0 0; }
    to { background-position: 300px 0; }
}

@keyframes moveMountain {
    from { background-position: 0 0; }
    to { background-position: 600px 0; }
}

/* Game area and zones */
.game-area {
    position: relative;
    display: grid;
    grid-template-columns: repeat(13, var(--grid-size));
    grid-template-rows: repeat(15, var(--grid-size));
    gap: var(--grid-gap);
    width: 100%;
    height: 100%;
    z-index: 5;
}

.start-zone { background-color: var(--grass-green); }
.road-zone { background-color: var(--road-gray); }
.middle-zone { background-color: var(--grass-green); }
.river-zone { background-color: var(--sky-blue); }

/* Special zones */
.ice-zone { 
    background-color: var(--ice-blue);
    animation: iceShimmer 3s infinite;
}

.boost-zone {
    background-color: #fb8c00;
    animation: boostPulse 1s infinite;
}

@keyframes iceShimmer {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

@keyframes boostPulse {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.05); }
    100% { transform: scale(0.95); }
}

.goal-zone {
    background-color: var(--grass-green);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Platform */
.platform {
    position: absolute;
    height: var(--grid-size);
    background-color: #8d6e63;
    border-radius: 5px;
    z-index: 7;
    transition: left 0.1s linear;
    border: 2px solid #5d4037;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Character animations */
@keyframes jumpmanIdle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes jumpmanWalk {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

.jumpman {
    position: absolute;
    width: var(--grid-size);
    height: var(--grid-size);
    background-image: url('./jumpman.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition: top 0.1s, left 0.1s;
    z-index: 10;
    animation: jumpmanIdle 1s infinite;
}

.jumpman.moving {
    animation: jumpmanWalk 0.3s infinite;
}

.jumpman.shield-active {
    box-shadow: 0 0 15px 5px rgba(100, 200, 255, 0.8);
    border-radius: 50%;
}

.jumpman.speed-active {
    filter: brightness(1.2) sepia(0.3);
}

.jumpman.magnet-active {
    filter: hue-rotate(90deg);
}

/* Obstacles */
.obstacle {
    position: absolute;
    width: var(--grid-size);
    height: var(--grid-size);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 8;
}

.goomba {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="4" y="3" width="8" height="2" fill="%23784000"/><rect x="2" y="5" width="12" height="3" fill="%23784000"/><rect x="2" y="8" width="12" height="2" fill="%23F8D59C"/><rect x="2" y="10" width="2" height="2" fill="%23F8D59C"/><rect x="6" y="10" width="4" height="2" fill="%23F8D59C"/><rect x="12" y="10" width="2" height="2" fill="%23F8D59C"/><rect x="4" y="9" width="2" height="1" fill="%23000"/><rect x="10" y="9" width="2" height="1" fill="%23000"/><rect x="0" y="7" width="2" height="2" fill="%23784000"/><rect x="14" y="7" width="2" height="2" fill="%23784000"/></svg>');
    animation: wobble 1s infinite;
}

.koopa {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="5" y="1" width="6" height="2" fill="%236b8e23"/><rect x="4" y="3" width="8" height="2" fill="%236b8e23"/><rect x="3" y="5" width="10" height="5" fill="%236b8e23"/><rect x="2" y="6" width="1" height="3" fill="%236b8e23"/><rect x="13" y="6" width="1" height="3" fill="%236b8e23"/><rect x="5" y="10" width="6" height="3" fill="%23F8D59C"/><rect x="4" y="9" width="2" height="1" fill="%23FFF"/><rect x="5" y="9" width="1" height="1" fill="%23000"/><rect x="10" y="9" width="2" height="1" fill="%23FFF"/><rect x="10" y="9" width="1" height="1" fill="%23000"/><rect x="4" y="13" width="2" height="2" fill="%236b8e23"/><rect x="10" y="13" width="2" height="2" fill="%236b8e23"/></svg>');
    animation: bounce 1.2s infinite;
}

.piranha {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="4" y="2" width="8" height="4" fill="%23007c36"/><rect x="3" y="6" width="10" height="6" fill="%23007c36"/><rect x="5" y="7" width="2" height="2" fill="%23ffffff"/><rect x="6" y="8" width="1" height="1" fill="%23000000"/><rect x="9" y="7" width="2" height="2" fill="%23ffffff"/><rect x="10" y="8" width="1" height="1" fill="%23000000"/><rect x="5" y="10" width="6" height="2" fill="%23ff6b6b"/><rect x="2" y="12" width="12" height="2" fill="%23ff6b6b"/></svg>');
    animation: snap 2s infinite;
}

@keyframes wobble {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes snap {
    0%, 50%, 100% { transform: scaleY(1); }
    25%, 75% { transform: scaleY(1.1); }
}

/* Collectibles */
.coin {
    position: absolute;
    width: var(--grid-size);
    height: var(--grid-size);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="%23FFD700"/><circle cx="8" cy="8" r="5" fill="%23FFFF00"/><circle cx="8" cy="8" r="3" fill="%23FFD700"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    animation: spin 1.5s infinite linear, pulse 1s infinite;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    z-index: 5;
}

@keyframes spin {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg); }
    100% { transform: rotateY(0); }
}

@keyframes pulse {
    0% { transform: scale(0.9) rotateY(0); }
    50% { transform: scale(1.1) rotateY(90deg); }
    100% { transform: scale(0.9) rotateY(0); }
}

/* Power-ups */
.power-up {
    position: absolute;
    width: var(--grid-size);
    height: var(--grid-size);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 6;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
}

.shield {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,1 L2,3 L2,8 C2,11.866 4.582,14.55 8,15 C11.418,14.55 14,11.866 14,8 L14,3 L8,1 Z" fill="%234fc3f7" stroke="%232196f3" stroke-width="1"/><path d="M8,3 L5,4 L5,8 C5,9.657 6.343,11 8,11 C9.657,11 11,9.657 11,8 L11,4 L8,3 Z" fill="%23bbdefb"/></svg>');
    animation: shieldPulse 2s infinite;
}

.speed-boost {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14,8 L10,4 L10,6 L2,6 L2,10 L10,10 L10,12 L14,8 Z" fill="%23ffb74d" stroke="%23ff9800" stroke-width="1"/></svg>');
    animation: speedPulse 1s infinite;
}

.magnet {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4,2 L12,2 L12,8 C12,10.209 10.209,12 8,12 C5.791,12 4,10.209 4,8 L4,2 Z" fill="%23f44336" stroke="%23b71c1c" stroke-width="1"/><rect x="4" y="2" width="8" height="2" fill="%23b71c1c"/><path d="M4,10 L4,14 L7,14 L7,10 Z" fill="%23b71c1c"/><path d="M9,10 L9,14 L12,14 L12,10 Z" fill="%23b71c1c"/></svg>');
    animation: magnetPulse 1.5s infinite;
}

.extra-life {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,2 C6,2 4,4 2,6 C0,8 0,10 2,12 C4,14 6,14 8,12 C10,14 12,14 14,12 C16,10 16,8 14,6 C12,4 10,2 8,2 Z" fill="%23e57373" stroke="%23c62828" stroke-width="1"/></svg>');
    animation: heartBeat 1s infinite;
}

@keyframes shieldPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes speedPulse {
    0% { transform: translateX(-2px); }
    25% { transform: translateX(0px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(0px); }
    100% { transform: translateX(-2px); }
}

@keyframes magnetPulse {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
}

/* Goal */
.gyro {
    position: absolute;
    width: var(--grid-size);
    height: var(--grid-size);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="4" y="3" width="8" height="10" fill="%23F5DEB3"/><rect x="5" y="4" width="6" height="1" fill="%23DEB887"/><rect x="5" y="6" width="6" height="1" fill="%23FF6347"/><rect x="5" y="8" width="6" height="1" fill="%2390EE90"/><rect x="5" y="10" width="6" height="1" fill="%23DEB887"/><rect x="3" y="2" width="10" height="1" fill="%23F5DEB3"/><rect x="3" y="13" width="10" height="1" fill="%23F5DEB3"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 5;
    animation: gyroSteam 2s infinite;
}

@keyframes gyroSteam {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
    50% { filter: drop-shadow(0 -5px 3px rgba(255, 255, 255, 0.7)); }
}

/* Game screens */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.85);
    color: white;
    z-index: 50;
    touch-action: manipulation;
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.screen.active {
    opacity: 1;
    pointer-events: all;
}

.hidden {
    display: none;
}

/* Text styles */
h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--jumpman-red);
    text-shadow: 2px 2px 0px black;
    animation: titlePulse 2s infinite;
}

@keyframes titlePulse {
    0%, 100% { text-shadow: 2px 2px 0px black; }
    50% { text-shadow: 2px 2px 10px rgba(255, 0, 0, 0.7); }
}

p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Button styles */
.button-container {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: var(--jumpman-red);
    color: white;
    border: none;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    border-radius: 5px;
    transition: all 0.2s;
    box-shadow: 0 5px 0 #900;
    position: relative;
    top: 0;
}

button:hover {
    background-color: #ff0000;
    transform: scale(1.05);
}

button:active {
    background-color: #cc0000;
    box-shadow: 0 2px 0 #900;
    top: 3px;
}

/* HUD elements */
.hud-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
}

.score-display {
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.lives-display {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
}

#hearts-container {
    position: absolute;
    top: 10px;
    left: 80px;
    display: flex;
    gap: 2px;
}

.heart {
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,14 C6,12 4,10 2,8 C0,6 0,4 2,2 C4,0 6,0 8,2 C10,0 12,0 14,2 C16,4 16,6 14,8 C12,10 10,12 8,14 Z" fill="%23e57373"/></svg>');
    background-size: contain;
    animation: heartBeat 1s infinite;
}

.level-display {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.time-display {
    position: absolute;
    top: 40px;
    right: 10px;
    color: #ffeb3b;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.bonus-display {
    position: absolute;
    top: 70px;
    right: 10px;
    color: #8bc34a;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.combo-display {
    position: absolute;
    top: 100px;
    right: 10px;
    color: #ff9800;
    font-size: 14px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

.powerup-display {
    position: absolute;
    top: 40px;
    left: 10px;
    display: flex;
    gap: 5px;
}

.powerup-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    opacity: 0.5;
}

.powerup-icon.active {
    filter: none;
    opacity: 1;
    animation: iconPulse 1s infinite;
}

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

.shield-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8,1 L2,3 L2,8 C2,11.866 4.582,14.55 8,15 C11.418,14.55 14,11.866 14,8 L14,3 L8,1 Z" fill="%234fc3f7" stroke="%232196f3" stroke-width="1"/></svg>');
}

.speed-boost-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14,8 L10,4 L10,6 L2,6 L2,10 L10,10 L10,12 L14,8 Z" fill="%23ffb74d" stroke="%23ff9800" stroke-width="1"/></svg>');
}

.magnet-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4,2 L12,2 L12,8 C12,10.209 10.209,12 8,12 C5.791,12 4,10.209 4,8 L4,2 Z" fill="%23f44336" stroke="%23b71c1c" stroke-width="1"/></svg>');
}

/* Mobile controls */
.mobile-controls {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    display: none;
    justify-content: center;
    z-index: 30;
    touch-action: manipulation;
    gap: 20px;
}

.d-pad {
    display: grid;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
    gap: 5px;
}

.control-button {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.control-button:active {
    background-color: rgba(255, 255, 255, 0.8);
    transform: scale(0.95);
}

.up-btn { grid-column: 2; grid-row: 1; }
.left-btn { grid-column: 1; grid-row: 2; }
.right-btn { grid-column: 3; grid-row: 2; }
.down-btn { grid-column: 2; grid-row: 3; }
.pause-btn {
    margin-top: auto;
    margin-bottom: 25px;
    font-size: 20px;
    font-weight: bold;
}

/* Visual effects */
.point-popup {
    position: absolute;
    color: yellow;
    font-size: 16px;
    font-weight: bold;
    z-index: 25;
    animation: float-up 1s forwards;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}

@keyframes float-up {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index: 25;
    pointer-events: none;
}

/* High scores and achievements */
.high-scores-list {
    max-height: 200px;
    overflow-y: auto;
    width: 80%;
    margin: 10px 0;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 10px;
}

.high-score-entry {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.achievements-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
    max-width: 80%;
}

.achievement {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.achievement-icon {
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.achievement-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px;
    border-radius: 3px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.achievement:hover .achievement-tooltip {
    opacity: 1;
}

/* Responsive design */
@media (max-width: 768px) {
    :root { --grid-size: 25px; }
    h1 { font-size: 18px; }
    p { font-size: 12px; }
    button { padding: 8px 16px; font-size: 14px; }
    .game-container {
        transform: scale(0.9);
        transform-origin: top center;
    }
    .mobile-controls {
        display: flex;
    }
}

@media (max-width: 480px) {
    :root { --grid-size: 20px; }
    .game-container {
        transform: scale(0.85);
    }
    .control-button {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .d-pad {
        grid-template-columns: repeat(3, 40px);
        grid-template-rows: repeat(3, 40px);
    }
}