/* ------------------------- */
/* --   Global Styles      --*/
/* ------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    touch-action: manipulation;
    -ms-touch-action: manipulation; /* For Internet Explorer */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--gray-75); /* #f5f5f5 */
}

/* ------------------------- */
/* --      Layout           --*/
/* ------------------------- */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Ensures items wrap on smaller screens */

    background-color: var(--gray-100);
    padding: 0px 12px;
    border-bottom: 1px solid var(--gray-300);
    }
}

.header .button-bar {
    display: flex;
    gap: 10px; /* Space between buttons */
}

.action-bar {
    display: flex;
    gap: 12px;
}

.header-action {
    font-size: 24px;
    padding: 4px;
    cursor: pointer;
}

.stats {
    font-size: 13px;
    color: var(--gray-600);
    background-color: var(--gray-0);
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    gap: 0px;
    flex-direction: column;
    align-items: center;
    line-height: 18px;
}
.stats span{
    font-weight: 900;
    color: var(--gray-800);
}

.content{
    padding: 20px;
    }
.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    height: 50px;
}

.letter-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;

    user-select: none; /* Prevent text selection on double-tap */
    -webkit-user-select: none; /* Safari */
    -webkit-touch-callout: none; /* Disable callout (e.g., copy/paste) */
}

.letter-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    width: 100%; /* Ensures rows take full width of the container */
}


/* ------------------------- */
/* --      Components       --*/
/* ------------------------- */

/* Title */
.title {
    font-size: 24px;
    font-weight: bold;
}

/* Buttons */
.view-result-btn,
.guess-now-btn,
.final-guess-btn {
    background-color: var(--blue-600);
    color: var(--gray-0); /* white */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    margin-left: 10px; /* Align with other buttons in the header */
}
.view-result-btn{
    background-color: var(--green-600);
}
.view-result-btn:hover{
    background-color: var(--green-700);
}


.guess-now-btn:hover:not(:disabled),
.final-guess-btn:hover:not(.inactive) {
    background-color: var(--blue-700);
}

.guess-now-btn.inactive,
.final-guess-btn.inactive {
    background-color: var(--gray-300);
    cursor: not-allowed;
    opacity: 0.7;
}

.guess-now-btn:disabled,
.final-guess-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Clue and Word Displays */
.clue-display {
    background-color: var(--gray-800); /* #4b5563 */
    color: var(--gray-0); /* white */
    padding: 10px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

.word-display {
    background-color: var(--gray-0); /* white */
    padding: 16px 4px;
    border-radius: 0 0 8px 8px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

.word-display.win {
    background-color: var(--green-100); /* #ecfdf5 */
    border: 2px solid var(--mint-500); /* #41C0AA */
}

.word-display.lose {
    border: 2px solid var(--raspberry-600); /* #E56996 */
}

.word {
    font-family: monospace;
    font-size: 32px;
    letter-spacing: 2px;
}

.word-wrapper {
    display: inline-block;
    margin: 0 5px;
}

.word-group {
    display: inline-block; /* Keep all letters in one word together */
    white-space: nowrap;   /* Prevent internal wraps */
    margin-right: 0.25em;  /* Optional spacing between word groups */
}
.word-space {
    display: inline-block;
    width: 18px;
}

/* Letters */
.letter {
    display: inline-block;
    padding: 0px 0px 0px 4px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.5s ease, opacity 0.5s ease;
}

/* Class to trigger the reveal animation */
.letter-reveal {
    animation: revealLetter 0.5s forwards;
}

@keyframes revealLetter {
    0% {
        border: 2px solid var(--blue-600);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        border: 2px solid transparent;
        opacity: 1;
    }
}



/* New Letter Reveal Animation */
@keyframes letterReveal {
    0% {
        border: 2px solid transparent;
        background-color: transparent;
    }
    60% {
        border: 2px solid var(--gray-300);
        color: var(--gray-800);
        background-color: var(--gray-50);
    }
    100% {
        border: 2px solid transparent;
        background-color: transparent;
    }
}

.word-display.thinking .letter {
    animation: letterReveal 0.2s ease-out forwards;
    animation-delay: var(--delay);
    display: inline-block; /* Ensure transform affects each letter individually */
}


.letter.guess.incorrect-letter {
    color: var(--red-600);
}
/*.letter.guess.correct-letter {
    color: var(--blue-800);
}*/
/*.letter.guess.bought-letter {
    color: var(--green-600);
}*/

.letter.guess.bought-letter {
    text-decoration: none;
    color: var(--gray-800);
    font-weight: 400;
}

.final-incorrect {
    color: red !important;
}


.letter.guess {
    color: var(--blue-600); /* Choose a color that stands out */
    font-weight: 600;
    text-decoration: underline; /* Optional: Adds underline for emphasis */
}

.letter.guessed {
    color: var(--mint-500); /* #41C0AA */
    font-weight: bold;
}

.letter.final-guess-letter { /* Updated class name */
    color: var(--blue-600); /* #6366f1 */
    font-weight: bold;
    display: inline-block;
}

.letter.unguessed {
    color: var(--raspberry-600); /* #E56996 */
    font-weight: bold;
}

.letter.bonus-letter {
    background-color: var(--yellow-400); /* #FBD185 */
    color: var(--gray-1000); /* black */
    border-radius: 4px;
}

.letter.active {
    border: 2px solid var(--blue-600); /* Blue outline to indicate active slot */
    border-radius: 4px;                /* Rounded corners for better aesthetics */
    box-shadow: 0 0 5px var(--blue-600); /* Optional: Add a subtle glow */
}

.letter.active:not(.guess) {
    background-color: var(--blue-100); /* Light blue background */
}

.letter-grid .letter-btn {
    background-color: var(--gray-300);
    color: var(--gray-1000); /* black */
    border: none;
    padding: 8px 4px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.8s ease, box-shadow 0.8s ease, filter 0.8s ease;
    flex: 1 1 0;              /* Allows the button to grow and shrink equally */
    max-width: 40px;          /* Ensures the button does not exceed 40px */
    width: 100%;              /* Allows the button to take full width of its flex container */
    box-sizing: border-box;   /* Ensures padding and border are included in the width */
}






.letter-btn span {
    display: block;
    line-height: 1.2;
}

.letter-btn .letter-value {
    font-size: 16px;
    font-weight: 600;
}

.letter-btn .letter-cost {
    font-size: 12px;
    font-weight: 200;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
}

/*.letter-btn:hover:not(:disabled) {
    background-color: var(--gray-500);
}*/

.letter-btn:disabled {
    cursor: default;
}

.letter-btn.hint-btn,
.letter-btn.back-btn {
    display: none;
    background-color: var(--gray-600);
    color: var(--gray-0);
    max-width: 60px;
    }

    .letter-btn.back-btn i {
        font-size: 24px;
    }

    .letter-btn.guessed-invalid {
        background-color: var(--red-300);
        color: var(--gray-1000);
        cursor: default;
    }

    .letter-btn.guessed-valid {
        background-color: var(--green-300);
        color: var(--gray-1000);
    }


.locked .letter-btn {
    background-color: var(--gray-600); /* #c8c8c8 */
    color: var(--gray-0); /* Black */
    cursor: pointer;
}

.locked .letter-btn .letter-cost {
    color: transparent;
}


.locked .letter-btn.hint-btn,
.locked .letter-btn.back-btn {
    display: flex;
}

.locked .letter-btn.hint-btn {
    color: var(--gray-0);
    background-color: var(--blue-600);
}



.locked .dimmed{
    cursor: default;
    color: var(--gray-400);
    background-color: var(--gray-700);
    opacity: 0.3;
}
/*.locked .letter-btn:disabled{
    opacity: 0.3;
}*/

.locked .hinted.dimmed {
    color: var(--green-300);
}


.locked .letter-btn.guessed-invalid {
    cursor: default;
/*    color: var(--red-300);*/
    color: var(--gray-500);
    background-color: var(--gray-700);
    opacity: 0.3;
}
.locked .letter-btn.guessed-valid,
.locked .guessed-valid {
    cursor: default;
    background-color: var(--gray-700);
    color: var(--gray-500);
    opacity: 0.3;
/*    color: var(--green-300);
    background-color: var(--green-300);*/
}

/* Final Guess */
.final-guess-container {
    display: none;
    padding: 8px;
    background-color: var(--gray-0);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    text-align: center;
    font-size: 17px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    margin-bottom: 20px;
    height: 46.5px;
}

.final-guess-container p:first-child {
    color: var(--blue-700); /* Consistent with other instructional text */
}

#finalGuessText.hidden {
    display: none;
}

#finalGuessResult {
    font-size: 16px;
    color: var(--raspberry-600); /* Use appropriate color based on result */
}

#finalGuessResult.win {
    color: var(--green-600);
}

.final-guess {
    display: none;
    margin-bottom: 20px;
    padding: 15px;
    background-color: var(--gray-0); /* #ffffff */
    border: 2px solid var(--gray-300); /* #d1d5db */
    border-radius: 8px;
}

.final-guess.active {
    display: block;
}

.final-guess-title {
    font-weight: 600;
}

.final-guess input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--gray-300); /* #d1d5db */
    border-radius: 4px;
    font-size: 16px; /* Prevent mobile zoom */
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.1em;
}

.final-guess button {
    font-size: 16px;
    width: 100%;
    background-color: var(--mint-500); /* #41C0AA */
    color: var(--gray-0); /* white */
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.final-guess button:hover {
    background-color: var(--green-700); /* #059669 */
}

/* Token Display */
.token-display {
    position: relative;
    padding: 0px 5px;
    border-radius: 4px;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-flex;
    text-align: center;
    align-items: center;
    gap: 6px;
    color: var(--blue-800);
}

.token-change {
    position: absolute;
    right: -8px;
    top: 0;
    transform: translateX(-50%);
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    pointer-events: none; /* Allow clicks to pass through */
}

.token-change.up {
    animation: tokenUp 1s forwards;
}

.token-change.down {
    animation: tokenDown 1s forwards;
}

.token-display .token-change {
    z-index: 10; /* Ensure animations appear above other elements */
}

/* Game Messages */
.game-message {
    font-size: 16px;
    color: var(--slate-700);
    padding: 8px;
}

.remaining-letters {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 10px;
    justify-content: center;
}

.remaining-letters .letter-box {
    width: 20px;
    height: 20px;
    border-radius: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    color: var(--slate-900); /* #1f2937 */
}


      .confetti-container {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          pointer-events: none; /* Allows clicks to pass through */
          overflow: hidden;
          z-index: 2000; /* Ensures confetti appears above all other elements */
      }
      .confetti {
          position: absolute;
          top: -10px;
          width: 10px;
          height: 10px;
          background-color: var(--blue-600);
          border-radius: 50%;
          opacity: 0.1;
          animation: fall 2s forwards;
      }
      /* Randomize colors for confetti flakes */
      .confetti:nth-child(1) { background-color: #FFC107; }
      .confetti:nth-child(2) { background-color: #28A745; }
      .confetti:nth-child(3) { background-color: #17A2B8; }
      .confetti:nth-child(4) { background-color: #DC3545; }
      .confetti:nth-child(5) { background-color: #6F42C1; }

      @keyframes fall {
          0% {
              transform: translateY(0) rotate(0deg);
              opacity: 1;
          }
          100% {
              transform: translateY(400px) rotate(360deg);
              opacity: 0;
          }
      }

/* Hide elements */
.hidden {
    display: none !important;
}

.dimmed {
    opacity: 0.5;
    cursor: not-allowed;
}

.letter-grid .letter-btn.dimmed:disabled {
    color: var(--gray-500);
}

/* ------------------------- */
/* --      States           --*/
/* ------------------------- */

.letter.guessed.active,
.letter.guess.active {
    border: 2px solid var(--blue-600);
    /* Additional styles can be added if needed */
}

/* Add more colors as needed */

/* ------------------------- */
/* --      Animations       --*/
/* ------------------------- */

@keyframes tokenUp {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -40px); }
}

@keyframes tokenDown {
    0% { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, 40px); }
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-10px);}
  60% {transform: translateY(-5px);}
}

.bounce {
    animation: bounce 0.8s;
}

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

.shake {
    animation: shake 0.6s;
}

/* ------------------------- */
/* --   Responsive Styles   --*/
/* ------------------------- */

@media (max-width: 600px) {

    .header {
        flex-direction: row; /* Ensure header stays in row */
        align-items: center; /* Center items vertically */
        justify-content: space-between; /* Maintain space between title and buttons */
        flex-wrap: wrap; /* Allows items to wrap if necessary */
    }

    .content{
        padding: 12px;
    }
    .button-bar {
        display: flex;
        gap: 10px; /* Consistent spacing between buttons */
    }

    .view-result-btn,
    .guess-now-btn {
        margin: 5px 0; /* Adjust margins if needed */
    }

    .title {
        font-size: 20px;
    }

    .clue-display {
        font-size: 16px;
        padding: 8px;
    }

    .word {
        font-size: 24px;
    }

    .letter-row {
        gap: 6px;
    }

    .letter-btn {
        padding: 6px 3px;
        box-shadow: 0 0px transparent;
    }

    .letter-btn:active {
        /* Reduce the box-shadow to simulate being pressed */
        box-shadow: 0 1px 2px var(--gray-500);
        /* Change background color or opacity */
        filter: brightness(0.8);
        opacity: 0.9;
    }

    .final-guess input {
        font-size: 16px; /* Ensures font size is sufficient to prevent zoom */
    }

    .remaining-letters .letter-box {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }
}

/* ------------------------- */
/* --   Bookmark Prompt    --*/
/* ------------------------- */

.bookmark-prompt {
    max-width: 50%;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 15px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: var(--gray-0);
    animation: slideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
    transform: translateX(-100%);
}

.bookmark-body {
    font-size: 14px;
    color: var(--gray-850);
    margin-bottom: 12px;
    display: flex;
    align-items: start;
    gap: 8px;
}


.icon-wrapper {
    flex-shrink: 0;
    padding: 5px 0px;
}
.bookmark-prompt .icon-bookmark {
    font-size: 20px;
}

.text-wrapper {
    flex-grow: 1;
}

.bookmark-dismiss-btn {
    color: var(--gray-0);
    background-color: var(--raspberry-600);
    border: none;
    padding: 12px 12px;
    min-width: 100%;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.bookmark-dismiss-btn:hover {
    background-color: var(--raspberry-700);
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    60% {
        transform: translateX(10px);
    }
    80% {
        transform: translateX(-5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideOut {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}


/* ------------------------- */
/* --   Color Variables    --*/
/* ------------------------- */

:root {
    /* Color styles */
    --gray-0: #FFFFFF;
    --gray-25: #FCFCFC;
    --gray-50: #FCFCFC;
    --gray-75: #F5F5F5;
    --gray-100: #EDEDED;
    --gray-200: #E4E5E6;
    --gray-300: #D4D6D9;
    --gray-400: #BDC3C9;
    --gray-500: #A2A8B0;
    --gray-600: #828A94;
    --gray-700: #697380;
    --gray-800: #4E5A6B;
    --gray-850: #303B4C;
    --gray-900: #0A1B36;
    --gray-950: #061121;
    --gray-1000: #000000;
    --red-900: #7A1E14;
    --red-800: #961F11;
    --red-700: #C93626;
    --red-600: #E05444;
    --red-500: #F06F60;
    --red-400: #EF8A7F;
    --red-300: #F7A399;
    --red-200: #FBC4BE;
    --red-100: #FCEDEB;
    --orange-900: #7E4408;
    --orange-800: #B96613;
    --orange-700: #D97E24;
    --orange-600: #F39A41;
    --orange-500: #F5A95C;
    --orange-400: #FBBD7E;
    --orange-300: #FFD2A5;
    --orange-200: #FFE3C7;
    --orange-100: #FFF2E5;
    --yellow-900: #704800;
    --yellow-800: #C77A0F;
    --yellow-700: #E5981C;
    --yellow-600: #F3B441;
    --yellow-500: #F8C363;
    --yellow-400: #FBD185;
    --yellow-300: #FFE2AD;
    --yellow-200: #FFEBC7;
    --yellow-100: #FFF6E7;
    --green-900: #134A36;
    --green-800: #186146;
    --green-700: #207D5E;
    --green-600: #28AB7D;
    --green-500: #41BF93;
    --green-400: #62CEA8;
    --green-300: #87E1C2;
    --green-200: #BAECDA;
    --green-100: #E7FFF6;
    --mint-900: #134C41;
    --mint-800: #1A6758;
    --mint-700: #207D6D;
    --mint-600: #28AB94;
    --mint-500: #41C0AA;
    --mint-400: #6AD1BF;
    --mint-300: #93D7CB;
    --mint-200: #ACE9DE;
    --mint-100: #E0FDF8;
    --teal-900: #134A4D;
    --teal-800: #1A6367;
    --teal-700: #20757D;
    --teal-600: #28A2AB;
    --teal-500: #5BBAC0;
    --teal-400: #77C5CB;
    --teal-300: #A4D9DD;
    --teal-200: #B6E6EA;
    --teal-100: #E5FDFF;
    --blue-900: #29435C;
    --blue-800: #395D80;
    --blue-700: #5082B2;
    --blue-600: #63A0DC;
    --blue-500: #8CB9E4;
    --blue-400: #A0C9F0;
    --blue-300: #BAD6F3;
    --blue-200: #C6DDF3;
    --blue-100: #ECF6FF;
    --slate-900: #304559;
    --slate-800: #3C5870;
    --slate-700: #496B8A;
    --slate-600: #5C87AD;
    --slate-500: #7BA6CC;
    --slate-400: #8CB0CF;
    --slate-300: #9EBCD5;
    --slate-200: #ADCBE5;
    --slate-100: #E8F0F8;
    --purple-900: #2E3A57;
    --purple-800: #3D4D73;
    --purple-700: #4C608F;
    --purple-600: #5C74AD;
    --purple-500: #768CBF;
    --purple-400: #899AC2;
    --purple-300: #9CAACD;
    --purple-200: #B0BBD4;
    --purple-100: #EBF0FC;
    --raspberry-900: #692A41;
    --raspberry-800: #8F415E;
    --raspberry-700: #BA4A73;
    --raspberry-600: #E56996;
    --raspberry-500: #EB84A9;
    --raspberry-400: #F58AB1;
    --raspberry-300: #F9A0C0;
    --raspberry-200: #FEB9D2;
    --raspberry-100: #FEEFF5;
    --pink-900: #842929;
    --pink-800: #BB3737;
    --pink-700: #E15656;
    --pink-600: #FC7272;
    --pink-500: #FF8F8F;
    --pink-400: #FB9595;
    --pink-300: #FCAEAE;
    --pink-200: #FDC6C6;
    --pink-100: #FFEFEF;
    --peach-900: #8D3B0F;
    --peach-800: #B85520;
    --peach-700: #DB7F4E;
    --peach-600: #FC9A65;
    --peach-500: #FDB791;
    --peach-400: #FFC3A3;
    --peach-300: #FFD2BA;
    --peach-200: #FFDCC9;
    --peach-100: #F8F1E8;

    /* Gradient Variables */
    --gradient-body-background: linear-gradient(180deg, #F0F1F1 0%, #CFD9DA 52.6%, #B1C1C9 100%);
    --gradient-content-area: linear-gradient(180deg, #F8F9F8 0%, #E9EAE7 100%);
    --gradient-card-background: linear-gradient(180deg, #FCFCFC 0%, #FCFCFC 100%);
    --gradient-entity-header-vignette: linear-gradient(325deg, rgba(48, 69, 89, 0.00) 40%, rgba(48, 69, 89, 1) 100%);
    --gradient-modal-background: linear-gradient(112deg, rgba(255, 255, 255, 0.20) 0%, rgba(0, 0, 0, 0.20) 99.45%), rgba(6, 17, 33, 0.60);
    --gradient-modal-content: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%), var(--gray-0);
}
/* ------------------------- */
/* -- End of CSS           --*/
/* ------------------------- */