/* Mom's Day Off - Game Styles */

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

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive, sans-serif;
}

/* ===================================
   Rotate Device Overlay
   =================================== */
#rotate-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.rotate-content {
    text-align: center;
    color: white;
    padding: 40px;
}

.rotate-icon {
    margin-bottom: 30px;
    animation: rotateHint 2s ease-in-out infinite;
}

.rotate-icon svg {
    color: white;
}

@keyframes rotateHint {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.rotate-content h2 {
    font-size: 28px;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.rotate-content p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 10px;
}

.rotate-content .game-title {
    font-size: 24px;
    color: #ffecd2;
    font-weight: bold;
    margin-top: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* ===================================
   Game Container
   =================================== */
#game-container {
    position: relative;
    width: 800px;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #ffecd2;
}

/* ===================================
   UI Overlay
   =================================== */
#ui-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}

#score {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    min-width: 150px;
}

#health-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#health-label {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

#health-bar {
    width: 200px;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

#health-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #feca57);
    transition: width 0.3s ease;
    border-radius: 9px;
}

#lives {
    display: flex;
    gap: 12px;
}

.heart {
    display: inline-block;
    width: 32px;
    height: 32px;
    position: relative;
    filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.4));
}

.heart::before {
    content: '❤️';
    font-size: 28px;
    position: absolute;
    top: 0;
    left: 0;
}

.heart.lost {
    opacity: 0.35;
    filter: grayscale(100%) drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.3));
}

.heart.lost::before {
    content: '🖤';
}

/* ===================================
   Speech Bubble
   =================================== */
#speech-bubble {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fff 0%, #f0f0f0 100%);
    padding: 12px 25px;
    border-radius: 25px;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    border: 3px solid #feca57;
    z-index: 100;
    animation: popInTop 0.3s ease-out;
    pointer-events: none;
}

#speech-bubble::after {
    display: none;
}

#speech-bubble.hidden {
    display: none;
}

@keyframes popInTop {
    0% {
        transform: translateX(-50%) scale(0) translateY(-20px);
        opacity: 0;
    }
    50% {
        transform: translateX(-50%) scale(1.1) translateY(0);
    }
    100% {
        transform: translateX(-50%) scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes fadeOutTop {
    0% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.8) translateY(-10px);
    }
}

#speech-bubble.fade-out {
    animation: fadeOutTop 0.3s ease-in forwards;
}

/* ===================================
   Score Popup
   =================================== */
#popup-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.score-popup {
    position: absolute;
    font-size: 24px;
    font-weight: bold;
    color: #2ecc71;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: floatUp 1s ease-out forwards;
    pointer-events: none;
}

.score-popup.negative {
    color: #e74c3c;
}

@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

/* ===================================
   Game Overlays (Start/Game Over)
   =================================== */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 200;
    padding: 20px;
}

.overlay.hidden {
    display: none;
}

.overlay h1 {
    font-size: 48px;
    margin-bottom: 10px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
    color: #ffecd2;
    text-align: center;
}

.overlay .subtitle {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 0.9;
    font-style: italic;
    text-align: center;
}

.overlay .instructions {
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 15px;
}

.overlay .instructions p {
    margin: 4px 0;
}

.overlay .controls {
    margin-top: 10px;
    color: #feca57;
}

.overlay button {
    padding: 15px 35px;
    font-size: 18px;
    font-family: inherit;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.overlay button:hover,
.overlay button:active {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#final-score {
    font-size: 28px;
    margin: 15px 0 8px;
    color: #feca57;
}

#high-score {
    font-size: 18px;
    margin-bottom: 20px;
    opacity: 0.8;
}

/* ===================================
   Screen Shake Effect
   =================================== */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

#game-container.shake {
    animation: shake 0.3s ease-in-out;
}

/* ===================================
   Mobile Touch Controls
   =================================== */
#mobile-controls {
    display: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 15px;
    z-index: 50;
}

.touch-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background: rgba(102, 126, 234, 0.85);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s, background 0.1s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.touch-btn:active,
.touch-btn.active {
    transform: scale(0.9);
    background: rgba(118, 75, 162, 0.95);
}

.touch-btn svg {
    pointer-events: none;
}

/* ===================================
   Mobile Responsive - Portrait Mode
   Show rotate overlay ONLY on touch devices
   =================================== */
@media screen and (max-width: 900px) and (orientation: portrait) and (pointer: coarse) {
    #rotate-overlay {
        display: flex !important;
    }

    #game-container {
        display: none !important;
    }
}

/* Desktop in portrait-ish window - ensure game shows normally */
@media screen and (pointer: fine) {
    #rotate-overlay {
        display: none !important;
    }

    #game-container {
        display: block !important;
    }
}

/* ===================================
   Mobile Responsive - Landscape Mode
   Show game properly
   =================================== */
@media screen and (max-width: 900px) and (orientation: landscape) {
    #rotate-overlay {
        display: none !important;
    }

    body {
        padding: 0;
        margin: 0;
        /* Ensure body fills viewport and centers content */
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

    #game-container {
        display: block !important;
        /* Dimensions controlled by JavaScript for accurate viewport fit */
        /* Fallback values if JS hasn't run yet */
        width: 100vw;
        height: 56.25vw; /* 16:9 aspect ratio */
        max-height: 100vh;
        max-width: 177.78vh; /* 16:9 aspect ratio inverse */
        border-radius: 0;
        box-shadow: none;
    }

    #gameCanvas {
        width: 100%;
        height: 100%;
        display: block;
    }

    /* Adjust UI for mobile landscape */
    #ui-overlay {
        padding: 8px 15px;
    }

    #score {
        font-size: 16px;
        min-width: 80px;
    }

    #health-bar {
        width: 100px;
        height: 16px;
    }

    #health-label {
        font-size: 12px;
    }

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

    .heart::before {
        font-size: 20px;
    }

    #lives {
        gap: 6px;
    }

    /* Overlay adjustments for landscape mobile */
    .overlay {
        padding: 15px;
    }

    .overlay h1 {
        font-size: 32px;
        margin-bottom: 5px;
    }

    .overlay .subtitle {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .overlay .instructions {
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .overlay .instructions p {
        margin: 2px 0;
    }

    .overlay button {
        padding: 12px 28px;
        font-size: 16px;
    }

    #final-score {
        font-size: 22px;
        margin: 10px 0 5px;
    }

    #high-score {
        font-size: 14px;
        margin-bottom: 10px;
    }

    #speech-bubble {
        font-size: 16px;
        padding: 8px 16px;
        top: 45px;
    }

    /* Show mobile controls in landscape */
    #mobile-controls {
        display: flex;
        right: 10px;
        gap: 10px;
    }

    .touch-btn {
        width: 55px;
        height: 55px;
    }

    .touch-btn svg {
        width: 28px;
        height: 28px;
    }
}

/* ===================================
   Tablet Landscape
   =================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #game-container {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
    }

    .touch-btn {
        width: 65px;
        height: 65px;
    }

    .touch-btn svg {
        width: 32px;
        height: 32px;
    }
}

/* ===================================
   Desktop - show touch controls on touch devices
   =================================== */
@media (pointer: coarse) and (min-width: 901px) {
    #mobile-controls {
        display: flex;
    }
}

/* ===================================
   Pause Screen
   =================================== */
#pause-screen {
    background: rgba(0, 0, 0, 0.9);
}

.pause-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pause-border-wrapper {
    position: relative;
    padding: 4px;
    border-radius: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

/* Animated gradient border using pseudo-element with conic gradient */
.pause-border-glow {
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        #ff6b6b 30deg,
        #feca57 60deg,
        #48dbfb 90deg,
        #ff9ff3 120deg,
        #54a0ff 150deg,
        #5f27cd 180deg,
        #00d2d3 210deg,
        #ff6b6b 240deg,
        #feca57 270deg,
        #48dbfb 300deg,
        #ff9ff3 330deg,
        transparent 360deg
    );
    animation: rotateBorder 4s linear infinite;
    filter: blur(8px);
    opacity: 0.8;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Secondary glow layer for depth */
.pause-border-wrapper::before {
    content: '';
    position: absolute;
    inset: -25%;
    background: conic-gradient(
        from 180deg,
        transparent 0deg,
        rgba(255, 107, 107, 0.6) 45deg,
        rgba(254, 202, 87, 0.6) 90deg,
        rgba(72, 219, 251, 0.6) 135deg,
        rgba(255, 159, 243, 0.6) 180deg,
        rgba(84, 160, 255, 0.6) 225deg,
        rgba(95, 39, 205, 0.6) 270deg,
        rgba(0, 210, 211, 0.6) 315deg,
        transparent 360deg
    );
    animation: rotateBorder 3s linear infinite reverse;
    filter: blur(12px);
    opacity: 0.5;
}

/* Subtle sparkle particles effect */
.pause-border-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 2%),
        radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 2%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.7) 0%, transparent 2%),
        radial-gradient(circle at 90% 70%, rgba(255, 255, 255, 0.5) 0%, transparent 2%),
        radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 2%),
        radial-gradient(circle at 60% 10%, rgba(255, 255, 255, 0.7) 0%, transparent 2%);
    animation: sparkleShift 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sparkleShift {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.02); }
}

.pause-inner {
    position: relative;
    background: rgba(0, 0, 0, 0.95);
    border-radius: 20px;
    padding: 40px 60px;
    text-align: center;
    z-index: 1;
}

#pause-screen h1 {
    font-size: 52px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 50%, #ffecd2 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientText 3s ease-in-out infinite;
}

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

#pause-screen .subtitle {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin-bottom: 25px;
}

#resume-button {
    padding: 15px 40px;
    font-size: 18px;
    font-family: inherit;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#resume-button:hover,
#resume-button:active {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
}

/* Mobile adjustments for pause screen */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .pause-inner {
        padding: 25px 40px;
    }

    #pause-screen h1 {
        font-size: 36px;
    }

    #pause-screen .subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }

    #resume-button {
        padding: 12px 30px;
        font-size: 16px;
    }
}

/* ===================================
   Small height landscape (very wide screens)
   =================================== */
@media screen and (max-height: 400px) and (orientation: landscape) {
    .overlay h1 {
        font-size: 26px;
    }

    .overlay .subtitle {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .overlay .instructions {
        font-size: 11px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .overlay button {
        padding: 10px 24px;
        font-size: 14px;
    }

    #final-score {
        font-size: 18px;
    }

    #high-score {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .touch-btn {
        width: 45px;
        height: 45px;
    }

    .touch-btn svg {
        width: 24px;
        height: 24px;
    }
}