/* =========================================================
   WordSprint - Responsive CSS (Full Refactor)
   Author: Code GPT 🧑‍💻
   Description: Complete responsive redesign preserving all
   original functionality and visuals.
   ========================================================= */

/* === ROOT VARIABLES === */
:root {
  --card-bg: #1a1b2f;
  --border: #444;
  --text: #e0ffff;
  --primary: #00ffff;
  --muted: #aaa;
}

/* === FONTS === */
@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
}

@font-face {
  font-family: 'CedarvilleCursive';
  src: url('./fonts/CedarvilleCursive-Regular.ttf') format('truetype-variations');
  font-weight: 400;
  font-style: normal;
}

/* === TYPOGRAPHY BASE CLASSES === */
.typography-normal-upper,
.typography-normal-lower {
  font-family: 'Roboto', sans-serif;
}

.typography-cursive-upper,
.typography-cursive-lower {
  font-family: 'CedarvilleCursive', cursive;
}

/* === CASE TRANSFORMS === */
.typography-normal-upper,
.typography-cursive-upper {
  text-transform: uppercase;
}

.typography-normal-lower,
.typography-cursive-lower {
  text-transform: lowercase;
}

/* === APPLY TO CONTAINER AND CHILDREN === */
#wordDisplay.typography-normal-upper,
#wordDisplay.typography-normal-upper .letter,
#wordDisplay.typography-normal-lower,
#wordDisplay.typography-normal-lower .letter {
  font-family: 'Roboto', sans-serif;
}

#wordDisplay.typography-cursive-upper,
#wordDisplay.typography-cursive-upper .letter,
#wordDisplay.typography-cursive-lower,
#wordDisplay.typography-cursive-lower .letter {
  font-family: 'CedarvilleCursive', cursive;
}

/* === CASE CONSISTENCY FOR CHILD LETTERS === */
#wordDisplay.typography-normal-upper .letter,
#wordDisplay.typography-cursive-upper .letter {
  text-transform: uppercase;
}

#wordDisplay.typography-normal-lower .letter,
#wordDisplay.typography-cursive-lower .letter {
  text-transform: lowercase;
}

/* =========================================================
   GLOBAL LAYOUT & BODY
   ========================================================= */
body {
  margin: 0;
  font-family: 
    "Roboto", 
    -apple-system, 
    BlinkMacSystemFont, 
    "Segoe UI", 
    Helvetica, 
    Arial, 
    sans-serif;
  font-weight: 400;
  font-stretch: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  background: linear-gradient(to top left, #0f0c29, #302b63, #24243e);
  padding: clamp(10px, 4vw, 20px);
  color: var(--text);
  overflow-x: hidden;
}

/* =========================================================
   AUTH SCREEN — ISOLATED, FULLSCREEN, SCROLLABLE
   ========================================================= */
#authScreen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh; /* mobile-safe viewport height */
  background: linear-gradient(to bottom right, #1a1b2f, #0f0c29);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10000;

  /* prevent underlying content from being visible through */
  isolation: isolate;
  backface-visibility: hidden;
  will-change: transform;

  /* padding for safe areas (notches, toolbars) */
  padding: calc(env(safe-area-inset-top, 0px) + 1rem)
           calc(env(safe-area-inset-right, 0px) + 1rem)
           calc(env(safe-area-inset-bottom, 0px) + 1rem)
           calc(env(safe-area-inset-left, 0px) + 1rem);
  box-sizing: border-box;
}


/* Prevent background scroll when auth screen is active (optional) */
body.auth-active {
  overflow-y: auto;
}

/* ----------------------------
   HEADING
---------------------------- */
#authScreen h1 {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  margin-top: 0.5rem;                   /* Ensure visibility below top UI bar */
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* ----------------------------
   LOGIN / SIGNUP FORMS
---------------------------- */
#authScreen form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  margin-top: 1rem;
}

#authScreen input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  margin-bottom: 10px;
  width: 100%;
  max-width: 280px;
  box-sizing: border-box;
}

#authScreen button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  width: 100%;
  max-width: 280px;
  transition: background-color 0.3s ease;
}

#authScreen button:hover {
  background-color: #0056b3;
}

/* ----------------------------
   TEXT ELEMENTS
---------------------------- */
#authScreen p {
  font-size: clamp(0.9rem, 2vw, 1rem);
  margin: 0.5rem 0;
}

/* ----------------------------
   VIDEO EMBED
---------------------------- */
#authScreen iframe {
  width: 90vw;
  max-width: 560px;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 8px;
  margin-top: 1rem;
}

/* ----------------------------
   SUPPORT BUTTON
---------------------------- */
#supportUsBtn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ffd700;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  margin-top: 1rem;
}

#supportUsBtn:hover {
  background-color: #ffea70;
}

/* ----------------------------
   SIGNUP FORM (Hidden by default)
---------------------------- */
#signupForm {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
}

#signupForm input,
#signupForm button {
  width: 100%;
  max-width: 280px;
}

#signupForm button {
  background-color: #28a745;
}

#signupForm button:hover {
  background-color: #1e7e34;
}

/* ----------------------------
   SMALL-SCREEN REFINEMENTS
---------------------------- */
@media (max-width: 480px) {
  #authScreen {
    padding-top: calc(env(safe-area-inset-top, 0px) + 1rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
  }

  #authScreen h1 {
    font-size: 1.5rem;
  }

  #authScreen iframe {
    width: 100%;
    height: auto;
  }

  #authScreen input,
  #authScreen button {
    max-width: 90%;
  }
}


/* =========================================================
   SPLASH SCREEN — REFACTORED & RESPONSIVE
   ========================================================= */
#splashScreen {
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100dvh; /* dynamic viewport height for mobile */
  background: radial-gradient(circle at center, #1a1a40, #0d0d20);
  color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: clamp(2rem, 5vw, 3rem);
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* Smooth fade transition */
  transition: opacity 0.8s ease, visibility 0.8s ease;

  /* Subtle entrance animation */
  animation: splashFadeIn 1.2s ease-in-out forwards;

  /* Prevent any scroll or GPU artifacts */
  backface-visibility: hidden;
  will-change: opacity, visibility;
}

/* Hidden state — fade out and remove interactivity */
#splashScreen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes splashFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Optional: Fade-out animation (if you trigger it via class) */
@keyframes splashFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* =========================================================
   MOBILE OPTIMIZATION
   ========================================================= */
@media (max-width: 768px) {
  #splashScreen {
    font-size: clamp(1.8rem, 7vw, 2.6rem);
    padding: calc(env(safe-area-inset-top, 0px) + 1rem)
             calc(env(safe-area-inset-right, 0px) + 1rem)
             calc(env(safe-area-inset-bottom, 0px) + 1rem)
             calc(env(safe-area-inset-left, 0px) + 1rem);
    box-sizing: border-box;
  }
}


/* =========================================================
   GAME SETTINGS SCREEN — RESPONSIVE, SCROLL-SAFE VERSION
   ========================================================= */
#gameSettings {
  position: relative; /* ⬅️ allow natural page scroll */
  width: 100%;
  min-height: 100vh;  /* fills screen but grows with content */
  background: linear-gradient(to bottom right, #2b2d42, #1a1b2f);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* ⬅️ top-aligned for scroll comfort */
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  z-index: 999;
  box-shadow: inset 0 0 20px var(--primary);
  animation: fadeInSettings 1s ease;

  /* Safe-area and responsive spacing */
  padding-top: calc(env(safe-area-inset-top, 0px) + 2rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 3rem);
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
  box-sizing: border-box;

  /* Enable scrolling for overflowing content */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: env(safe-area-inset-top, 20px);
}

/* ----------------------------
   HEADINGS + TEXT
---------------------------- */
#gameSettings h2 {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
}

#gameSettings p {
  max-width: 700px;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

/* ----------------------------
   FORM CONTROLS
---------------------------- */
#gameSettings select,
#gameSettings input,
#gameSettings button {
  font-family: 'Comic Sans MS', 'Baloo', cursive, sans-serif;
  font-size: 1rem;
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  border: none;
  width: auto;
  max-width: 90vw;
  box-sizing: border-box;
}

/* =========================================================
   PROFILE MENU — REFACTORED + RESPONSIVE + ACCESSIBLE
   ========================================================= */

/* Container fixed to the top-right of the viewport */
.profile-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* Profile Button */
.profile-button {
  padding: 8px 12px;
  background-color: #007bff;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.profile-button:hover,
.profile-button:focus {
  background-color: #0056b3;
  outline: none;
  transform: translateY(-1px);
}

.profile-button:active {
  transform: translateY(0);
}

/* Dropdown container */
.profile-dropdown {
  display: none;
  background-color: var(--card-bg);
  border: 1px solid var(--primary);
  border-radius: 8px;
  margin-top: 8px;
  width: 180px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  text-align: left;
  overflow: hidden;
  animation: dropdownFade 0.25s ease forwards;
}

/* Dropdown items */
.profile-dropdown a {
  display: block;
  padding: 12px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.profile-dropdown a:hover {
  background-color: #232343;
  color: var(--primary);
}

/* Logout link highlight */
.profile-dropdown a.logout {
  color: #ff6b6b;
}

.profile-dropdown a.logout:hover {
  background-color: rgba(255, 107, 107, 0.1);
}

/* Visible state (toggle via JS) */
.profile-dropdown.active {
  display: block;
}

/* Dropdown animation */
@keyframes dropdownFade {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  /* shrink and tighten the profile menu on mobile */
  .profile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    right: calc(env(safe-area-inset-right, 0px) + 6px);
  }

  .profile-button {
    font-size: 0.75rem;         /* smaller text */
    padding: 4px 8px;           /* slimmer button */
    border-radius: 4px;
    gap: 4px;
  }

  .profile-dropdown {
    width: 150px;               /* narrower dropdown */
    font-size: 0.85rem;
  }
}

@media (max-width: 400px) {
  .profile-menu {
    top: calc(env(safe-area-inset-top, 0px) + 2px);
    right: calc(env(safe-area-inset-right, 0px) + 4px);
    transform: scale(0.9);      /* subtle global shrink */
    transform-origin: top right;
  }
}



/* ----------------------------
   MOBILE IMPROVEMENTS
---------------------------- */
@media (max-width: 768px) {
  #gameSettings {
    padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
  }

  #gameSettings select,
  #gameSettings input,
  #gameSettings button {
    width: 100%;
    max-width: 320px;
  }

  #profileMenu {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: 10px;
  }
}

/* =========================================================
   STATISTICS SCREEN
   ========================================================= */
#statisticsScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(15, 12, 41, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: var(--text);
  overflow-y: auto;
  padding: 1rem;
  box-sizing: border-box;
}

.stats-container {
  background: var(--card-bg);
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 16px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
  text-align: center;
  max-width: 90%;
}

.stats-container h2 {
  margin-bottom: 20px;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.stats-container ul {
  list-style: none;
  padding: 0;
  text-align: left;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.stats-container li {
  margin-bottom: 10px;
}

.stats-container button {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: #302b63;
  color: var(--text);
  cursor: pointer;
  font-size: 1em;
}

/* =========================================================
   GAME BOARD GRID — TRUE LOCKED 3×4 RESPONSIVENESS
   ========================================================= */

  section.centered-board {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
}

.grid-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 2vw, 10px);
  justify-content: center;
  margin: 1.5rem auto;
  width: min(90vw, 320px);
  max-width: 100%;
  box-sizing: border-box;

  /* height automatically determined by content */
}

/* Force square tiles using aspect-ratio */
.letter {
  aspect-ratio: 1 / 1; /* always square */
  width: 100%;          /* fill grid cell width */
  height: auto;         /* height controlled by aspect ratio */

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

  font-family: 'Roboto', sans-serif;
  font-size: clamp(1rem, 4vw, 1.8rem);
  font-weight: 700;

  border: 2px solid #8b5a2b;
  border-radius: 5px;
  background: linear-gradient(145deg, #d2a679, #b8860b);
  color: #4b2e1a;
  box-shadow:
    inset 0 0 5px rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* The container's height is automatically determined by 4 rows of square tiles */
.grid-display {
  grid-auto-rows: 1fr; /* ensure equal row height */
}

/* Alternate tile shades */
.letter:nth-child(odd) {
  background: linear-gradient(145deg, #c19a6b, #a0522d);
}

/* Hover feedback (desktop only) */
@media (hover: hover) {
  .letter:hover {
    background: linear-gradient(145deg, #e0b589, #c17a30);
    transform: scale(1.08);
  }
}

/* Typography variations */
.letter.typography-normal {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
}

.letter.typography-cursive {
  font-family: 'CedarvilleCursive', cursive !important;
  font-weight: normal !important;
}

/* =========================================================
   RESPONSIVE OPTIMIZATION
   ========================================================= */

/* Tablets */
@media (max-width: 768px) {
  .grid-display {
    width: min(85vw, 260px);
    gap: clamp(4px, 1.5vw, 8px);
  }
  .letter {
    font-size: clamp(0.9rem, 3.5vw, 1.5rem);
  }
}

/* Phones */
@media (max-width: 480px) {
  .grid-display {
    width: min(90vw, 210px);
    gap: clamp(3px, 1vw, 6px);
  }
  .letter {
    font-size: clamp(0.8rem, 3vw, 1.3rem);
  }
}



/* =========================================================
   SCORE + CONTROLS
   ========================================================= */
.score-display,
.selected-word-display {
  font-family: 'Comic Sans MS', 'Baloo', cursive, sans-serif;
  font-size: 1.2rem;
  color: var(--text);
  margin-bottom: 10px;
  text-shadow: 0 0 5px var(--primary);
}

.controls {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  font-family: 'Comic Sans MS', 'Baloo', cursive, sans-serif;
  font-size: 1rem;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* =========================================================
   SUBMITTED WORDS + OPPONENT WORDS
   ========================================================= */
.submitted-words {
  margin-top: 20px;
  width: 100%;
  max-width: 300px;
  text-align: left;
}

.submitted-words ul {
  list-style: none;
  padding-left: 0;
}

.submitted-words li {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

#opponentWordsContainer {
  width: 100%;
  max-width: 300px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1rem;
}

/* =========================================================
   PROFILE SECTION (FIXED PANEL)
   ========================================================= */
#profileSection {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--card-bg);
  color: var(--text);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px var(--primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 1000;
}

#profileSection h3 {
  margin: 0 0 10px 0;
  font-size: 1.2rem;
}

#profileSection p {
  margin: 5px 0;
  font-size: 1rem;
}

#profileSection button {
  margin-top: 10px;
  font-size: 1rem;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

#profileSection button:hover {
  background-color: #0056b3;
}

/* =========================================================
   MULTIPLAYER PLACEHOLDER + GAME SCREEN
   ========================================================= */
#multiplayerPlaceholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  gap: 20px;
  padding: 1rem;
  box-sizing: border-box;
}

#multiplayerPlaceholder > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#multiplayerPlaceholder button {
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

#multiplayerPlaceholder button:hover {
  background-color: #0056b3;
}

#multiplayerPlaceholder input {
  padding: 10px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  max-width: 250px;
}

#multiplayerPlaceholder p {
  margin: 0;
  color: #ff6666;
}

/* Multiplayer Game Screen */
#multiplayerGameScreen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
  background: linear-gradient(to right, #1a1b2f, #0f0c29);
  padding: 20px;
  color: var(--text);
  font-family: 'Comic Sans MS', cursive;
  text-align: center;
}

#multiplayerGameScreen h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
}

#multiplayerGameScreen .grid-display {
  margin-top: 20px;
}

/* =========================================================
   END SCREEN — REFACTORED (RESPONSIVE + SCROLLABLE)
   ========================================================= */
#endScreen {
  display: none; /* ✅ keep only this one */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh; /* dynamic viewport height for mobile */
  background: linear-gradient(to bottom right, #1a1b2f, #0f0c29);
  color: var(--text);
  text-shadow: 0 0 5px var(--primary);
  text-align: center;

  /* Layout */
  /* ❌ remove this line: display: flex; */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  /* Scroll behavior */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Safe area padding for notches / toolbars */
  padding: calc(env(safe-area-inset-top, 0px) + 2rem)
           calc(env(safe-area-inset-right, 0px) + 1rem)
           calc(env(safe-area-inset-bottom, 0px) + 2rem)
           calc(env(safe-area-inset-left, 0px) + 1rem);

  box-sizing: border-box;
  z-index: 10000;
  isolation: isolate; /* prevent stacking bleed-through */
  backface-visibility: hidden;
  will-change: transform, opacity;
}


/* Heading */
#endScreen h2 {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: bold;
  margin-bottom: 20px;
  color: var(--primary);
  text-shadow: 0 0 10px var(--primary);
}

/* Paragraphs and Lists */
#endScreen p,
#endScreen ul {
  max-width: 600px;
  margin: 0 auto 1rem;
  line-height: 1.6;
}

/* Score List */
#endScreen ul {
  list-style: none;
  padding: 0;
}

/* Button */
#endScreen button {
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#endScreen button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
}

/* =========================================================
   MOBILE OPTIMIZATION
   ========================================================= */
@media (max-width: 768px) {
  #endScreen {
    padding-top: calc(env(safe-area-inset-top, 0px) + 1.5rem);
  }

  #endScreen h2 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  #endScreen p {
    font-size: clamp(0.95rem, 2.5vw, 1rem);
  }
}

/* =========================================================
   CARDS + FORM ELEMENTS
   ========================================================= */
.card {
  background: var(--card-bg);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(179, 175, 175, 0.822);
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border: 1px solid var(--border);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  font-weight: 600;
  font-size: 0.9rem;
}

select,
input[type="radio"] {
  accent-color: var(--primary);
}

select {
  padding: 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  font-size: 0.95rem;
  background: var(--card-bg);
  color: var(--text);
}

.flex-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.section {
  flex: 1;
  min-width: 250px;
}

.section h3 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}

.section p {
  font-size: 0.85rem;
  color: var(--muted);
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================= */

/* Tablets and small laptops */
@media (max-width: 1024px) {
  #gameSettings {
    font-size: 1.2rem;
  }

  #profileMenu {
    top: 10px;
    right: 10px;
  }

  #authScreen iframe {
    width: 95vw;
    max-width: 480px;
  }
}

/* Phones landscape + small tablets */
@media (max-width: 768px) {
  #authScreen h1 {
    font-size: 1.5rem;
  }

  #authScreen p {
    max-width: 90%;
  }

  #gameSettings {
    padding: 1rem;
  }

  #statisticsScreen .stats-container {
    padding: 1rem;
  }

  #profileSection {
    top: 10px;
    right: 10px;
    font-size: 0.9rem;
  }

  .controls {
    gap: 5px;
  }

  button {
    padding: 8px 16px;
    font-size: 0.9rem;
  }
}

/* Small phones portrait */
@media (max-width: 480px) {
  body {
    padding: 0.8rem;
  }

  h1, h2 {
    font-size: 1.3rem;
  }

  #authScreen, #gameSettings {
    padding: 1rem;
  }

  input, button, select {
    width: 100%;
    font-size: 1rem;
  }

  iframe {
    width: 100%;
    height: auto;
  }

  #profileSection {
    top: auto;
    bottom: 10px;
    right: 10px;
    padding: 8px;
  }

  .grid-display {
    gap: 5px;
  }

  .letter {
    font-size: 1.5rem;
  }

  .score-display,
  .selected-word-display {
    font-size: 1rem;
  }

  .stats-container {
    font-size: 0.9rem;
  }

  #endScreen h2 {
    font-size: 1.8rem;
  }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes splashFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowText {
  from { text-shadow: 0 0 10px var(--primary); }
  to { text-shadow: 0 0 30px #00ccff, 0 0 60px #00ccff; }
}

@keyframes fadeInSettings {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}