@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(45deg, #87ceeb, #b0e0e6, #e0f6ff, #f0f8ff);
    background-size: 400% 400%;
    animation: gradientShift 3s ease infinite;
    user-select: none; /* allow page to scroll when swiping outside canvas */
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh; /* Use min-height instead of height to allow content to determine size */
    padding: 10px 10px 80px 10px; /* space for controls */
    max-width: 400px;
    margin: 0 auto;
    position: relative; /* anchor absolute overlays inside the game area */
}

.game-header {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.game-title {
    font-size: 12px;
    color: white;
    text-shadow: 2px 2px 0px #4169e1, 4px 4px 0px #191970;
    margin-bottom: 8px;
    animation: sparkle 2s ease-in-out infinite;
}

.game-title-container {
    margin-bottom: 8px;
    text-align: center;
}

.game-title-img {
    max-height: 40px;
    height: auto;
    display: block;
    margin: 0 auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    animation: sparkle 2s ease-in-out infinite;
}

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

.score {
    font-size: 12px;
    color: white;
    background: rgba(25, 25, 112, 0.8);
    padding: 4px 8px;
    border: 2px solid white;
    border-radius: 4px;
    display: inline-block;
}

#gameCanvas {
    border: 4px solid white;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(135, 206, 235, 0.5);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.game-controls {
    position: relative; /* Change from absolute to relative for normal flow */
    margin-top: 10px; /* Reduced from 20px to bring controls closer */
    display: flex;
    justify-content: center; /* Center the controls container */
    width: 90%;
    max-width: 380px;
    gap: 10px;
    z-index: 100;
    background: rgba(135, 206, 235, 0.2);
    padding: 10px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    /* Ensure controls stay within the game container bounds */
    max-height: 80px; /* Prevent controls from being too tall */
    margin-left: auto; /* Center the container */
    margin-right: auto; /* Center the container */
}

.control-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    padding: 15px;
    border: 3px solid white;
    border-radius: 8px;
    background: linear-gradient(145deg, #87ceeb, #4169e1);
    color: white;
    text-shadow: 1px 1px 0px #191970;
    cursor: pointer;
    transition: all 0.1s;
    min-height: 50px;
    touch-action: manipulation;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    
    /* Disable text selection and mobile highlighting */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.left-btn, .right-btn {
    flex: 1;
    font-size: 16px;
}

.jump-btn {
    flex: 2;
    background: linear-gradient(145deg, #ffd700, #ffb347);
    border-color: #fff;
}

.control-btn:active {
    transform: scale(0.95);
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

.game-ui {
    text-align: center;
    z-index: 10;
    /* Position and size will be set by JavaScript using same logic as intro videos */
}

.start-btn, .restart-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    padding: 15px 25px;
    border: 3px solid white;
    border-radius: 8px;
    background: linear-gradient(145deg, #b0e0e6, #4682b4);
    color: white;
    text-shadow: 1px 1px 0px #191970;
    cursor: pointer;
    transition: all 0.1s;
    animation: pulse 2s ease-in-out infinite;
}

/* Hide the old START GAME button */
.start-btn {
    display: none !important; /* Always hide the START GAME button */
}

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

.start-btn:active, .restart-btn:active {
    transform: scale(0.95);
}

.game-over {
    background: rgb(168, 216, 234);
    padding: 20px;
    border: 3px solid #4169e1;
    border-radius: 12px;
    color: #2c3e50;
    /* Remove fixed width constraints - let it be responsive like instructions */
    max-width: 85%; /* Responsive max-width like instructions */
    width: auto; /* Let content determine width */
    min-width: 280px; /* Minimum readable width */
    /* Let flexbox handle the sizing naturally */
    flex-shrink: 0; /* Prevent shrinking */
    flex-grow: 0; /* Don't grow beyond content size */
}

/* Dream Chaser - Pastel Pink */
.dream-mode .game-over {
    background: rgb(255, 182, 193);
    color: #4a4a4a;
}

.dream-mode .game-over h2 {
    color: #5D35BB;
}

/* Glow Getter - Pastel Purple */
.glow-mode .game-over {
    background: rgb(221, 160, 221);
    color: #4a4a4a;
}

.glow-mode .game-over h2 {
    color: #5D35BB;
}

/* Bloom Boss - Pastel Pink (same as Dream Chaser) */
.bloom-mode .game-over {
    background: rgb(255, 182, 193);
    color: #4a4a4a;
}

.bloom-mode .game-over h2 {
    color: #5D35BB;
}

.game-over h2 {
    font-size: 18px; /* keep copy larger */
    color: #87ceeb;
    margin-bottom: 12px;
}

.game-over p {
    font-size: 14px; /* keep copy larger */
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Add spacing for stacked buttons in Game Over overlay */
.game-over .restart-btn {
    display: block;
    width: 136px !important;
    margin: 10px auto;
    font-size: 10px; /* keep buttons small */
    padding: 12px 18px;
}

/* Website link in game over screen should match button width */
.game-over .website-link {
    width: 136px !important;
}

/* Responsive button sizing for different screen sizes */
@media (max-width: 480px) {
    .game-over .restart-btn {
        width: 120px !important; /* Slightly smaller on mobile */
        font-size: 9px;
        padding: 10px 16px;
    }
    
    .game-over .website-link {
        width: 120px !important; /* Match button width */
        font-size: 7px; /* Smaller font on mobile */
    }
}

.hidden {
    display: none !important;
}

/* ----- Intro video overlay for Dream Chaser ----- */
.intro-overlay {
    position: absolute;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    /* Size and position will be set dynamically in JavaScript */
    /* Ensure it doesn't interfere with game controls */
    pointer-events: auto;
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill overlay */
    transform: scale(1.02); /* subtle zoom */
    /* Ensure video stays within overlay bounds */
    max-width: 100%;
    max-height: 100%;
    overflow: hidden; /* Prevent video from spilling out */
}

.skip-intro-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    padding: 10px 20px;
    border: 3px solid #fff;
    background: #4169e1;
    color: #fff;
    text-shadow: 1px 1px 0 #191970;
    cursor: pointer;
}

.skip-intro-btn:active {
    transform: scale(0.95);
}

/* ----- Start screen overlay (image) ----- */
.start-overlay {
    position: absolute;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1900;
    /* Size and position will be set dynamically in JavaScript */
}

.start-img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    image-rendering: pixelated;
}

/* ---------- Bloom Boss Joystick ---------- */
.analog {
    position: fixed;
    bottom: 100px; /* just above control bar */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    opacity: 0.85; /* 85% opacity */
    touch-action: none;
    z-index: 150;
}

.stick-base {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffb6c1; /* solid light pink */
    position: relative;
}

.stick-thumb {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    margin-top: -25px;
    border-radius: 50%;
    background: #ff9ac2; /* solid pink thumb */
}

/* Joystick directional arrows (minimalist triangles) */
.direction-arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none; /* let touches pass through */
}

/* Up arrow */
.arrow-up {
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 14px solid #ff9ac2;
}

/* Down arrow */
.arrow-down {
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 14px solid #ff9ac2;
}

/* Left arrow */
.arrow-left {
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 14px solid #ff9ac2;
}

/* Right arrow */
.arrow-right {
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #ff9ac2;
}

/* Slightly smaller on very small screens */
@media (max-width: 480px) {
  .arrow-up,
  .arrow-down {
    top: -14px;
    bottom: -14px;
    border-left-width: 7px;
    border-right-width: 7px;
    border-bottom-width: 10px;
    border-top-width: 10px;
  }
  .arrow-left,
  .arrow-right {
    left: -14px;
    right: -14px;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-right-width: 10px;
    border-left-width: 10px;
  }
}

@media (hover: hover) {
    /* hide joystick on desktop */
    .analog { display:none !important; }
}

/* Mobile optimizations */
@media (max-width: 480px) {
    .game-container {
        padding: 5px;
        padding-bottom: 85px; /* More space for floating controls on small screens */
    }
    
    .game-title {
        font-size: 10px;
    }
    
    .game-title-img {
        max-height: 32px;
    }
    
    .control-btn {
        padding: 14px;
        font-size: 12px;
        min-height: 48px;
    }
    
    .left-btn, .right-btn {
        font-size: 14px;
    }
    
    .game-controls {
        margin-top: 8px; /* Reduced from 15px to bring controls closer on mobile */
        width: 95%;
        padding: 8px;
    }
    
    /* Mobile responsive game-over screen */
    .game-over {
        max-width: 90%; /* Slightly larger on mobile for better readability */
        min-width: 260px; /* Smaller minimum on mobile */
        padding: 16px; /* Slightly less padding on mobile */
    }
    
    .game-over h2 {
        font-size: 16px; /* Slightly smaller on mobile */
    }
    
    .game-over p {
        font-size: 12px; /* Slightly smaller on mobile */
    }
}

/* Prevent text selection and zoom */
canvas {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}

/* Safe area for phones with home indicators */
@supports (padding: max(0px)) {
    .game-controls {
        margin-bottom: max(10px, env(safe-area-inset-bottom));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }
}

.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    text-align: center;
    box-shadow: 0 8px 32px rgba(135, 206, 235, 0.25);
    border-radius: 0 0 32px 32px;
    padding: 32px 10px 24px 10px;
    margin: 0 auto;
    overflow: hidden;
}

.main-menu .game-title {
    font-size: 20px;
    margin-bottom: 32px;
    color: #4169e1;
    text-shadow: 2px 2px 0px #fff, 4px 4px 0px #b0e0e6;
    letter-spacing: 1px;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 0;
    width: 100%;
    max-width: 340px;
}

/* Base pixel button style */
.pixel-btn-base {
    font-family: 'Press Start 2P', cursive;
    background: #87ceeb;
    color: #fff;
    font-size: 14px;
    padding: 18px 26px;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px #191970, 4px 4px 0 4px #000;
    text-shadow: 1px 1px 0 #191970;
    cursor: pointer;
    transition: transform 0.05s;
    image-rendering: pixelated;
    border-radius: 0;
    outline: none;
}

.pixel-btn-base:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 4px #191970, 2px 2px 0 4px #000;
}

/* Apply to menu and back buttons */
.menu-btn, .back-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    -webkit-appearance: none;
    appearance: none;
}

.menu-btn { /* inherit pixel style */ }
.back-btn {
    position: absolute;
    left: 6px;
    top: 6px;
    width: auto;
    max-width: none;
    padding: 6px 10px;
    font-size: 14px;
    background: #b0e0e6;
}

.menu-btn,
.back-btn {
    font-size: 14px;
    padding: 18px 26px;
    background: #87ceeb;
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px #191970, 4px 4px 0 4px #000;
    text-shadow: 1px 1px 0 #191970;
    cursor: pointer;
    transition: transform 0.05s;
    image-rendering: pixelated;
    border-radius: 0;
}

.menu-btn:active,
.back-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 4px #191970, 2px 2px 0 4px #000;
}

/* Menu button variants */
.menu-btn.active {
    background: #4169e1;
}

.menu-btn.disabled {
    background: #b0b0b0;
    color: #666;
    box-shadow: none;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Smaller back button specific tweaks */
.back-btn {
    position: absolute;
    left: 24px;
    top: 32px;
    width: auto;
    max-width: none;
    padding: 6px 10px;
    font-size: 14px;
    background: #b0e0e6;
}

@media (max-width: 480px) {
    .menu-btn,
    .back-btn {
        font-size: 14px;
        padding: 16px 20px;
        box-shadow: 0 0 0 3px #191970, 3px 3px 0 3px #000;
    }
    .back-btn {
        left: 20px;
        top: 24px;
        padding: 6px 10px;
    }
}

.menu-logo {
    width: 220px;
    image-rendering: pixelated;
    margin-bottom: 32px;
}

.audio-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #333;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 100;
}

.audio-toggle:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

.audio-toggle.muted {
    background: rgba(255, 100, 100, 0.9);
}

.website-link {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #a8d8ea; /* Default baby blue for Dream Chaser & Bloom Boss */
    color: #2c3e50;
    text-decoration: none;
    border-radius: 25px;
    font-family: 'Press Start 2P', cursive;
    font-size: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border: 3px solid #7fb3d3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    font-weight: bold;
}

.website-link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border-color: #fff;
    background: #7fb3d3; /* Slightly darker on hover */
}

.website-link:active {
    transform: scale(0.95);
}

/* Game-specific website link colors */
body.glow-mode .website-link {
    background: #ffc2d1; /* Pastel pink for Glow Getter's purple endscreen */
    color: #6b2c91;
    border-color: #ff9bb5;
}

body.glow-mode .website-link:hover {
    background: #ff9bb5; /* Slightly darker pink on hover */
    border-color: #fff;
}

.menu-subtitle {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    color: #191970;
    letter-spacing: 1px;
    margin-bottom: 48px;
}

.character-row {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 48px;
    position: relative;
}

.character-row.selected::before {
    content: '▶';
    position: absolute;
    left: -24px;
    font-size: 18px;
    color: #191970;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

.character-avatar {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 0 0 4px #191970, 4px 4px 0 4px #000;
    border-radius: 8px;
    image-rendering: pixelated;
}

.character-btn {
    font-family: 'Press Start 2P', cursive;
    font-size: 16px;
    padding: 20px 28px;
    border: 4px solid #fff;
    border-radius: 50px; /* pill */
    background: #4db8ff;
    color: #fff;
    text-shadow: 1px 1px 0 #191970;
    cursor: pointer;
    transition: transform 0.05s;
    box-shadow: 0 0 0 4px #191970, 4px 4px 0 4px #000;
}

.character-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 4px #191970, 2px 2px 0 4px #000;
}

.character-row.coming .character-btn {
    background: #b0b0b0;
    cursor: not-allowed;
    color: #666;
    box-shadow: none;
    border-color: #ddd;
}

/* Bloom Boss pastel pink variant */
.bloom-btn {
    background: linear-gradient(145deg, #ffcfe7, #ff9ac2);
    color: #fff;
}

/* Glow Getter violet variant */
.glow-btn {
    background: linear-gradient(145deg, #d9c1ff, #b48cff);
    color: #fff;
}

/* ---- Glow Getter button colour overrides ---- */
.glow-mode .left-btn,
.glow-mode .right-btn {
    background: linear-gradient(145deg, #c8b2ff, #a697ff);
    border-color: #b0bfff;
}

.glow-mode .jump-btn {
    background: linear-gradient(145deg, #ff9a65, #ff6040);
    border-color: #ffd1b0;
}

.glow-mode .control-btn {
    box-shadow: 0 0 0 4px #8aa7ff, 4px 4px 0 4px #4a5fff;
}

/* ---- Dream Chaser button colour overrides ---- */
.dream-mode .left-btn,
.dream-mode .right-btn {
    background: linear-gradient(145deg, #8fd8ff, #63c0ff); /* light blue gradient */
    border-color: #b2d9ff;
}

.dream-mode .jump-btn {
    background: linear-gradient(145deg, #ff9a65, #ff6040); /* orange gradient similar */
    border-color: #ffd1b0;
}

.dream-mode .control-btn {
    box-shadow: 0 0 0 4px #6aa8ff, 4px 4px 0 4px #326bff;
}

.winner-overlay {
    position: relative;
    /* Remove fixed dimensions - let it size naturally like game-over screen */
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 85%;
    min-width: 280px; /* Minimum readable width */
    min-height: 400px; /* Minimum readable height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.winner-template {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.winner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 125px 20px 20px 20px;
    box-sizing: border-box;
    color: #191970;
    text-align: center;
}

.winner-content h2 {
    font-size: 14px;
    color: #ff4fa3;
    margin-bottom: 8px;
    font-weight: bold;
}

.winner-content p {
    font-size: 9.5px; /* Reduced by ~10% from 10.5px */
    line-height: 1.4;
    margin-bottom: 8px;
}

.winner-content .discount-msg {
    font-size: 8.5px; /* Reduced by ~10% from 9.5px */
    line-height: 1.4;
    margin-bottom: 4px; /* Reduced from 8px to 4px for tighter spacing */
}

.winner-content .discount-code {
    font-size: 10.5px; /* Reduced by ~10% from 11.5px */
    color: #ff4fa3;
    margin: 6px 0; /* Reduced from 8px to 6px */
}

.winner-content .website-link {
    display: inline-block;
    background: #87CEEB; /* baby blue */
    color: #191970;
    text-decoration: none;
    padding: 6px 13px; /* Reduced by ~20% from 8px 16px */
    border-radius: 5px; /* Slightly smaller radius */
    font-size: 8px; /* Reduced by ~20% from 10px */
    margin-bottom: 8px; /* Reduced spacing */
    border: 2px solid #5F9EA0;
    transition: all 0.2s ease;
    transform: scale(0.8); /* Make it 20% smaller overall */
    margin-top: -10px; /* Move link up by 10px */
}

.winner-content .website-link:hover {
    background: #98D8E8;
    border-color: #4A90A4;
}

/* Invisible clickable buttons over template */
.template-btn {
    position: absolute;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 3;
    width: 100px; /* Reduced width to match smaller template */
    height: 25px; /* Reduced height to match template buttons */
    font-size: 0; /* Hide text */
    color: transparent;
}

.restart-btn-overlay {
    bottom: 108px; /* Moved up 3px more for "JUGAR DE NUEVO" button */
    left: 50%;
    transform: translateX(-50%);
}

.menu-btn-overlay {
    bottom: 73px; /* Moved up 3px more for "MENÚ PRINCIPAL" button */
    left: 50%;
    transform: translateX(-50%);
}



/* Bloom Boss specific adjustments */
.bloom-mode .winner-overlay {
    /* Removed transform - now handled by JavaScript */
}

.bloom-mode .winner-content {
    padding: 115px 20px 20px 20px; /* Move content down 15px more */
}

/* Bloom Boss specific button positioning */
.bloom-mode .restart-btn-overlay {
    bottom: 90px; /* Move down 5px more from 95px */
}

.bloom-mode .menu-btn-overlay {
    bottom: 51px; /* Move down 4px more from 55px */
}

.bloom-mode .winner-content .website-link {
    margin-top: 5px; /* Move link button up 10px more from 30px */
}

/* Bloom Boss back button positioning - move it 10px higher */
.bloom-mode .back-btn {
    top: 22px; /* Move back button 10px higher (was 32px) */
}

/* Glow Getter specific button positioning */
.glow-mode .restart-btn-overlay {
    bottom: 98px; /* Lower by 10px from 108px */
}

.glow-mode .menu-btn-overlay {
    bottom: 63px; /* Lower by 10px from 73px */
}

/* Glow Getter specific adjustments - move entire overlay up 30px */
.glow-mode .winner-overlay {
    /* Removed transform - now handled by JavaScript */
}

.glow-mode .winner-content {
    padding: 117px 20px 20px 20px; /* Move content down 7px more */
}

.glow-mode .restart-btn-overlay {
    bottom: 93px; /* Move down 5px more from 98px */
}

.glow-mode .menu-btn-overlay {
    bottom: 58px; /* Move down 5px more from 63px */
}

.glow-mode .winner-content .website-link {
    margin-top: 2px; /* Move link button up by 10px (was 12px) */
}

/* Dream Chaser specific adjustments - move entire overlay up 25px */
.dream-mode .winner-overlay {
    /* Removed transform - now handled by JavaScript */
}

.dream-mode .winner-content {
    padding: 115px 20px 20px 20px; /* Move content down 15px more */
}

.dream-mode .restart-btn-overlay {
    bottom: 108px; /* Move down 5px more from 113px */
}

.dream-mode .menu-btn-overlay {
    bottom: 73px; /* Move down 5px more from 78px */
}

.dream-mode .winner-content .website-link {
    margin-top: -8px; /* Move link button up by 8px more (was 0px) */
}

/* Mobile-specific adjustments */
@media (max-width: 480px) {
    /* Game UI positioning handled by JavaScript */
    
    .winner-overlay {
        width: 280px;
        height: 410px;
    }
    
    .winner-content {
        padding: 120px 15px 15px 15px;
    }
    
    .winner-content p {
        font-size: 8.5px;
    }
    
    .winner-content .discount-msg {
        font-size: 7.5px;
    }
    
    .winner-content .discount-code {
        font-size: 9.5px;
    }
    
    .template-btn {
        width: 85px;
        height: 20px;
    }
    
    .restart-btn-overlay {
        bottom: 93px; /* Moved up 3px more for mobile */
    }
    
    .menu-btn-overlay {
        bottom: 63px; /* Moved up 3px more for mobile */
    }
    
    /* Bloom Boss mobile adjustments */
    .bloom-mode .winner-overlay {
        transform: translateY(-50px); /* Move up 30px more from -20px to -50px on mobile */
    }
    
    .bloom-mode .winner-content {
        padding: 110px 15px 15px 15px; /* Move content down 15px more on mobile */
    }
    
    .bloom-mode .restart-btn-overlay {
        bottom: 75px; /* Move down 5px more from 80px on mobile */
    }
    
    .bloom-mode .menu-btn-overlay {
        bottom: 41px; /* Move down 4px more from 45px on mobile */
    }
    
    .bloom-mode .winner-content .website-link {
        margin-top: 18px; /* Move link button up 10px more from 28px on mobile */
    }
    
    /* Glow Getter mobile adjustments */
    .glow-mode .restart-btn-overlay {
        bottom: 83px; /* Lower by 10px from 93px on mobile */
    }
    
    .glow-mode .menu-btn-overlay {
        bottom: 53px; /* Lower by 10px from 63px on mobile */
    }
    
    /* Glow Getter mobile overlay adjustments - move up 30px */
    .glow-mode .winner-overlay {
        transform: translateY(-30px); /* Move entire overlay up 30px on mobile */
    }
    
    .glow-mode .winner-content {
        padding: 112px 15px 15px 15px; /* Move content down 7px more on mobile */
    }
    
    .glow-mode .restart-btn-overlay {
        bottom: 78px; /* Move down 5px more from 83px on mobile */
    }
    
    .glow-mode .menu-btn-overlay {
        bottom: 48px; /* Move down 5px more from 53px on mobile */
    }
    
    .glow-mode .winner-content .website-link {
        margin-top: 12px; /* Move link button down 12px on mobile */
    }
    
    /* Dream Chaser mobile adjustments - move up 25px */
    .dream-mode .winner-overlay {
        transform: translateY(-25px); /* Move entire overlay up 25px on mobile */
    }
    
    .dream-mode .winner-content {
        padding: 110px 15px 15px 15px; /* Move content down 15px more on mobile */
    }
    
    .dream-mode .restart-btn-overlay {
        bottom: 93px; /* Move down 5px more from 98px on mobile */
    }
    
    .dream-mode .menu-btn-overlay {
        bottom: 63px; /* Move down 5px more from 68px on mobile */
    }
    
    .dream-mode .winner-content .website-link {
        margin-top: 10px; /* Move link button up 5px more from 15px on mobile */
    }
}

.joystick-tip {
  position: absolute;
  bottom: 110%; /* above joystick */
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(145deg, #ffcfe7, #ff9ac2);
  color: #191970;
  font-family: 'Press Start 2P', cursive;
  font-size: 9px;
  padding: 6px 8px;
  border: 2px solid #ff9ac2;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 200;
  box-shadow: 0 2px 6px rgba(255, 154, 194, 0.5);
  animation: tooltipFade 4s forwards;
}

@keyframes tooltipFade {
  0% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@media (hover: hover) {
  /* hide tooltip on desktop */
  .joystick-tip { display: none !important; }
}

/* Landscape orientation warning */
.orientation-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-family: 'Press Start 2P', cursive;
    padding-bottom: 90px;
}

/* Orientation warning is hidden by default */
.orientation-warning {
    display: none;
}

.orientation-content {
    padding: 20px;
    max-width: 300px;
}

.orientation-content .phone-icon {
    font-size: 48px;
    margin-bottom: 20px;
    animation: rotate 2s ease-in-out infinite;
}

.orientation-content h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.orientation-content p {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #f0f0f0;
}

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

/* Hide game content in landscape mode on mobile and tablets */
@media (max-width: 1366px) and (orientation: landscape) {
    .game-container {
        display: none !important;
    }
    
    .orientation-warning {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Alternative landscape detection using aspect ratio */
@media (max-width: 1366px) and (min-aspect-ratio: 1/1) {
    .game-container {
        display: none !important;
    }
    
    .orientation-warning {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Additional tablet-specific landscape detection */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    .game-container {
        display: none !important;
    }
    
    .orientation-warning {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}