/* style.css */

body * {
    /* prevent double tap zoom */
    touch-action: manipulation;

    /* Prevent text selection */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Scale up the text and elements */
body {
    font-size: 18px; /* Larger base font size */
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2em; /* Larger title */
}

#game-container {
    max-width: 50%; /* Add some padding around the game container */
    margin: auto;
}

#reset {
    padding: 10px 20px; /* Larger button */
    font-size: 1.1em; /* Larger button text */
}

hr {
    border-color: #ddd; /* Color for dividing line */
    border-width: 2px; /* Thickness of the line */
    margin: 10px 0; /* Spacing around the line */
}

/* Dividing Line and Title Font */
#hotbar {
    background-color: #fff;
    color: #000;
    padding: 10px;
    display: flex;
    justify-content: space-between; /* Center title */
    align-items: center;
    border-bottom: 0.1px solid #cecece;
    position: relative; /* Needed for absolute positioning of settings button */

    font-family: 'Libre Baskerville', serif;
    font-weight: bold; /* Thick font */
}

#hotbar h1 {
    margin: 0;
    font-size: 1.5em;
}

#hotbar .buttons {
    display: flex;
    align-items: center; /* Ensures vertical alignment of buttons */
    /* No need for 'right: 0%' as flexbox will handle the positioning */
}

#help-button, #settings-button, #details-button, #share-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px; /* Adds spacing between buttons */
    width: 30px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
}

#settings-button {
    background: url('./img/settings.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

#details-button {
    background: url('./img/stats.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

#help-button {
    background: url('./img/help.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

#share-button {
    background: url('./img/share.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */

    width: 25px; /* Adjust as needed */
    height: 25px; /* Adjust as needed */

    align-self: flex-end;
}

#editor-button {
    border-radius: 5px; /* Rounded corners */
    background-color: #6AAA64; /* Light gray background */
    color: #FFFFFF;
    outline: none; /* No outline */
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */
    
    display: inline-flex; /* Use flex for better centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 60px; /* Fixed width */
    height: 40px; /* Fixed height */
    margin: 2px; /* Increase spacing between keys */
    padding: 4px; /* Adjust padding */
    cursor: pointer;
    text-align: center; /* Center text */
    vertical-align: middle; /* Align inline-block elements in the middle */
}

.hotbar-spacer {
    /* Mimic the width of the buttons container */
    width: 95px;
    height: 1px; /* Minimal height */
    visibility: hidden; /* Make it invisible */
}

/* Settings Styles */
.settings {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.settings-content {
    background: #fff;
    margin: 7% auto;
    padding: 20px;
    width: 70%;
    max-width: 400px;
    border-radius: 5px;
}

.settings-option {
    margin-top: 40px;
    display: flex;
    align-items: center; /* Aligns items vertically in the center */
    justify-content: space-between; /* Spreads the items across the container */
    padding: 10px 0; /* Adds some padding above and below each option */
}

.settings-option h2 {
    margin: 0; /* Removes default margin */
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */
}

.instruction-content {
    background: #fff;
    margin: 7% auto;
    padding: 20px;
    width: 70%;
    max-width: 400px;
    border-radius: 5px;
}

.instruction-content p {
    margin: 7px;
}

.instruction-content .center {
    padding: 2px;
    display: flex;
    justify-content: center; /* Center title */
    align-items: center;
}
.instruction-content h2 {
    margin: 0; /* Removes default margin */
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */
}

.instruction-content .num-img, .life-img, .key-img, .lock-img, .empty-img {
    background: none;
    border: none;
    display: inline-block;
    vertical-align: middle;
}

.instruction-content .empty-img {
    background: url('./img/help/empty.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */

    width: 30px; /* Adjust as needed */
    height: 35px; /* Adjust as needed */
}

.instruction-content .num-img {
    background: url('./img/help/number.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */

    width: 30px; /* Adjust as needed */
    height: 35px; /* Adjust as needed */
}

.instruction-content .life-img {
    background: url('./img/help/lives.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */

    width: 35px; /* Adjust as needed */
    height: 25px; /* Adjust as needed */
    margin: 5px;
}

.instruction-content .key-img {
    background: url('./img/help/green_letter.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */

    width: 40px; /* Adjust as needed */
    height: 30px; /* Adjust as needed */
    margin: 5px;
}

.instruction-content .lock-img {
    background: url('./img/help/lock.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */

    width: 30px; /* Adjust as needed */
    height: 35px; /* Adjust as needed */
}

.close-btn {
    float: right;
    font-size: 1.5em;
    cursor: pointer;
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #6AAA64;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #6AAA64;
  }
  
  input:checked + .slider:before {
    transform: translateX(26px);
  }
  

  .title-and-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Popup Base Styles */
.popup {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0); /* Start with transparent white background */
    z-index: 1000;
    align-items: top; /* Aligns the content to the center vertically */
    justify-content: center; /* Center content horizontally */
    opacity: 0; /* Start with no opacity */
    visibility: hidden; /* Start with no visibility */
    transition: opacity 0.5s, visibility 0.5s, transform 0.5s; /* Transition for fade and slide */
}

.popup-content {
    padding: 20px;
    width: 80%;
    max-width: 400px;
    margin-top: 100px;
   /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for better contrast */
    transform: translateY(100vh); /* Start below the screen */
    transition: transform 0.5s;
}

/* Shown Popup Styles */
.popup.show {
    display: flex;
    opacity: 1; /* Fade to full opacity */
    visibility: visible; /* Make visible */
    background: rgba(255, 255, 255, 1); /* Fade to white background */
}

.popup-content.show {
    transform: translateY(0); /* Slide up to show */
}

/* Content Styles */
#decoded-message {
    /* Styles for the decoded message */
    margin-top: 80px;
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */
}

#guest {
    /* Styles for the decoded message */
    text-align: center;
    margin-top: 80px;
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 0.9em; /* Larger key text */
}

#message-source {
    /* Styles for the source */
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 0.8em; /* Larger key text */
    text-align: right;
    left: 90%;
    display: block;
    margin: 0;
    color: #6AAA64;
    text-decoration: none;
    cursor: pointer;
}


#popup-title {
    text-align: center;
    /*font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 0.8em; /* Larger key text */
    text-align: left;
    left: 0%;
    margin-top: 60px;
}

#game-stats {
    /* Styles for the game stats section */
    background-color: #6AAA64;
    color: white;
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    padding: 20px;
    border-radius: 5px;

    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.0em; /* Larger key text */
}

#details-popup #game-stats {
    /* Styles for the game stats section */
    background-color: #787C7E;
}

/* Alert message */

#message-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: -100px; /* Initially positioned off-screen */
    left: 0;
    right: 0;
    background-color: #f44336; /* Default color, red */
    color: white;
    padding: 10px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
    z-index: 1001;
    transition: top 0.5s ease;

    font-family: Arial, sans-serif;
    font-weight: bold; /* Thick font */
}

#message-container.show {
    top: 0; /* Slide down to show */
}

/* Game Style */
#verse {
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */

    padding-top: 15px;
}

#game-container {
    text-align: center;
    font-family: Arial, sans-serif;
}

#sentence {
    margin: 20px;
    font-size: 24px;
}

.cell {
    background: white;
    display: inline-block;
    width: 30px; /* Wider cells */
    height: 60px; /* Taller cells */
    margin: 2px; /* Adjust margin as needed */
    vertical-align: top; /* Aligns content to the top */
}

.cell.locked-1, .cell.locked-2 {
    margin-bottom: 20px;
}

.cell.locked-1 {
    background: url('./img/lock.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.cell.locked-2 {
    background: url('./img/double_lock.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.cell.locked-1.christmas {
    background: url('./img/christmas/lock.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.cell.locked-2.christmas {
    background: url('./img/christmas/double_lock.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.letter {
    display: block;
    height: 35px; /* Height for the letter part */
    line-height: 35px; /* Centers the letter vertically */
    font-family: 'Arial', sans-serif; /* Example font, choose as per your preference */
    font-weight: bold; /* Thick font */
    font-size: 1.1em; /* Larger key text */

    text-transform: uppercase; /* All capitals */
    color: #000000; /* Dark gray for the text */
}

.underlined .letter {
    border-bottom: 2px solid #333; /* Dark gray underline */
}

.number {
    display: block;
    font-size: 12px; /* Smaller font for the number */
    height: 20px; /* Height for the number part */
    line-height: 20px; /* Centers the number vertically */
}

.solved .letter{
    background-color: #6AAA64;
    color: white;
}

.selected {
    outline: 2px solid #6AAA64;
}

.keyboard-row {
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.key {
    border-radius: 5px; /* Rounded corners */
    background-color: #D3D6DA; /* Light gray background */
    outline: none; /* No outline */
    font-weight: bold; /* Thick font */
    font-family: 'Nunito', sans-serif; /* Example font, choose as per your preference */
    font-size: 1.1em; /* Larger key text */
    
    display: inline-flex; /* Use flex for better centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    width: 30px; /* Fixed width */
    height: 40px; /* Fixed height */
    margin: 2px; /* Increase spacing between keys */
    padding: 4px; /* Adjust padding */
    cursor: pointer;
    text-align: center; /* Center text */
    vertical-align: middle; /* Align inline-block elements in the middle */
}


.key:active {
    background-color: lightgrey;
}

.key.more {
    background-color: #6AAA64;
    color: #FFFFFF;
}

.key.complete {
    background-color: #787C7E;
    color: #FFFFFF;
    pointer-events: none;
}

/*
.key.pressed {
    filter: brightness(75%);
}*/

#keyboard {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff; /* Or any color that fits your design */
    /*box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Optional: adds a slight shadow for better visibility */
    z-index: 100; /* Ensure it's above other content */
}

#lives {
    position: fixed;
    padding: 5px;
    bottom: 165px; /* Adjust this value */
    left: 0;
    width: 100%;
    height:20px;
    background-color: #fff; /* Match the keyboard color */
    z-index: 100;

    display: flex;
    justify-content: center;
    /*margin-bottom: 10px; /* Space above the keyboard */
}

.life {
    width: 15px; /* Size of the circle */
    height: 15px; /* Size of the circle */
    border-radius: 50%; /* Make it round */
    background-color: #6AAA64; /* Default color for an active life */
    margin: 0 5px; /* Spacing between circles */
}

.life.lost {
    background-color: #787C7E; /* Color for a lost life */
}

/* Animations */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Dark Theme */
.dark {
    background-color: #121213; /* Example dark background */
}

.dark #hotbar {
    background-color: #121213; 
    color: white;
    border-bottom: 0.1px solid #333333;
}

.dark .cell {
    background-color: #121213; 
}

.dark .cell.locked-1 {
    background: url('./img/lock_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.dark .cell.locked-2 {
    background: url('./img/double_lock_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.dark .cell.locked-1.christmas {
    background: url('./img/christmas/lock_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.dark .cell.locked-2.christmas {
    background: url('./img/christmas/double_lock_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size:contain; /* or 'contain' depending on your preference */
}

.dark .letter {
    color: #ffffff; /* Dark gray for the text */
}

.dark .underlined .letter {
    border-bottom: 2px solid #ffffff; /* Dark gray underline */
}

.dark .number {
    color: white;
}

.dark #settings-button {
    background: url('./img/settings_light.png') no-repeat center center;
    background-size: cover;
}

.dark #details-button {
    background: url('./img/stats_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

.dark #help-button {
    background: url('./img/help_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

.dark #share-button {
    background: url('./img/share_light.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: cover; /* or 'contain' depending on your preference */
}

.dark .instruction-content {
    background: #121213;
    color: white;
}

.dark .popup {
    background: rgba(18, 18, 19, 0);
}

/* Shown Popup Styles */
.dark .popup.show {
    background: rgba(18, 18, 19, 1); /* Fade to white background */
}

/* Content Styles */
.dark #decoded-message {
    color: white;
}

.dark #guest {
    color: white;
}

.dark #popup-title {
    color: white;
}

.dark .close-btn {
    color: white;
}

.dark .settings-content {
    background: #121213;
}

.dark .settings-option h2 {
    color: white;
}

.dark #keyboard {
    background: #121213;
}

.dark #lives {
    background: #121213;
}

.dark #verse {
    color: white;
}

.dark .instruction-content .empty-img {
    background: url('./img/help/empty_dark.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */
}

.dark .instruction-content .num-img {
    background: url('./img/help/number_dark.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */
}

.dark .instruction-content .life-img {
    background: url('./img/help/lives_dark.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */
}

.dark .instruction-content .key-img {
    background: url('./img/help/green_letter_dark.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */
}

.dark .instruction-content .lock-img {
    background: url('./img/help/lock_dark.png') no-repeat center center; /* Path to your .jpg icon */
    background-size: contain; /* or 'contain' depending on your preference */
}

@media screen and (max-width: 768px) {
    /* Styles for tablets and smaller screens */
    #game-container {
        /* Adjust styles for smaller screens */
        max-width: 95%; /* Add some padding around the game container */
        padding: 10px; /* Example: Add padding */
    }

    .cell {
        background: white;
        display: inline-block;
        width: 7%; /* Wider cells */
        height: 50px; /* Taller cells */
        margin: 2px; /* Adjust margin as needed */
        vertical-align: top; /* Aligns content to the top */
    }

    .letter {
        height: 35px; /* Height for the letter part */
        line-height: 35px; /* Centers the letter vertically */
        font-size: 0.9em; /* Larger key text */
    }

    .number {
        font-size: 11px; /* Smaller font for the number */
        height: 12px; /* Height for the number part */
        line-height: 12px; /* Centers the number vertically */
    }

    .key {
        /* Example: Make keys larger for touch interaction */
        width: 50px;
        height: 50px;
        font-size: 1.5em;
    }

    #lives {
        bottom: 195px; /* Adjust this value */
    }

    /* Add more adjustments as necessary */
}

/* Spinner */

.spinner {
    border: 3px solid rgb(255, 255, 255);
    border-top: 3px solid #E54D2B;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
    display: none;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }