/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

body {
    font-family: 'Courier New', monospace;
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    image-rendering: pixelated;
    touch-action: manipulation; /* Improve touch response on mobile */
}
.bitcount-font{
    font-family: "bitcount-mono-single-square", sans-serif;
    font-weight: 600;
    font-style: normal;
}
/* Game Container */
.game-container {
    width: 320px;
    height: 480px;
    background-color: #99E65F; /* Sky blue background */
    position: relative;
    overflow: hidden;
    padding:0px;
    background: linear-gradient(to bottom, #1B496A 2.08%, #0F2646 78.52%);    

    image-rendering: pixelated;
    max-width: 100vw; /* Ensure it doesn't overflow on small screens */
    max-height: 100vh;
}
.game-bg{
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    position: absolute;
    top: 0px;
    left: 0px;
    background-image:url('../assets/field-background.png');
    background-size: cover;
}

/* Game Header */
.game-header {
    height: 145px;
    background: url('../assets/header.jpg');
    background-size:cover;
    padding: 0 0px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    position:relative;
    overflow:hidden;
    text-shadow: 2px 2px 0 #000;
}

/* Cloud Animation Styles */
.clouds-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Behind the tower/castle */
    pointer-events: none; /* Allow clicks to pass through */
}

.cloud-layer {
    position: absolute;
    height: 40px; /* Height for clouds */
    width: 100%;
    background-repeat: repeat-x;
    z-index: 1;
}

.cloud-layer-1 {
    top: 20px; /* Same height as layer 2 */
    background-image: url('../assets/cloud-1.png');
    background-size: auto 35px;
    animation: cloud-move-1 60s linear infinite; /* Much slower */
}

.cloud-layer-2 {
    top: 20px; /* Same height as layer 1 */
    background-image: url('../assets/cloud-2.png');
    background-size: auto 35px;
    animation: cloud-move-2 50s linear infinite; /* Much slower but slightly faster than layer 1 */
}

@keyframes cloud-move-1 {
    0% {
        background-position: 320px 0; /* Start from right edge (320px width) */
    }
    100% {
        background-position: -640px 0; /* Make it twice as long to prevent jumps */
    }
}

@keyframes cloud-move-2 {
    0% {
        background-position: 400px 0; /* Start from further right for staggering effect */
    }
    100% {
        background-position: -640px 0; /* Make it twice as long to prevent jumps */
    }
}
.loss-display{
    position: absolute;
    right: 10px;
    top: 30px;
    z-index: 3; /* Above clouds */
}
.level-display{
    position: absolute;
    left: 10px;
    top: 30px;
    z-index: 3; /* Above clouds */
}
/* Tower Sprite in Header */
.tower-sprite {
    width: 100px;
    height: 49px;
    position: absolute;
    left: 50%;
    top: 25px;
    transform: translateX(-50%);
    background-image: url('../assets/tower-sprite.png');
    background-repeat: no-repeat;
    background-size: 100px 98px; /* Width x 2*Height for both states */
    background-position: 0 0; /* Start with the first state */
    animation: tower-animation 3s steps(1) infinite;
    z-index: 3; /* Ensure tower is above clouds */
}

@keyframes tower-animation {
    0%, 49.9% {
        background-position: 0 0; /* First state (top half) */
    }
    50%, 100% {
        background-position: 0 -49px; /* Second state (bottom half) */
    }
}

/* Timer Display */
.timer-display {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 67px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 2px 2px 0 #000;
    z-index: 3; /* Above clouds */
}

/* Road Section */
.road-section {
    height: 45px;
    position: relative;
    position: absolute;
    left: 0%;    
    top: 94px;
    width: 100%;
    
    

}



.vehicles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ensure vehicles layer is above the road markings */
    z-index: 2;
}

/* Original static cars - these will be hidden once our animations are working */
.truck, .car {
    display: none; /* Hide the original static cars */
}

/* Animated cars */
.car-left-to-right {
    position: absolute;
    height: 30px;
    width: auto;
    z-index: 3;
    /* Will be positioned via JavaScript */
}

.car-right-to-left {
    position: absolute;
    height: 30px;
    width: auto;
    z-index: 2;
    /* Will be positioned 15px higher and flipped horizontally via JavaScript */
}

/* Power Line Section */
.power-line-section {
    height: 62px;
    display: flex;
    position:relative;
    justify-content: space-around;
    align-items: flex-end;
    position:relative;
}
.power-line-bolts{
    position:absolute;
    left:50px;
    top:20px;
    height:60px;
    width:44px;
    background: url('../assets/electricity-bolts.gif');
    background-size:contain;
    background-repeat:no-repeat;
}
.bolt-2{
    left:130px;
}
.bolt-3{
    left:210px;
}
.power-line-section img{
    height: 100%;
    width: auto;
}

.power-line {
    width: 20px;
    height: 60px;
    position: relative;
}

.power-line-svg {
    width: 100%;
    height: 100%;
}

/* Removed power-line meter labels */

/* Game Grid */
.game-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr); /* Equal size rows */
    height: 252px; /* Fixed height as requested */
    position:relative;
}

.grid-cell {
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Only horizontal grid lines */
    position: relative;
    min-height: calc(252px / 8); /* Force all cells to be exactly 1/8 of the grid height */
    height: calc(252px / 8);
    box-sizing: border-box; /* Include borders in size calculation */
}

.grid-cell::before {
    content: none; /* Remove the cell-based meter numbers */
}

.character {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 5;
}

/* Zap overlay styling */
#zap-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: none;
}

.zap-image-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}

.zap-cell {
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.zap-character-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    z-index: 1000;
    transform:scale(2);
    
}
.zap-3{
    transform-origin:50% 100%;
}


.obstacle {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: flex-end; /* Align to bottom */
    justify-content: center;
    z-index:6;
}

/* Bush images - smaller */
.obstacle img.bush-img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
}

/* Tree images - larger */
.obstacle img.tree-img {
    max-width: 150%;
    max-height: 150%;
    object-fit: contain;
    transform: translateY(0%); /* Move up slightly to center the visible part */
    transform-origin: bottom center; /* Transform from bottom up */
}

/* Game Controls */
.game-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: grid;
    grid-template-columns: repeat(3, 30px);
    grid-template-rows: repeat(3, 30px);
    grid-gap: 2px;
    z-index:10;
}

.control-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease-in-out;
    background-image:url('../assets/up-arrow.svg');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

.control-btn.active {
    background-image:url('../assets/up-arrow-pressed.svg');
}

.control-btn:active {
    background-image:url('../assets/up-arrow-pressed.svg');

}

.up-btn {
    grid-column: 2;
    grid-row: 1;
}

.left-btn {
    grid-column: 1;
    grid-row: 2;
    transform: rotate(-90deg);
}

.down-btn {
    grid-column: 2;
    grid-row: 3;
    transform: rotate(180deg);
}

.right-btn {
    grid-column: 3;
    grid-row: 2;
    transform: rotate(90deg);
}

/* Utility Buttons - Removed as requested */

/* Quantico Font */
.quantico-bold {
  font-family: "Quantico", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}

/* Result Screens */
.result-screen {
    position: absolute;
    top: 5%;
    left: 7%;
    width: 86%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    border: 4px solid white;
    box-sizing: border-box;
    display: none;
    padding: 20px 0;
    z-index:15;
    font-family: "Quantico", sans-serif !important; /* Apply Quantico font to all result screens */
    font-weight: 700;
}

/* First phase of win screen - orange background with large text */
.win-screen-phase1 {
    color: white;
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    justify-content:center;
}

.win-screen-phase1 .big-text {
    font-size: 48px;
    margin: 20px 0;
    letter-spacing: 4px;
}

.character-display {
    margin-top: 30px;
}

/* Character size in phase 1 */
.win-screen-phase1 .character-display img {
    width: 64px; /* Smaller size for the character */
    height: auto;
}

/* Second phase of win screen - dark blue/black background */
.win-screen-phase2 {
    background-color: rgba(0, 0, 20, 0.7); /* Dark blue, almost black */
    color: white;
}

.win-screen-phase2 h2,
.win-title {
    font-size: 30px;
    margin-bottom: 20px;
    line-height:1;
    color: yellow;
}

.win-screen-phase2 p,
.win-message,
.win-message-second {
    font-size: 16px;
    margin-bottom: 20px;
    padding: 0 18px;
    line-height: 1.5;
}

/* Custom styling for win message if needed */
.win-message {
    max-width: 100%;
    margin: 0 auto 20px;
}

.win-message-second {
    font-style: italic;
    margin-bottom: 10px;
}

.win-screen-phase2 .highlight {
    color: yellow;
    font-weight: bold;
}

.win-screen-phase2 .bottom-text {
    position: absolute;
    bottom: 25px;
    right: 30px;
    font-size: 16px;
    text-align:left;
    color: white;
    text-decoration: underline;
    text-transform: uppercase;
    cursor: pointer;
}

.win-screen-phase2 .character-display {
    position: absolute;
    bottom: 10px;
    width: 100px;
}

.win-screen-phase2 .character-display.center-aligned {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.win-screen-phase2 .character-display.left-aligned {
    left:0px;
    transform: none;
    text-align: left;
}

.win-screen-phase2 .character-display img {
    width: 80px; /* Larger for centered character */
    height: auto;
    margin: 0 auto;
    display: block;
}
.bright-orangebg{
     mix-blend-mode:hard-light;
    position:absolute;
    top:5%;
    left:7%;
    width:86%;
    height:90%;
    background:#FE6908;
    opacity:.9;
    display:none;
    z-index:11;
}
/* First phase of lose screen */
.lose-screen-phase1 {
    
   
    color: white;
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    justify-content:center;
}

.lose-screen-phase1 .big-text {
    font-size: 48px;
    margin: 20px 0;
    letter-spacing: 4px;
}

.lose-screen-phase1 .character-display img {
    width: 64px; /* Smaller size for the character */
    height: auto;
}

/* Second phase of lose screen */
.lose-screen-phase2 {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
}

.lose-screen-phase2 h2,
.lose-title {
    font-size: 30px;
    line-height:1;
    margin-bottom: 8px;
    text-transform:uppercase;
    color: #FFFE05;
}

/* Message in lose screen */
.lose-message {
    font-size: 16px;
    max-width: 100%;
    margin: 0 auto 12px;
    line-height: 1.5;
    padding: 0 12px;
    white-space: pre-line; /* Preserves line breaks in message text */
}

.lose-screen-phase2 .character-display {
    position: absolute;
    bottom: 10px;
    width: 100px;
}

.lose-screen-phase2 .character-display.center-aligned {
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.lose-screen-phase2 .character-display.left-aligned {
    left: 0px;
    transform: none;
    text-align: left;
}

.lose-screen-phase2 .character-display img {
    width: 80px; /* Larger for centered character */
    height: auto;
    margin: 0 auto;
    display: block;
}

.lose-screen-phase2 .bottom-text {
    position: absolute;
    bottom: 25px;
    right: 30px;
    font-size: 16px;
    text-align:left;
    color: white;
    text-decoration: underline;
    text-transform: uppercase;
    cursor: pointer;
}

.result-btn {
    padding: 0px 8px;
    font-size: 18px;
    background-color: #FF8C00; /* Dark orange */
    box-shadow: 0 0px 3px 2px #FFF;
    color: #FEFE05;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 700;
    margin-top: 0px;
    text-transform: uppercase;
}

.result-btn:hover {
    background-color: #FFC107;
}

/* Meter labels on the left side */
.meter-labels {
    position: absolute;
    left: 15px;
    bottom: 33px; /* Position at the top of the game grid (header(60) + timer(30) + power line(62) - 5px offset) */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Start from the top (near power lines) */
    height: 252px; /* Match the height of the game grid */
    color: white;
    text-shadow: 1px 1px 1px #000, 1px 1px 1px #000;
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
    z-index: 10; /* Ensure labels appear above other elements */
}

/* Danger Zone Indicator */
.danger-zone {
    position: absolute;
    top: 147px; /* Same as meter labels */
    left: 0;
    width: 100%;
    height: 98px; /* 3 grid cells worth of height (262 / 8 * 3) */
    pointer-events: none;
display:none;
    border-bottom: 2px dashed rgba(255, 0, 0, 0.5);
}

/* Sound Toggle Button */
.sound-toggle {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 24px;
    height: 24px;
    border:none;
    padding:0;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

.sound-toggle:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.sound-toggle:focus-within {
    outline:none;
}

.sound-toggle svg {
    width: 24px;
    height: 24px;
}

/* Animation for sound toggle button */
.toggle-animation {
    animation: pulse 0.3s ease-in-out;
}

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