@import url("https://fonts.googleapis.com/css2?family=Parkinsans:wght@300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pirata+One&display=swap");

/* ///////////////
  Custom Properties
  ////////////// */
:root {
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.2,1240,18,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8,s-l&g=s,l,xl,12 */

  /* Step -2: 11.1111px → 11.52px
  Step -1: 13.3333px → 14.4px
  Step 0: 16px → 18px
  Step 1: 19.2px → 22.5px
  Step 2: 23.04px → 28.125px
  Step 3: 27.648px → 35.1563px
  Step 4: 33.1776px → 43.9453px
  Step 5: 39.8131px → 54.9316px
  Step 6: 47.7757px → 68.6646px */
  --fs-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vw, 0.72rem);
  --fs-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vw, 0.9rem);
  --fs-step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --fs-step-1: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);
  --fs-step-2: clamp(1.44rem, 1.3295rem + 0.5527vw, 1.7578rem);
  --fs-step-3: clamp(1.728rem, 1.5648rem + 0.8161vw, 2.1973rem);
  --fs-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vw, 2.7466rem);
  --fs-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vw, 3.4332rem);
  --fs-step-6: clamp(2.986rem, 2.5319rem + 2.2705vw, 4.2915rem);

  /* Space 3xs: 4px → 5px
  Space 2xs: 8px → 9px
  Space xs: 12px → 14px
  Space s: 16px → 18px
  Space m: 24px → 27px
  Space l: 32px → 36px
  Space xl: 48px → 54px
  Space 2xl: 64px → 72px
  Space 3xl: 96px → 108px
  Space 4xl: 128px → 144px */
  --space-3xs: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4783rem + 0.1087vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4348rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.7391rem + 1.3043vw, 6.75rem);
  --space-4xl: clamp(8rem, 7.6522rem + 1.7391vw, 9rem);

  /* Space 3xs-2xs: 4px → 9px
  Space 2xs-xs: 8px → 14px
  Space xs-s: 12px → 18px
  Space s-m: 16px → 27px
  Space m-l: 24px → 36px
  Space l-xl: 32px → 54px
  Space xl-2xl: 48px → 72px
  Space 2xl-3xl: 64px → 108px
  Space 3xl-4xl: 96px → 144px */
  --space-3xs-2xs: clamp(0.25rem, 0.1413rem + 0.5435vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.3696rem + 0.6522vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.6196rem + 0.6522vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7609rem + 1.1957vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.2391rem + 1.3043vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5217rem + 2.3913vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.4783rem + 2.6087vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.0435rem + 4.7826vw, 6.75rem);
  --space-3xl-4xl: clamp(6rem, 4.9565rem + 5.2174vw, 9rem);

  --ocean-blue: #1e90ff;
  --deep-blue: #00008b;
  --sky-blue: #87ceeb;

  /* Primary Colors */
  --color-deep-blue: #1C3D5A;
  --color-light-blue: #4A8BBA;
  --color-seafoam: #64C7C4;

  /* Accent Colors */
  --color-coral: #FF7F50;
  --color-sand: #F4D03F;

  /* Text Colors */
  --color-white: #F2F2F2;
  --color-navy: #0A1F2F;
  --color-gray: #E0E5E9;

  --primary-text-color: var(--color-white);
  --secondary-text-color: var(--color-gray);

  /* Button Styles */
  --button-primary-bg: var(--color-coral);
  --button-primary-text: var(--color-white);
  --button-primary-hover: var(--color-coral-hover);

  --button-secondary-bg: var(--color-seafoam);
  --button-secondary-text: var(--color-navy);
  --button-secondary-hover: var(--color-seafoam-hover);

  /* Link Styles */
  --link-color: var(--color-sand);
  --link-hover: var(--color-sand-hover);

  /* Container Styles */
  --card-bg: rgba(255, 255, 255, 0.1);
  --card-text: var(--color-white);
  --card-border: rgba(255, 255, 255, 0.2);

  --container-bg: rgba(74, 139, 186, 0.9);
  --container-text: var(--color-white);

  /* Header Styles */
  --header-primary: var(--color-white);
  --header-secondary: var(--color-gray);

  /* Hover States (10% lighter) */
  --color-coral-hover: #ff8f64;
  --color-seafoam-hover: #78d1ce;
  --color-sand-hover: #f5d656;

  /* Modal Styles */
  --modal-bg: rgb(74, 139, 186);
  /* Using light-blue as base instead of deep blue */
  --modal-overlay: rgba(10, 31, 47, 0.65);
  /* Darker overlay for behind modal */
  --modal-border: rgba(255, 255, 255, 0.1);
  --modal-text: var(--color-white);
  --modal-close-btn: var(--color-coral);
  --modal-close-btn-hover: var(--color-coral-hover);

  /* Checkbox Styles */
  --checkbox-border: var(--color-light-blue);
  /* #4A8BBA */
  --checkbox-border-hover: var(--color-seafoam);
  /* #64C7C4 */
  --checkbox-bg: transparent;
  --checkbox-checked-bg: var(--color-seafoam);
  --checkbox-checked-border: var(--color-seafoam);
  --checkbox-check-color: var(--color-white);
  /* Color of the checkmark */

  /* Select Styles */
  --select-border: var(--color-light-blue);
  /* #4A8BBA */
  --select-bg: rgba(74, 139, 186, 0.2);
  /* Very light transparent light-blue */
  /* Semi-transparent deep blue */
  --select-text: var(--color-white);

  /* Hover/Focus states */
  --select-border-hover: var(--color-seafoam);
  --select-border-focus: var(--color-seafoam);

  /* Options/Dropdown */
  --select-option-bg: var(--color-deep-blue);
  --select-option-text: var(--color-white);
  --select-option-hover-bg: var(--color-light-blue);
  --select-option-selected-bg: var(--color-seafoam);

  --container-max: 1000rem;
}

/* ///////////////
  Reset
  ////////////// */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* set default to dark mode and follows the user preference */
html {
  color-scheme: dark light;
  transition-behavior: allow-discrete;
}

/* set minimal height on the body */
body {
  min-height: 100svh;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
  font: inherit;
  text-wrap: pretty;
}

/* Remove defaults for ul with a class */
ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Make images and videos responsive */
img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

input,
textarea,
button,
select {
  font: inherit;
}

/* Baseline for default links */
a:not([class]) {
  /* Relatively sized thickness and offset */
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.15em;
}

/* Scroll padding allowance below focused elements
  to ensure they are clearly in view */
:focus {
  scroll-padding-block-end: 8vh;
}

/* a keyboard user who accesses elements through tabbing will see a visible focus style. */
:is(a, button, input, textarea, summary):focus-visible {
  --outline-size: max(2px, 0.08em);

  outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
  outline-offset: var(--outline-offset, var(--outline-size));
}

:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
  outline: none;
}

/* Focus customizations */
input {
  --outline-style: dashed;
}

/* ///////////////
  Utility Classes
  ////////////// */

.wrapper {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
}

/* ///////////////
  General Layout
  ////////////// */

body {
  background-image: url("pics/underwater-ship.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  font-family: "Parkinsans", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  font-size: var(--fs-step-0);
}

.game-container {
  display: flex;
  flex-direction: column;
  height: 100svh;
  overflow: auto;

  text-align: center;
  color: var(--primary-text-color);
}

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

  margin-block: var(--space-xs);
}

.header-display>*+* {
  margin-inline-start: var(--space-m);
}

/* game-options */
.game-options {
  background-color: var(--card-bg);
  /* Translucent white */
  border-radius: var(--space-xs);
  padding: var(--space-xs);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-size: var(--fs-step-0);

  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
}

.title {
  font-family: "Pirata One", system-ui;
  color: var(--header-primary);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: var(--fs-step-2);
  text-align: center;
}

.subtitle {
  color: var(--header-secondary);
  font-size: var(--fs-step-1);
}

.max-words-label,
.extra-words-label,
.mute-sounds-label {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: inherit;
}

.max-words-select,
.word-set-select,
.extra-words-checkbox,
.mute-sounds-checkbox {
  padding: var(--space-3xs);
  border: 2px solid var(--checkbox-border);
  border-radius: var(--space-2xs);
  font-size: inherit;
  transition: all 0.3s ease;
}

.max-words-select:focus,
.word-set-select:focus,
.extra-words-checkbox:focus,
.mute-sounds-checkbox:focus {
  /* outline: none; */
  border-color: var(--checkbox-border-hover);
  box-shadow: 0 0 10px rgba(135, 206, 235, 0.5);
}

.extra-words-checkbox,
.mute-sounds-checkbox {
  color: var(--primary-text-color);
  accent-color: var(--checkbox-checked-bg);
}

.max-words-select,
.word-set-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 4 L6 9 L11 4' fill='none' stroke='%2300008b' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  background-color: var(--select-bg);
  color: var(--select-text);
  padding-right: var(--space-m);
}

.word-set-select {
  width: 20ch;
}

.word-set-select option[value="manage-sets"] {
  font-style: italic;
  color: var(--text-secondary);
}

.word-set-select option[disabled] {
  color: var(--border);
}

.players-btn,
.leaderboard-btn,
.shuffle-btn,
.drag-btn,
.reset-btn {
  border: none;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--space-2xs);
  cursor: pointer;
}

.players-btn {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-text);

  &:hover {
    background-color: var(--button-primary-hover);
  }
}

.leaderboard-btn,
.shuffle-btn,
.drag-btn {
  display: none;
  visibility: hidden;

  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);

  &:hover {
    background-color: var(--button-secondary-hover);
  }

  &.visible {
    display: inline-block;
    visibility: visible;
  }
}

.reset-btn:hover {
  background-color: var(--color-coral);
  /* Uses your existing warning/red color */
  color: white;
  border-color: var(--color-coral);
}

/* Player Display */
.player-display {
  /* flex-basis: 100%; Get's added in the javascript */
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  min-height: 52px;
  /* Because there was a small "shake" caused by the transition */

  .player-info {
    display: flex;
    gap: var(--space-3xs);
    align-items: center;
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--space-2xs);
    font-size: inherit;
    color: var(--primary-text-color);
    border: 1px solid transparent;
    transition: all 0.3s ease;


    &.active {
      font-size: var(--fs-step-1);
      border: 1px solid var(--link-color);
    }

    &.draggable {
      cursor: move;
      border: 2px dashed #ccc;
      transition: transform 0.2s ease;

      &:active {
        transform: scale(1.05);
      }
    }

    .player-name,
    .player-level,
    .player-score,
    .player-session-score {
      transition: all 0.3s ease;
    }

    .player-name {
      font-weight: 700;
    }

    .player-score {
      color: var(--link-color);
      font-weight: 700;
    }

    .player-session-score {
      /* font-style: italic; */
      font-weight: 100;
    }

    .player-level {
      color: var(--secondary-text-color);
      font-style: italic;
    }
  }
}

/* game-board */
.game-board {
  --grid-ratio: 1.618;
  /* Golden ratio */
  --grid-columns: 45;
  --grid-rows: round(calc(var(--grid-columns) / var(--grid-ratio)));

  flex: 1;
  overflow: auto;

  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--space-xs);
  width: 100%;
  height: 100%;
  /* border: lime solid 2px; */
  margin-bottom: var(--space-s);
}

.word-card,
.treasure-div {
  --grid-column-span: round(calc(var(--grid-columns) / 10));
  --grid-row-span: round(calc(var(--grid-column-span) / (var(--grid-ratio))));
  --grid-row-start: round(down, calc(var(--cell) / var(--grid-columns) + 1));

  /* --grid-column-start: calc((var(--cell) % var(--grid-columns)) + 1); */
  /* sincd css can't calculate moudulo, we need to use a workaround */
  --floor: round(down,
      calc(var(--cell) / var(--grid-columns)));
  /* computes the integer part of a/b (floor division). */
  --modulo: calc(calc(var(--cell) - var(--grid-columns) * var(--floor)));
  /* subtracts b x floor(a/b) from a, yielding a%b. */
  --result: calc(var(--modulo) + 1);
  /* add 1 to get the correct column number */
  --grid-column-start: var(--result);

  grid-area: var(--grid-row-start) / var(--grid-column-start) / span var(--grid-row-span) / span var(--grid-column-span);

  display: flex;
  justify-content: center;
  align-items: center;
}

.word-card {
  font-size: var(--fs-step-1);

  /* padding: 10% 5%; */
  color: var(--color-deep-blue);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: var(--color-white);
  border: 2px solid var(--color-deep-blue);
  border-radius: 8px;
  cursor: pointer;
  text-wrap: balance;

  transition: transform 0.3s ease;
}

.word-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 1);
}

@keyframes treasureAppear {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.treasure-div {
  display: none;
  z-index: -1;
  opacity: 0;
  transform: scale(0.5);

  &[style*="display: flex"] {
    animation: treasureAppear 1s ease forwards;
  }
}

@keyframes popup {
  0% {
    opacity: 0;
    /* Start fully transparent */
    transform: translateY(0);
  }

  10% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-60px);
  }
}

.points-popup {
  position: absolute;
  background: var(--color-gold);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-weight: bold;
  font-size: var(--fs-step-3);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: popup 5s ease-out forwards;
  z-index: 1000;
}

@keyframes fadeOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

.word-card.clicked {
  animation: fadeOut 1.2s forwards;
}

.hidden {
  display: none;
}

.bubble {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: floatUp 3s linear;
  z-index: -10;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: translateY(-100vh) scale(0.5);
    opacity: 0;
  }
}

/* For Debugging */
.game-controls {
  position: fixed;
  top: 20px;
  left: 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 100;
  /* Ensure it stays on top of other elements */
  font-size: var(--fs-step-2);
  color: var(--color-navy);
  background-color: var(--color-white);
}

#grid-columns {
  width: 70px;
  padding: 5px;
  text-align: center;
  font-size: inherit;
}

#word-card-count {
  margin-left: 10px;
  font-size: inherit;
}

/* used for debugging javascript */
.unavailable-cell {
  background-color: rgba(255, 0, 0, 0.2);
  /* semi-transparent red */
  z-index: 1;
}

.unavailable-cell-main {
  background-color: rgba(0, 255, 21, 0.5);
  /* semi-transparent green */
  z-index: 1;
}

/* Modal Styles */
.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.5);
  background-color: var(--modal-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  visibility: hidden;
  transition: opacity .3s ease;
  overflow-y: auto;
  padding: var(--space-m);

  &.visible {
    opacity: 1;
    visibility: visible;

    .modal-content {
      transform: scale(1);
    }
  }

  .modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
    padding: var(--space-l);
    border-radius: 8px;
    text-align: center;
    transform: scale(0.7);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.2);
    border: 1px solid var(--modal-border);
    max-width: 90%;
    margin: auto;

    /* Players Modal - TextArea */
    textarea {
      width: 100%;
      padding: var(--space-xs);
      resize: vertical;
      min-height: 100px;
      font-size: var(--fs-step-1);
    }

    /* Players Modal - Buttons */
    .modal-actions {
      display: flex;
      justify-content: space-between;
      gap: var(--space-s);

      .cancel-players-btn {
        background-color: var(--button-secondary-bg);
        color: var(--button-secondary-text);

        &:hover {
          background-color: var(--button-secondary-hover);
        }
      }
    }

    p {
      color: var(--link-color);
    }

    h2 {
      color: var(--primary-text-color);
      font-size: var(--fs-step-4);
      margin-bottom: var(--space-s);
    }

    button {
      font-size: var(--fs-step-1);
      padding: var(--space-xs);
      margin-top: var(--space-xs);
      background-color: var(--modal-close-btn);
      color: var(--modal-text);
      border: none;
      border-radius: var(--space-2xs);
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: var(--color-coral-hover);
      }
    }

    h3 {
      margin-block: var(--space-s);
      font-size: var(--fs-step-3);
    }

    /* Custom Sets Modal */
    .sets-list {
      max-height: 300px;
      overflow-y: auto;
      margin-bottom: var(--space-s);
      /* margin: var(--space-s) 0; */

      .set-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--border);

        .set-name {
          cursor: pointer;
          padding: var(--space-2xs);
          border-radius: var(--space-3xs);
          transition: background-color 0.2s;

          &:hover {
            background-color: var(--button-secondary-hover);
          }
        }

        .saved-set-delete {
          padding: var(--space-2xs);

          .trash-icon {
            cursor: pointer;
            color: red;
            font-size: var(--fs-step-1);
            transition: transform 0.2s ease;

            &:hover {
              transform: scale(1.2);
            }
          }
        }
      }
    }

    .new-set-words,
    .new-set-name {
      width: 100%;
      font-size: var(--fs-step-1);
    }

    .new-set-words {
      min-height: 200px;
    }

    .new-set-name {
      margin: var(--space-xs) 0;
      padding: var(--space-xs);
    }

    /* Completion Modal shows the winner's name */
    .winner-name {
      font-size: var(--fs-step-3);
    }

    .stats-container {
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      margin-top: var(--space-s);

      table {
        /* width: 100%; */
        border-collapse: collapse;
        margin-inline: auto;

        th,
        td {
          border: 1px solid var(--color-deep-blue);
          padding: var(--space-xs);
          text-align: center;
        }

        .table-treasure-icon {
          width: 50px;
          margin: auto;
        }

        .table-treasure-icon-goldbag {
          width: 37px;
          margin: auto;
        }

        .player-group-even {
          background-color: rgba(255, 255, 255, 0.05);
        }

        .player-group-odd {
          background-color: rgba(74, 139, 186, 0.1);
        }

        .rank-header,
        .rank-cell {
          width: 3ch;
          color: var(--secondary-text-color);
        }

        .rank-cell {
          font-weight: bold;
          opacity: 0.7;
        }
      }
    }
  }
}

/* ///////////////
   Stats Management
   ////////////// */

.actions-cell {
  display: flex;
  gap: var(--space-2xs);
  justify-content: center;
  align-items: center;
}

tbody .actions-cell .action-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-3xs);
  margin-top: 0;
  font-size: var(--fs-step-0);
  color: var(--secondary-text-color);
  transition: all 0.2s ease;
  border-radius: var(--space-3xs);
}

.action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

.action-btn.rename:hover {
  color: var(--color-sand);
}

.action-btn.merge:hover {
  color: var(--color-seafoam);
}

.action-btn.delete:hover {
  color: var(--color-coral);
}

/* Modal Specifics for Management */
.highlight-text {
  color: var(--color-sand);
  font-weight: 700;
}

.warning-text {
  color: #ffcc00;
  /* Warning Yellow */
  background-color: rgba(255, 0, 0, 0.2);
  padding: var(--space-xs);
  border-radius: var(--space-2xs);
  border: 1px solid var(--color-coral);
  margin-block: var(--space-s);
  font-size: var(--fs-step--1);
}

.modal-hint {
  font-size: var(--fs-step--1);
  color: var(--color-gray);
  margin-block-end: var(--space-s);
  font-style: italic;
}

.modal-input,
.modal-select {
  font-size: var(--fs-step-0);
  padding: var(--space-xs);
  border-radius: var(--space-2xs);
  border: 1px solid var(--color-light-blue);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  width: 100%;
  margin-block: var(--space-xs);
}

.modal-select option {
  background-color: var(--color-deep-blue);
}

/* Action Buttons in Modals */
.primary-btn {
  background-color: var(--color-seafoam);
  color: var(--color-navy);
}

.primary-btn:hover {
  background-color: var(--color-seafoam-hover);
}

.danger-btn {
  background-color: var(--color-coral);
  color: var(--color-white);
}

.danger-btn:hover {
  background-color: var(--color-coral-hover);
}

.secondary-btn {
  background-color: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.level-up-notification {
  position: fixed;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-seafoam);
  color: var(--color-white);
  padding: var(--space-m);
  border-radius: var(--space-xs);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 100;
  text-align: center;
  animation: fadeInOut 3s ease-in-out;
}

.modal-options-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-xs);
  padding-inline: var(--space-xs);
}

.edit-mode-label {
  font-size: var(--fs-step-0);
  color: var(--color-gray);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.edit-mode-checkbox {
  accent-color: var(--color-coral);
  width: 1.2em;
  height: 1.2em;
}

/* Toggle Visibility Logic */
.actions-header,
.actions-cell {
  display: none;
  /* Hidden by default */
}

/* When edit mode is active, show them */
.edit-mode-active .actions-header {
  display: table-cell;
}

.edit-mode-active .actions-cell {
  display: flex;
}

@keyframes fadeInOut {

  0%,
  100% {
    opacity: 0;
  }

  10%,
  90% {
    opacity: 1;
  }
}

.current-player-cell {
  color: var(--color-sand);
}

.current-player-icon {
  font-size: 0.8em;
  color: var(--color-sand);
  opacity: 0.9;
}

/* Show cards remaining in bottom right corner */
.cards-remaining {
  position: fixed;
  bottom: var(--space-2xs);
  right: var(--space-s);
  /* Translucent white */
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--primary-text-color);
  padding: var(--space-3xs) var(--space-2xs);
  /* border-radius: 50%; */
  border-radius: 12px;
  font-size: var(--fs-step--2);
  /* min-width: 3em; */
  text-align: center;
}

/* ///////////////
  Media Queries (Mobile First)
  ////////////// */

/* Larger mobile devices/small tablets - 600px and up*/
@media (width >=37.5rem) {}

/* Tablets - 768px and up */
@media (width >=48rem) {
  .word-card {
    font-size: var(--fs-step-1);
  }

  .title {
    font-size: var(--fs-step-3);
  }
}

/* Laptops/small desktops - 992px and up */
@media (width >=62rem) {}

/* Large desktops - 1200px and up */
@media (width >=75rem) {
  .word-card {
    font-size: var(--fs-step-2);
  }

  .title {
    font-size: var(--fs-step-4);
  }
}

/* XL desktops - 1800px and up */
@media (width >=112.5rem) {
  .game-options {
    font-size: var(--fs-step-1);
    gap: var(--space-m);
  }

  .player-display>.player-info.active {
    font-size: var(--fs-step-2);
  }

  .word-card {
    font-size: var(--fs-step-3);
  }

  .word-set-select {
    width: min-content;
  }

  .title {
    font-size: var(--fs-step-5);
  }
}