/* ---------  thefive_styles.css --------- */

  :root {
    --grid-size: 5;
    --cell-size: 52px;
    --cell-gap: 4px;
    --bg-color: var(--gray-0);
    --accent-color: var(--green-600);
    --light-grey: var(--gray-300);
    --dark-grey: var(--gray-850);
    --font-family: "Helvetica Neue", Arial, sans-serif;
    --transition-speed: 0.2s;
  }

  /* ------------------------- */
  /* --   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;
  }

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

  .game-message {
    text-align: center;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.4;
    padding: 0px 12px;
  }

.heading {
    display: flex;
    width: 276px;
    flex-direction: row;
    justify-content: space-between;
}
.theme {
    font-size: 1.2rem;
    margin-bottom: 16px;
    font-weight: bold;
}
.timer {
    font-size: 1.2rem;
    margin-bottom: 16px;
    font-weight: bold;
    text-align: right;
}

  .game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px 12px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size), var(--cell-size));
    grid-template-rows: repeat(var(--grid-size), var(--cell-size));
    gap: var(--cell-gap);
    touch-action: manipulation;
    margin-bottom: 24px;
  }

  .cell {
    width: var(--cell-size);
    height: var(--cell-size);
    background-color: var(--gray-300);
    border: 1px solid var(--gray-400);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-family: monospace;
    font-weight: bold;
    user-select: none;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    color: var(--gray-800);
  }

  .grid.success .cell:empty {
    color: transparent;
    background-color: transparent;
    transition: background-color 0.5s ease, border 0.5s ease;
  }

  .grid.success .cell:not(:empty) {
    color: var(--gray-0);
    background-color: var(--green-600);
    transition: background-color 0.5s ease, border 0.5s ease;
  }

  .cell.selected-row {
    background-color: var(--green-300);
  }

  .cell.selected-col {
    background-color: var(--blue-300);
  }

  .wordlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    max-width: 100%;
    min-width: 350px;
  }

  .wordlist h2 {
    margin: 8px 0;
    font-size: 1rem;
    font-weight: 600;
  }

  .words {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
  }

  /* -------------------------
     WORD-ITEM STATES
     .word-item (available)
     .word-item.used (already used)
  -------------------------- */
  .word-item {
    font-family: monospace;
    background-color: var(--gray-600);
    color: var(--gray-0);
    padding: 2px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--transition-speed);
    text-align: center;
    font-size: 1.4rem;
  }

  /* Hover applies ONLY if it's not used */
  .word-item:not(.used):hover {
    background-color: var(--gray-200);
  }

  /* Already used words */
  .word-item.used {
    opacity: 0.6;
    pointer-events: none;
  }

  .buttons {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    width: 200px;
    justify-content: center;
  }

  .buttons button {
    flex: 1;
    max-width: 100px;
  }

  .btn-clear, .btn-clear-all, .btn-view-result {
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-speed), opacity var(--transition-speed);
    min-width: 100%;
  }

  .btn-clear { 
    background-color: var(--red-500);
    color: var(--gray-0);
  }

  .btn-clear:disabled {
    background-color: var(--red-500);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-clear-all { 
    background-color: var(--yellow-600);
    color: var(--gray-0);
  }

  .btn-clear-all:disabled {
    background-color: var(--yellow-600);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .btn-view-result { 
    background-color: var(--gray-800);
    color: var(--gray-0);
    display: none;
  }


  /* Default instruction message */
  .message{
    display: block;
    color: var(--gray-850);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0px;
    line-height: normal;
    min-height: 45px;
  }

  .message .instruction {
    font-weight: 400;
    color: var(--gray-850);
  }

  /* Styling for warning messages appended to the instruction */
  .message .warning {
    color: var(--orange-700);
    font-weight: 400;
  }
  /* Success message */
  .message.success {
    color: var(--gray-850);
    font-weight: 600;
  }

  /* Error message */
  .message.error {
    color: var(--red-700);
  }

  /* Warning message */
  .message.warning {
    color: var(--orange-700);
  }


  .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;
      }
  }

  @media (max-width: 600px) {

    .wordlist {
      width: 100%;
    }

    .buttons {
      flex-direction: row;
      gap: 8px;
    }

    .buttons button {
      max-width: none;
      width: 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, var(--gray-75) 0%, var(--gray-300) 52.6%, var(--gray-400) 100%);
      --gradient-content-area: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
      --gradient-card-background: linear-gradient(180deg, var(--gray-25) 0%, var(--gray-25) 100%);
      --gradient-entity-header-vignette: linear-gradient(325deg, rgba(var(--slate-900), 0.00) 40%, rgba(var(--slate-900), 1) 100%);
      --gradient-modal-background: linear-gradient(112deg, rgba(var(--gray-0), 0.20) 0%, rgba(var(--gray-1000), 0.20) 99.45%), rgba(var(--gray-950), 0.60);
      --gradient-modal-content: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%), var(--gray-0);
  }