/* ================= FONT ================= */

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora/static/Sora-Regular.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora/static/Sora-SemiBold.ttf") format("truetype");
  font-weight: 600;
}

@font-face {
  font-family: "Sora";
  src: url("assets/fonts/Sora/static/Sora-Bold.ttf") format("truetype");
  font-weight: 700;
}

/* ================= RESET ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Sora", Arial, sans-serif;
}

body {
  background: #0f0f0f;
  color: #fff;
}

/* ================= CONTAINER ================= */

.container {
  max-width: 1200px;
  margin: auto;
  padding: 30px 20px;
}

/* ================= HEADER ================= */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.logo {
  display: flex;
  gap: 9px;
  align-items: center;
}

.site-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.site-name {
  font: 700 20px/1 Sora, Arial, sans-serif;
  letter-spacing: -0.4px;
  color: #f0f0f0;
  white-space: nowrap;
}

.desktop-logo,
.mobile-logo {
  display: none !important;
}

.best {
  color: #bbb;
  font-size: 14px;
}

.best-icon {
  width: 15px;
  height: 15px;
}

/* ================= STATS BAR ================= */

.stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #222;
  padding-bottom: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 15px;
}

.stat-group {
  display: flex;
  gap: 25px;
}

.stat {
  color: #aaa;
  font-size: 15px;
}

.stat span {
  color: #fff;
  font-weight: 700;
}

/* ================= BUTTONS ================= */

.buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  padding: 6px 14px;
  background: transparent;
  font-weight: 700;
  border: 1px solid #333;
  color: #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  border-color: #2196f3;
}

.btn.active {
  border-color: #2196f3;
  color: #2196f3;
}

.mode {
  display: flex;
  gap: 5px;
  align-items: center;
}

/* ================= TYPING AREA ================= */

.typing-box {
  text-align: center;
  position: relative;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 10px;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.typing-box::-webkit-scrollbar {
  display: none;
}

.text-area {
  font-size: 28px;
  line-height: 1.7;
  color: #888;
  user-select: none;
  text-align: left;
}

.correct {
  color: #4caf50;
}

.incorrect {
  color: #f44336;
  text-decoration: underline;
}

.word {
  display: inline-block;
  margin-right: 12px;
}

.current-word {
  background: rgba(0, 123, 255, 0.15);
  border-radius: 5px;
}

.space {
  display: inline-block;
}

.correct {
  color: #4caf50;
}

.incorrect {
  color: #ff4d4d;
}

.active {
  position: relative;
}

.active::after {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #00bfff;
  animation: blink 1.5s infinite;
  box-shadow: 0 0 6px #00bfff;
}

@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.typing-active {
  /* Focus state only; do not hide the mouse pointer. */
}

/* Hide the real mouse pointer only until the user moves the mouse. */
body.typing-cursor-hidden,
body.typing-cursor-hidden * {
  cursor: none !important;
}

.hide-during-typing {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}


/* ================= START OVERLAY ================= */

.start-overlay {
  position: absolute;
  inset: 0;

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

  background: rgba(15, 15, 15, 0.9);
  border-radius: 10px;
  z-index: 10;
}

.start-overlay button {
  background: #2196f3;
  border: none;
  padding: 12px 28px;
  color: white;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
}

.start-overlay p {
  color: #aaa;
  font-size: 14px;
}

.word-error {
  text-decoration: underline;
  text-decoration-color: #ff4d4d;
  text-decoration-thickness: 2px;
}

.controls-row {
  display: none;
}

/* ================= RESULT SCREEN ================= */

.result-screen {
  display: none;
  padding: 20px 0;
  text-align: center;
}

/* Icon */
.result-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 25px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Title */
.result-screen h1 {
  font-size: 38px;
  margin-bottom: 15px;
  font-weight: 600;
}

/* Subtitle */
.result-sub {
  color: #aaa;
  max-width: 500px;
  margin: 0 auto 40px auto;
  font-size: 16px;
}

/* Stats Cards */
.result-stats {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.result-card {
  background: #151515;
  padding: 25px 30px;
  border-radius: 12px;
  min-width: 150px;
  border: 1px solid #222;
  transition: 0.3s ease;
}

.result-card:hover {
  transform: translateY(-5px);
  border-color: #333;
}

.result-card span {
  color: #888;
  font-size: 14px;
}

.result-card h2 {
  margin-top: 8px;
  font-size: 30px;
}

/* Retry Button */
.retry-btn {
  background: white;
  color: black;
  border: none;
  padding: 20px 40px;
  border-radius: 30px;
  font-size: 15px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
}

.retry-btn:hover {
  transform: scale(1.05);
}

.time-select {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  margin-right: 10px;
}

.time-select.active-mode {
  border-color: #2196f3;
  color: #2196f3;
}

.time-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


.dropdown {
  display: flex;
  gap: 8px;
  align-items: center;
}

.time-select {
  background: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
}

.time-select:focus {
  outline: none;
  border-color: #2196f3;
}

/* ================= MOBILE UI MATCH SCREENSHOT ================= */

.difficulty-mobile,
.mode-mobile {
  display: none;
}

.mode-desktop {
  display: inline-block;
}

/* Restart under paragraph */
.restart-wrapper {
  text-align: center;
  margin-top: 60px;
}

.restart-btn-main {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  padding: 12px 28px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.restart-btn-main:hover {
  background: #2a2a2a;
}

/* ================= MOBILE UI OPTIMIZATION ================= */

/* Mobile: show only logo-small */
@media (max-width: 768px) {
  .site-logo {
    content: url("logo-small.svg");
    width: 36px;
    height: 36px;
    object-fit: contain;
  }

  .site-name,
  .logo-text,
  .brand-name {
    display: none !important;
  }

  .best-icon {
    content: url("icon-personal-best.svg");
    width: 15px;
    height: 15px;
    object-fit: contain;
  }

  .best-line {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 15px;
  }

  /* 1. HEADER: Space between logo and best score */
  .header {
    margin-bottom: 20px;
  }

  .desktop-logo,
  .mobile-logo {
    display: none !important;
  }

  .site-logo {
    width: 30px;
    height: 30px;
  }

  .site-name {
    font-size: 18px;
  }

  /* 2. STATS: Horizontal row centered */
  .stats {
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #222;
    padding-bottom: 20px;
  }

  .stat-group {
    width: 100%;
    justify-content: space-around;
    /* WPM | Accuracy | Time */
    gap: 10px;
  }

  /* 3. CONTROLS: Stacked rows for buttons and dropdowns */
  .buttons {
    width: 100%;
    flex-direction: column;
    gap: 15px;
  }

  /* Difficulty row: Easy Medium Hard */
  .difficulty-desktop {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .difficulty-desktop .label {
    display: none;
  }

  /* Hide "Difficulty:" text to save space */

  .diff-btn {
    flex: 1;
    padding: 10px 0;
    font-size: 13px;
  }

  /* Dropdowns row: [1 min] [Passage] */
  .mode {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
  }

  .mode .label {
    display: none;
  }

  .dropdown,
  .mode-mobile {
    flex: 1;
  }

  .time-select {
    width: 100%;
    height: 40px;
    text-align: center;
  }

  .mode-desktop {
    display: none !important;
  }

  /* Hide desktop passage button */
  .mode-mobile {
    display: block !important;
  }

  /* Show mobile passage dropdown */

  /* 4. TYPING AREA */
  .text-area {
    font-size: 22px;
    /* Large clean text for thumbs */
    line-height: 1.6;
  }

  .typing-box {
    max-height: 350px;
  }

  .result-screen {
    padding: 40px 15px;
    display: flex;
    /* Changed from 'none' to 'flex' for styling, but JS will control visibility */
    flex-direction: column;
    align-items: center;
  }

  /* 2. Vertical Stack for Cards */
  .result-stats {
    flex-direction: column;
    width: 100%;
    gap: 15px;
    max-width: 400px;
    /* Optional: keeps cards from getting too wide */
  }

  .result-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align text to the left like the image */
    padding: 15px 20px;
    width: 100%;
    background: #111;
    /* Darker background to match screenshot */
    border: 1px solid #222;
  }

  .result-card span {
    font-size: 16px;
    color: #888;
    margin-bottom: 5px;
  }

  .result-card h2 {
    font-size: 28px;
    margin-top: 0;
  }

  /* 3. Specific colors for stats as per image */
  #resAcc {
    color: #f44336;
    /* Red for accuracy if low */
  }

  #resChar {
    display: flex;
    gap: 5px;
  }

  /* 4. Full width button for better reach */
  .retry-btn {
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    margin-top: 20px;
    padding: 18px;
    font-size: 18px;
  }

  /* 5. Icon sizing */
  .result-icon img {
    width: 80px;
    height: 80px;
  }

  .mode {
    display: flex;
    gap: 10px;
    width: 100%;
  }

  .dropdown,
  .mode-mobile {
    flex: 1;
    max-width: 50%;
    /* Prevents options from expanding the box */
    position: relative;
    overflow: hidden;
  }

  .time-select {
    width: 100% !important;
    display: block;
    padding: 10px;
    background: #111;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
    font-weight: 700;
    appearance: none;
    /* Removes native OS width overrides */

    text-align: center;
    text-align-last: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Removes OS-specific styling that causes size bloating */
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  /* Force options to stay within the select box width */
  .time-select option {
    width: 100%;
    max-width: 100%;
    background: #1c1c1c;
  }

  /* Result Screen: Vertical cards as per screenshot */
  .result-stats {
    flex-direction: column;
    width: 100%;
  }

  .result-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left-aligned labels like the image */
    padding: 16px 20px;
    background: #0f0f0f;
    border: 1px solid #222;
    width: 100%;
  }

  .controls-row {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
  }

  .custom-dropdown {
    flex: 1;
    position: relative;
  }

  /* The Button */
  .dropdown-btn {
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    padding: 10px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* The Menu List */
  .dropdown-list {
    display: none;
    /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    margin-top: 5px;
    z-index: 100;
    list-style: none;
    padding: 5px 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  }

  .difficulty-desktop span {
    display: none;
  }

  .dropdown-list.show {
    display: block;
  }

  .dropdown-list li {
    padding: 12px 15px;
    color: #ccc;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Radio Indicator */
  .radio {
    width: 16px;
    height: 16px;
    border: 2px solid #555;
    border-radius: 50%;
    display: inline-block;
    position: relative;
  }

  .dropdown-list li.selected {
    color: #fff;
  }

  .dropdown-list li.selected .radio {
    border-color: #2196f3;
  }

  .dropdown-list li.selected .radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #2196f3;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ================= TYPING TEST FIXES ================= */
/* The .typing-box is the actual scrolling container. */
.typing-box {
  scroll-behavior: auto;
}

/* Difficulty and Mode stay visible while typing. */
.hide-during-typing {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Local typing history panel */
.local-history {
  display: none;
  margin: 25px auto 0;
  max-width: 700px;
  text-align: left;
  background: #151515;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
}

.local-history.show {
  display: block;
}

.local-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #222;
}

.local-history-header span {
  color: #aaa;
  font-size: 14px;
}

.local-history-clear {
  background: transparent;
  border: 0;
  color: #888;
  cursor: pointer;
  font: inherit;
}

.local-history-clear:hover {
  color: #fff;
}

.local-history-list {
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
}

.local-history-list li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid #202020;
  color: #aaa;
  font-size: 13px;
}

.local-history-list li:last-child {
  border-bottom: 0;
}

.local-history-list strong {
  color: #fff;
}

.history-toggle {
  margin-left: 8px;
  background: transparent;
  border: 1px solid #333;
  color: #aaa;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.history-toggle:hover {
  border-color: #2196f3;
  color: #fff;
}

@media (max-width: 600px) {
  .local-history-list li {
    grid-template-columns: 1fr 1fr;
  }
}


/* ================= PHASE 2-4 FEATURES ================= */
.feature-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.feature-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid #333;
  border-radius: 8px;
  color: #aaa;
  font-size: 13px;
  cursor: pointer;
  background: #111;
}

.feature-toggle:hover {
  border-color: #2196f3;
  color: #fff;
}

.feature-toggle input {
  accent-color: #2196f3;
  cursor: pointer;
}

.advanced-result {
  min-width: 150px;
}

.result-graph-wrap {
  max-width: 760px;
  margin: 0 auto 28px;
  padding: 18px;
  border: 1px solid #222;
  border-radius: 12px;
  background: #111;
  text-align: left;
}

.result-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.result-graph-title {
  color: #ddd;
  font-size: 14px;
  font-weight: 600;
}

.result-graph-subtitle {
  color: #666;
  font-size: 11px;
  margin-top: 4px;
}

.top-speed-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #888;
  font-size: 12px;
  white-space: nowrap;
}

.top-speed-indicator strong {
  color: #fff;
}

.top-speed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2196f3;
  box-shadow: 0 0 8px rgba(33, 150, 243, .65);
}

#wpmGraph {
  width: 100%;
  height: 210px;
  display: block;
}

@media (max-width:600px) {
  .feature-controls {
    width: 100%;
  }

  .feature-toggle {
    flex: 1;
    justify-content: center;
  }

  .live-extra {
    display: none;
  }

  .result-graph-wrap {
    width: 100%;
    padding: 12px;
  }

  .result-graph-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .top-speed-indicator {
    font-size: 11px;
  }

  #wpmGraph {
    height: 190px;
  }
}


/* Feature settings note - keeps the existing design intact */
.feature-note {
  margin-top: 8px;
  color: #777;
  font-size: 11px;
  text-align: right;
}

@media (max-width: 600px) {
  .feature-note {
    text-align: center;
    width: 100%;
  }
}

/* ================= PHASE 5-8 LOCAL FEATURES ================= */
.utility-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap
}

.utility-btn {
  background: transparent;
  border: 1px solid #292929;
  color: #888;
  border-radius: 8px;
  padding: 7px 11px;
  font: 600 12px Sora, Arial, sans-serif;
  cursor: pointer
}

.utility-btn:hover {
  border-color: #2196f3;
  color: #fff
}

.app-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.app-modal.show {
  display: flex
}

.modal-card {
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #141414;
  border: 1px solid #292929;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .5)
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}

.modal-head h2 {
  font-size: 20px
}

.modal-close {
  background: none;
  border: 0;
  color: #888;
  font-size: 28px;
  cursor: pointer
}

.modal-close:hover {
  color: #fff
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #aaa;
  font-size: 12px
}

.settings-grid select,
.settings-grid input {
  background: #0f0f0f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 10px
}

.settings-grid input {
  padding: 7px
}

.settings-hint {
  color: #666;
  font-size: 11px;
  margin-top: 16px
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.dashboard-grid>div {
  background: #101010;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 15px;
  text-align: left
}

.dashboard-grid span {
  display: block;
  color: #777;
  font-size: 11px
}

.dashboard-grid strong {
  display: block;
  color: #fff;
  font-size: 22px;
  margin-top: 6px
}

.dashboard-chart {
  margin-top: 18px;
  padding: 12px;
  background: #101010;
  border: 1px solid #222;
  border-radius: 10px
}

.dashboard-chart canvas {
  width: 100%;
  height: 190px;
  display: block
}

.shortcut-list {
  display: grid;
  gap: 10px
}

.shortcut-list>div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #aaa;
  padding: 10px 0;
  border-bottom: 1px solid #222
}

.shortcut-list span {
  margin-left: auto;
  color: #777
}

.shortcut-list kbd,
.command-hint kbd {
  background: #222;
  border: 1px solid #444;
  border-radius: 5px;
  padding: 3px 7px;
  color: #fff;
  font: 600 11px Sora, Arial, sans-serif
}

.command-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: #181818;
  border: 1px solid #333;
  border-radius: 20px;
  padding: 8px 13px;
  color: #777;
  font-size: 11px;
  z-index: 500;
  opacity: .85
}

body.theme-midnight {
  background: #080d16
}

body.theme-midnight .result-card,
body.theme-midnight .local-history,
body.theme-midnight .result-graph-wrap {
  background: #0d1420
}

body.theme-light {
  background: #f3f3f3;
  color: #171717
}

body.theme-light .best,
body.theme-light .stat,
body.theme-light .feature-toggle,
body.theme-light .result-sub {
  color: #666
}

body.theme-light .stat span,
body.theme-light .result-card h2,
body.theme-light .result-graph-title,
body.theme-light .top-speed-indicator strong {
  color: #111
}

body.theme-light .result-card,
body.theme-light .local-history,
body.theme-light .result-graph-wrap,
body.theme-light .modal-card {
  background: #fff;
  border-color: #ddd
}

body.theme-light .utility-btn,
body.theme-light .feature-toggle {
  background: #fff;
  color: #555;
  border-color: #ccc
}

body.theme-light .text-area {
  color: #777
}

@media(max-width:600px) {
  .utility-actions {
    justify-content: center
  }

  .utility-btn {
    flex: 1
  }

  .settings-grid {
    grid-template-columns: 1fr
  }

  .dashboard-grid {
    grid-template-columns: 1fr 1fr
  }

  .command-hint {
    bottom: 8px
  }

  .modal-card {
    padding: 17px
  }

  .shortcut-list span {
    margin-left: 4px
  }
}

/* ================= THEME + CARET FIXES ================= */
/* Caret styles must only affect the typing characters, never buttons/dropdowns. */
body.caret-block .text-area .active::after {
  width: 100%;
  left: 0;
  opacity: .25;
}

body.caret-block .text-area .active {
  color: inherit;
}

body.caret-underline .text-area .active::after {
  top: auto;
  bottom: -2px;
  width: 100%;
  height: 2px;
  left: 0;
}

/* Midnight Blue: clearly different from the default dark theme. */
body.theme-midnight {
  background: #07111f;
  color: #e8f1ff;
}

body.theme-midnight .stats {
  border-bottom-color: #17283d;
}

body.theme-midnight .btn,
body.theme-midnight .utility-btn,
body.theme-midnight .feature-toggle {
  border-color: #203852;
  color: #a9bdd6;
}

body.theme-midnight .btn.active {
  border-color: #42a5ff;
  color: #42a5ff;
  background: rgba(66, 165, 255, .08);
}

body.theme-midnight .btn:hover,
body.theme-midnight .utility-btn:hover,
body.theme-midnight .feature-toggle:hover {
  border-color: #42a5ff;
  color: #e8f1ff;
}

body.theme-midnight .typing-box {
  scrollbar-color: #203852 transparent;
}

body.theme-midnight .current-word {
  background: rgba(66, 165, 255, .14);
}

body.theme-midnight .start-overlay {
  background: rgba(7, 17, 31, .92);
}

body.theme-midnight .result-card,
body.theme-midnight .local-history,
body.theme-midnight .result-graph-wrap,
body.theme-midnight .modal-card {
  background: #0c1a2b;
  border-color: #203852;
}

body.theme-midnight .dashboard-grid>div,
body.theme-midnight .dashboard-chart {
  background: #0a1727;
  border-color: #1b3048;
}

body.theme-midnight .settings-grid select,
body.theme-midnight .settings-grid input {
  background: #081525;
  color: #e8f1ff;
  border-color: #29445f;
}

body.theme-midnight .shortcut-list>div {
  border-bottom-color: #203852;
}

body.theme-midnight .shortcut-list kbd,
body.theme-midnight .command-hint {
  background: #102238;
  border-color: #29445f;
  color: #a9bdd6;
}

body.theme-midnight .command-hint {
  background: #102238;
}

/* Light: full readable light surface, not just the body background. */
body.theme-light {
  background: #f5f7fa;
  color: #1b2430;
}

body.theme-light .container {
  color: #1b2430;
}

body.theme-light .best,
body.theme-light .stat,
body.theme-light .feature-toggle,
body.theme-light .result-sub,
body.theme-light .top-speed-indicator {
  color: #5f6b7a;
}

body.theme-light .stat span {
  color: #18212b;
}

body.theme-light .stats {
  border-bottom-color: #dce2e8;
}

body.theme-light .btn,
body.theme-light .utility-btn,
body.theme-light .feature-toggle {
  background: #fff;
  border-color: #cfd7df;
  color: #4d5966;
}

body.theme-light .btn:hover,
body.theme-light .utility-btn:hover,
body.theme-light .feature-toggle:hover {
  border-color: #2196f3;
  color: #1769aa;
}

body.theme-light .btn.active {
  background: rgba(33, 150, 243, .09);
  border-color: #2196f3;
  color: #1976d2;
}

body.theme-light .text-area {
  color: #8b96a3;
}

body.theme-light .correct {
  color: #2e8b57;
}

body.theme-light .incorrect {
  color: #d9363e;
}

body.theme-light .current-word {
  background: rgba(33, 150, 243, .10);
}

body.theme-light .start-overlay {
  background: rgba(245, 247, 250, .94);
}

body.theme-light .result-screen h1,
body.theme-light .result-card h2,
body.theme-light .result-card span,
body.theme-light .result-graph-title,
body.theme-light .top-speed-indicator strong {
  color: #18212b;
}

body.theme-light .result-card,
body.theme-light .local-history,
body.theme-light .result-graph-wrap,
body.theme-light .modal-card {
  background: #fff;
  border-color: #d9e0e7;
  box-shadow: 0 8px 30px rgba(20, 35, 50, .07);
}

body.theme-light .result-graph-subtitle,
body.theme-light .local-history-header span,
body.theme-light .feature-note {
  color: #74808d;
}

body.theme-light .local-history-list li {
  border-bottom-color: #e5e9ee;
}

body.theme-light .local-history-list strong {
  color: #18212b;
}

body.theme-light .dashboard-grid>div,
body.theme-light .dashboard-chart {
  background: #f8fafc;
  border-color: #dfe5eb;
}

body.theme-light .dashboard-grid strong {
  color: #18212b;
}

body.theme-light .settings-grid label {
  color: #5f6b7a;
}

body.theme-light .settings-grid select,
body.theme-light .settings-grid input {
  background: #fff;
  color: #18212b;
  border-color: #cfd7df;
}

body.theme-light .shortcut-list>div {
  color: #5f6b7a;
  border-bottom-color: #e2e7ec;
}

body.theme-light .shortcut-list span {
  color: #687582;
}

body.theme-light .shortcut-list kbd,
body.theme-light .command-hint {
  background: #eef2f6;
  border-color: #cfd7df;
  color: #394653;
}

body.theme-light .app-modal {
  background: rgba(27, 36, 48, .32);
}

body.theme-light .modal-close {
  color: #687582;
}

body.theme-light .modal-close:hover {
  color: #18212b;
}

body.theme-light .restart-btn-main {
  color: #1976d2;
}

/* ================= CLEAN MINIMAL CONTROL BAR ================= */
.control-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #171717;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 4px;
}

.control-btn,
.length-btn,
.icon-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: #777;
  font: 600 12px "Sora", Arial, sans-serif;
  border-radius: 7px;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, opacity .18s ease;
}

.control-btn {
  padding: 8px 11px;
}

.control-btn:hover,
.length-btn:hover,
.icon-toggle:hover {
  color: #ddd;
  background: rgba(255, 255, 255, .035);
}

.control-btn.is-active,
.length-btn.is-active {
  color: #e8bd25;
  background: rgba(232, 189, 37, .09);
}

.difficulty-group .control-btn.is-active {
  color: #e8bd25;
}

.mode-group .control-btn span {
  margin-left: 3px;
}

.length-group {
  padding-left: 6px;
  padding-right: 6px;
}

.length-btn {
  min-width: 34px;
  padding: 8px 7px;
}

.custom-length-trigger {
  min-width: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.feature-group {
  padding-left: 5px;
  padding-right: 5px;
}

.icon-toggle {
  min-width: 30px;
  height: 30px;
  font-size: 14px;
}

.icon-toggle.is-on {
  color: #e8bd25;
  background: rgba(232, 189, 37, .09);
}

.icon-toggle[aria-pressed="false"] {
  opacity: .58;
}

.minimal-tools {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 2px;
}

.minimal-tools .utility-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

/* Keep old compatibility controls completely invisible. */
#timeSelect,
#passageBtn,
#punctuationToggle,
#numbersToggle,
#soundToggle {
  display: none !important;
}

/* Shorter passage viewport: approximately 4–5 lines. */
.typing-box {
  height: 250px;
  max-height: 250px;
  padding-right: 4px;
}

/* Custom length dialog */
.custom-modal-card {
  max-width: 620px;
}

.custom-modal-sub {
  color: #777;
  font-size: 12px;
  margin: -8px 0 18px;
}

.custom-test-options {
  display: grid;
  gap: 10px;
}

.custom-option {
  border: 1px solid #252525;
  background: #101010;
  border-radius: 10px;
  padding: 13px;
}

.custom-option>label {
  display: block;
  color: #aaa;
  font-size: 12px;
  margin-bottom: 8px;
}

.custom-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-input-row input {
  flex: 1;
  min-width: 0;
  background: #0b0b0b;
  color: #fff;
  border: 1px solid #303030;
  border-radius: 8px;
  padding: 10px 11px;
  font: 600 14px Sora, Arial, sans-serif;
  outline: none;
}

.custom-input-row input:focus {
  border-color: #e8bd25;
}

.custom-input-row span {
  color: #666;
  font-size: 11px;
  min-width: 48px;
}

.custom-input-row button {
  border: 1px solid #333;
  background: transparent;
  color: #aaa;
  border-radius: 8px;
  padding: 9px 12px;
  font: 600 11px Sora, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.custom-input-row button:hover {
  color: #e8bd25;
  border-color: #e8bd25;
}

/* Explicitly separate caret state from control state. */
.text-area .active::after {
  pointer-events: none;
}

/* Midnight Blue */
body.theme-midnight .control-group {
  background: #0c1727;
  border-color: #1b314a;
}

body.theme-midnight .control-btn,
body.theme-midnight .length-btn,
body.theme-midnight .icon-toggle {
  color: #7892ad;
}

body.theme-midnight .control-btn:hover,
body.theme-midnight .length-btn:hover,
body.theme-midnight .icon-toggle:hover {
  color: #dcecff;
  background: rgba(80, 160, 255, .07);
}

body.theme-midnight .control-btn.is-active,
body.theme-midnight .length-btn.is-active,
body.theme-midnight .icon-toggle.is-on {
  color: #54a9ff;
  background: rgba(84, 169, 255, .11);
}

body.theme-midnight .custom-option {
  background: #0a1422;
  border-color: #1c344d;
}

body.theme-midnight .custom-input-row input {
  background: #07111d;
  color: #e8f1ff;
  border-color: #28435e;
}

body.theme-midnight .custom-input-row input:focus,
body.theme-midnight .custom-input-row button:hover {
  border-color: #54a9ff;
}

/* Light */
body.theme-light .control-group {
  background: #fff;
  border-color: #d9e0e7;
  box-shadow: 0 2px 10px rgba(20, 35, 50, .04);
}

body.theme-light .control-btn,
body.theme-light .length-btn,
body.theme-light .icon-toggle {
  color: #697582;
}

body.theme-light .control-btn:hover,
body.theme-light .length-btn:hover,
body.theme-light .icon-toggle:hover {
  color: #18212b;
  background: #f2f5f8;
}

body.theme-light .control-btn.is-active,
body.theme-light .length-btn.is-active,
body.theme-light .icon-toggle.is-on {
  color: #c08f00;
  background: rgba(232, 189, 37, .13);
}

body.theme-light .custom-option {
  background: #f8fafc;
  border-color: #dfe5eb;
}

body.theme-light .custom-input-row input {
  background: #fff;
  color: #18212b;
  border-color: #cfd7df;
}

body.theme-light .custom-input-row button {
  border-color: #cfd7df;
  color: #5f6b7a;
}

body.theme-light .custom-input-row input:focus,
body.theme-light .custom-input-row button:hover {
  border-color: #c08f00;
  color: #a67a00;
}

body.theme-light .minimal-tools .utility-btn {
  background: #fff;
  border-color: #d4dbe2;
  color: #687582;
}

body.theme-light .minimal-tools .utility-btn:hover {
  color: #1769aa;
  border-color: #2196f3;
}

@media (max-width: 760px) {
  .control-bar {
    justify-content: center;
    gap: 7px;
  }

  .difficulty-group {
    order: 1;
  }

  .mode-group {
    order: 2;
  }

  .length-group {
    order: 3;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .length-group::-webkit-scrollbar {
    display: none;
  }

  .feature-group {
    order: 4;
  }

  .minimal-tools {
    justify-content: center;
    margin-top: 4px;
  }
}

@media (max-width: 600px) {
  .control-bar {
    gap: 7px;
  }

  .control-group {
    border-radius: 9px;
  }

  .control-btn {
    padding: 8px 9px;
  }

  .mode-group .control-btn span {
    display: none;
  }

  .length-btn {
    min-width: 31px;
    padding: 8px 6px;
  }

  .feature-group {
    margin-left: 0;
  }

  .typing-box {
    height: 155px;
    max-height: 155px;
  }

  .text-area {
    line-height: 1.6;
  }

  .custom-input-row {
    flex-wrap: wrap;
  }

  .custom-input-row input {
    flex: 1 1 120px;
  }

  .custom-input-row button {
    flex: 1 1 auto;
  }
}

/* ================= FINAL CLEAN TYPING VIEW ================= */
/* The live mode indicator replaces the old top stats row. */
.minimal-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 10px;
  color: #e8bd25;
  font: 600 13px "Sora", Arial, sans-serif;
  letter-spacing: .2px;
}

.live-status-item {
  display: inline-flex;
  align-items: center;
  min-width: 42px;
  justify-content: center;
}

/* Exactly about three visible lines. Scrolling is controlled only by JS. */
.typing-box {
  height: 145px !important;
  max-height: 145px !important;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
  scrollbar-width: none;
}

.typing-box::-webkit-scrollbar {
  display: none !important;
}

/* Focus prompt: click it or press any key before typing. */
.focus-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  border: 0;
  background: transparent;
  color: #d9d5cb;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  font: 600 16px "Sora", Arial, sans-serif;
  cursor: pointer;
  transition: opacity .18s ease;
}

.focus-overlay:hover {
  color: #fff;
}

.focus-cursor {
  font-size: 19px;
  color: #ddd8cc;
}

.focus-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.text-area.blur {
  filter: blur(3px);
  opacity: .28;
  transition: filter .18s ease, opacity .18s ease;
}

.text-area:not(.blur) {
  filter: none;
  opacity: 1;
}

/* While typing, leave only the selected timer/word counter and passage. */
.typing-active .minimal-status {
  opacity: 1;
}

.typing-active .typing-box {
  margin-top: 0;
}

/* The control buttons are hidden during active typing and return on mouse movement. */
.hide-during-typing {
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

body:not(.typing-active) .hide-during-typing {
  opacity: 1;
  pointer-events: auto;
}

/* Remove visual remnants of the old live-stat row if any older CSS targets remain. */
.stats {
  display: none !important;
}

/* Keep caret state independent from mode/difficulty active state. */
.text-area .active,
.text-area .active::after {
  /* caret only */
}

.control-btn.is-active,
.length-btn.is-active,
.icon-toggle.is-on {
  /* control selection only */
}

body.theme-midnight .minimal-status {
  color: #54a9ff;
}

body.theme-light .minimal-status {
  color: #a67a00;
}

body.theme-light .focus-overlay {
  color: #34404c;
}

body.theme-light .focus-overlay:hover {
  color: #18212b;
}

body.theme-light .focus-cursor {
  color: #536170;
}

@media (max-width: 600px) {
  .typing-box {
    height: 132px !important;
    max-height: 132px !important;
  }

  .focus-overlay {
    font-size: 13px;
    gap: 9px;
  }

  .focus-cursor {
    font-size: 16px;
  }
}

/* During a test the controls stay out of the way; moving the mouse reveals them briefly. */
body.typing-active .hide-during-typing {
  opacity: 0;
  pointer-events: none;
}

body.typing-active.typing-controls-visible .hide-during-typing {
  opacity: 1;
  pointer-events: auto;
}

/* Keep restart/history and command hint out of the focused typing view. */
body.typing-active .restart-wrapper {
  visibility: hidden !important;
}

body.typing-active .command-hint {
  display: none !important;
}

/* ================= FINAL CLEAN TYPING LAYOUT ================= */
/* Keep the passage comfortably inset on both sides while retaining the same
   left alignment as the main content container. */
.typing-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  height: 136px !important;
  max-height: 136px !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.text-area {
  width: 100%;
  padding: 0;
  line-height: 1.6;
}

/* The restart/history controls are real controls and should remain available
   before and after a test. During typing the clean focus view still hides them. */
body:not(.typing-active) .restart-wrapper {
  display: block !important;
}

/* Do not let caret styles share any selector/state with control buttons. */
.control-btn.is-active,
.length-btn.is-active,
.icon-toggle.is-on {
  /* mode/length/feature selection only */
}

.text-area .active {
  /* caret position only */
}

@media (max-width: 600px) {
  .typing-box {
    width: 100%;
    padding: 0 14px;
    height: 132px !important;
    max-height: 132px !important;
  }
}


/* ================= FINAL USER REQUEST FIXES ================= */
/* During typing, keep the interface completely clean: only the selected
   time/word indicator and the passage remain visible. */
body.typing-active .control-bar,
body.typing-active .minimal-tools {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* The selected mode determines which length group exists in the shared
   length position. The HTML hidden attribute must always win. */
.length-group[hidden] {
  display: none !important;
}

/* Exactly three complete lines; never expose a partial fourth line. */
.typing-box {
  --typing-font-size: 28px;
  height: calc(var(--typing-font-size) * 1.6 * 3) !important;
  max-height: calc(var(--typing-font-size) * 1.6 * 3) !important;
  min-height: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.text-area,
.text-area:focus,
.typing-box:focus,
.typing-box:focus-within {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Custom mode is not a mode. It is only a length choice inside Time or Words. */
.custom-option[hidden] {
  display: none !important;
}

/* Restart + History are available before and after every test. */
body:not(.typing-active) .restart-wrapper,
body.typing-active .restart-wrapper {
  /* The wrapper itself is controlled by JS; during typing the clean view hides it. */
}

body.typing-active .restart-wrapper {
  visibility: hidden !important;
}

body:not(.typing-active) .restart-wrapper {
  display: block !important;
}

@media (max-width: 600px) {
  .typing-box {
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: calc(var(--typing-font-size, 28px) * 1.6 * 3) !important;
    max-height: calc(var(--typing-font-size, 28px) * 1.6 * 3) !important;
  }
}

/* ================= FOOTER + CONTROL REVEAL FIX ================= */
.site-footer {
  width: min(100%, 1200px);
  margin: 18px auto 0;
  padding: 10px 28px;
  box-sizing: border-box;
}

.footer-tools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.footer-theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #292929;
  border-radius: 8px;
  color: #777;
  font: 600 12px Sora, Arial, sans-serif;
}

.footer-theme select {
  border: 0;
  outline: 0;
  background: transparent;
  color: #aaa;
  font: 600 12px Sora, Arial, sans-serif;
  cursor: pointer;
}

.footer-theme select option {
  background: #141414;
  color: #fff;
}

.site-footer .utility-btn {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Never collapse the top controls: mouse movement can reveal them again. */
body.typing-active .control-bar,
body.typing-active .minimal-tools {
  height: auto !important;
  max-height: 200px !important;
  margin: initial !important;
  overflow: visible !important;
}

body.typing-active.typing-controls-visible .control-bar,
body.typing-active.typing-controls-visible .minimal-tools,
body.typing-active.typing-controls-visible .site-footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Result screen replaces the test controls; restart/history stay out of it. */
body.result-visible .restart-wrapper {
  display: none !important;
}

body.theme-midnight .site-footer {
  border-top-color: #1b314a;
}

body.theme-midnight .footer-theme {
  border-color: #1b314a;
  background: #0c1727;
  color: #7892ad;
}

body.theme-midnight .footer-theme select {
  color: #9fc7ed;
}

body.theme-midnight .site-footer .utility-btn {
  border-color: #1b314a;
  color: #7892ad;
}

body.theme-light .footer-theme {
  border-color: #d4dbe2;
  background: #fff;
  color: #687582;
}

body.theme-light .footer-theme select {
  color: #4f5d6a;
}

body.theme-light .site-footer .utility-btn {
  background: #fff;
  border-color: #d4dbe2;
  color: #687582;
}

@media (max-width: 600px) {
  .site-footer {
    padding: 10px 14px;
  }

  .footer-label {
    display: none;
  }

  .footer-theme,
  .site-footer .utility-btn {
    flex: 1;
    min-width: 0;
  }
}


/* TypingMeter brand */
body.theme-midnight .site-name {
  color: #e8f1ff;
}

body.theme-light .site-name {
  color: #171717;
}

/* =========================================================
   FINAL FOOTER LAYOUT
   Information links stay on the left; settings/tools stay on
   the right. Footer is after the test/result area, never directly
   between the passage and Restart/History.
   ========================================================= */
.site-footer {
  width: min(100%, 1200px);
  margin: 34px auto 0;
  padding: 18px 28px 24px;
  border-top: 1px solid #252525;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "info settings"
    "copy copy";
  align-items: center;
  gap: 12px 24px;
}

.footer-info-links {
  grid-area: info;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.info-footer-link {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0;
  color: #777;
  font: 500 12px Sora, Arial, sans-serif;
  cursor: pointer;
  transition: color .18s ease;
}

.info-footer-link:hover,
.info-footer-link:focus-visible {
  color: #c9c9c9;
  outline: none;
}

.footer-settings-area {
  grid-area: settings;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.footer-copy {
  grid-area: copy;
  margin: 2px 0 0;
  color: #555;
  font: 500 10px Sora, Arial, sans-serif;
}

/* Result state: restart/history disappear, footer remains at the bottom. */
body.result-visible .restart-wrapper {
  display: none !important;
}

/* Keep the footer hidden in the clean typing view, but reveal it with
   the existing mouse-movement control reveal behavior. */
body.typing-active .site-footer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.typing-active.typing-controls-visible .site-footer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body:not(.typing-active) .site-footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 700px) {
  .site-footer {
    padding-left: 14px;
    padding-right: 14px;
    grid-template-columns: 1fr;
    grid-template-areas:
      "info"
      "settings"
      "copy";
  }

  .footer-info-links {
    justify-content: center;
  }

  .footer-settings-area {
    justify-content: center;
  }

  .footer-copy {
    text-align: center;
  }
}

/* One-page information modal panels */
.info-panel {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(5px);
}

.info-panel.show {
  display: flex;
}

.info-panel-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 28px 30px;
  border: 1px solid #2b2b2b;
  border-radius: 14px;
  background: #121212;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
}

.info-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.info-kicker {
  color: #777;
  font: 700 10px Sora, Arial, sans-serif;
  letter-spacing: .14em;
}

.info-panel-card h2 {
  margin: 5px 0 0;
  color: #eee;
  font: 700 27px/1.2 Sora, Arial, sans-serif;
}

.info-panel-card h3 {
  margin: 24px 0 7px;
  color: #ddd;
  font: 650 15px/1.35 Sora, Arial, sans-serif;
}

.info-panel-card p,
.info-panel-card li {
  color: #999;
  font: 400 13px/1.8 Sora, Arial, sans-serif;
}

.info-panel-card ul,
.info-panel-card ol {
  padding-left: 22px;
}

.info-panel-card a {
  color: #54a9ff;
}

.info-close {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  background: transparent;
  color: #999;
  font-size: 22px;
  cursor: pointer;
}

.info-close:hover {
  color: #fff;
  border-color: #444;
}

body.info-panel-open {
  overflow: hidden;
}

body.theme-midnight .info-panel-card {
  background: #0b1624;
  border-color: #203852;
}

body.theme-light .info-panel-card {
  background: #fff;
  border-color: #d7dde4;
}

body.theme-light .info-panel-card h2,
body.theme-light .info-panel-card h3 {
  color: #18212b;
}

body.theme-light .info-panel-card p,
body.theme-light .info-panel-card li {
  color: #596674;
}

@media (max-width: 600px) {
  .info-panel {
    padding: 14px;
  }

  .info-panel-card {
    max-height: calc(100vh - 28px);
    padding: 22px 18px;
  }

  .info-panel-card h2 {
    font-size: 23px;
  }
}


/* Settings button lives on the RIGHT side of the footer.
   Settings itself opens as a CENTER modal, exactly like Statistics. */
#settingsModal {
  justify-content: center !important;
  align-items: center !important;
  padding: 28px !important;
}

#settingsModal .modal-card {
  width: min(760px, 94vw);
  height: auto;
  max-height: min(760px, calc(100vh - 56px));
  border-radius: 14px;
  margin: 0 auto;
  overflow-y: auto;
}

body.modal-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  #settingsModal {
    padding: 14px !important;
  }

  #settingsModal .modal-card {
    width: min(420px, 94vw);
    max-height: calc(100vh - 28px);
    border-radius: 12px;
  }
}


/* FINAL LAYOUT FIX: footer is at the bottom of the document, never directly
   underneath the restart/history controls. */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body>main {
  flex: 1 0 auto;
}

body>.site-footer {
  flex: 0 0 auto;
  position: static !important;
  inset: auto !important;
  width: 100%;
  margin-top: auto !important;
  clear: both;
}

/* Result screen remains above the footer. */
body.result-visible>main {
  flex: 1 0 auto;
}

/* The footer should not be visually attached to Restart/History. */
.restart-wrapper {
  margin-bottom: 90px !important;
}

/* The old completion heading/subtitle are intentionally removed. */
.result-complete-message,
.result-title,
.result-subtitle {
  display: none !important;
}


/* FINAL POSITION FIX
   Keep the header, controls, timer and typing area anchored at the same
   top position before and after typing starts. The footer stays at the
   bottom because the container fills the available page height.
*/
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body>.container {
  width: 100%;
  flex: 1 0 auto;
  margin: 0 auto !important;
}

/* Do not let focus mode change the vertical position of the top UI. */
body.typing-active>.container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Result screen keeps its full result panel; only the requested text
   heading/subtitle are removed. */
.result-screen {
  display: none;
}

body.result-visible .result-screen {
  display: block !important;
}

body.result-visible>.container {
  flex: 1 0 auto;
}

/* =========================================================
   FINAL STABLE PAGE FLOW
   - The top container never vertically centers/grows when typing starts.
   - Typing area remains in the same position before/after focus.
   - Restart/History stay immediately below the typing area.
   - Footer stays at the bottom of the page, after restart/result content.
   ========================================================= */
html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* IMPORTANT: do not use margin:auto or flex-grow on the top container. */
body>.container {
  width: 100%;
  max-width: 1200px;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

/* These elements must remain normal-flow blocks. */
body>.typing-box,
body>.restart-wrapper,
body>.result-screen {
  flex: 0 0 auto;
}

/* Footer is the final normal-flow element and only consumes leftover
   viewport space when the page content is shorter than the viewport. */
body>.site-footer {
  flex: 0 0 auto !important;
  position: static !important;
  inset: auto !important;
  width: 100%;
  max-width: none;
  margin-top: auto !important;
  clear: both;
}

/* Never let focus mode alter the vertical position of the top UI. */
body.typing-active>.container {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Result panel is still fully displayed by JS when the test ends. */
.result-screen {
  display: none;
}

body.result-visible .result-screen {
  display: block !important;
}

/* Restart/history disappear only on the result screen. */
body.result-visible .restart-wrapper {
  display: none !important;
}

/* No automatic removal of the result graph/stat cards. */
.result-graph-wrap,
.result-stats,
.retry-btn,
.result-icon {
  visibility: visible;
}

@media (max-width: 600px) {
  body>.container {
    width: 100%;
  }
}


/* ================= SEO CONTENT / LANDING PAGES ================= */
.seo-hero {
  max-width: 900px;
  margin: 18px auto 14px;
  text-align: center;
}

.seo-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.2;
}

.seo-hero p {
  max-width: 760px;
  margin: 0 auto 14px;
  color: #929292;
  line-height: 1.65;
  font-size: 14px;
}

.seo-quick-links,
.seo-link-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.seo-quick-links a,
.seo-link-grid a {
  color: #8fbfff;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid #252525;
  border-radius: 7px;
}

.seo-quick-links a:hover,
.seo-link-grid a:hover {
  border-color: #2196f3;
}

.seo-content {
  width: min(100% - 40px, 980px);
  margin: 54px auto 10px;
  padding: 28px 0 20px;
  border-top: 1px solid #202020;
  color: #aaa;
  line-height: 1.7;
}

.seo-content h2 {
  color: #eee;
  font-size: 22px;
  margin: 0 0 10px;
}

.seo-content h2:not(:first-child) {
  margin-top: 30px;
}

.seo-content h3 {
  color: #ddd;
  font-size: 16px;
  margin: 0 0 7px;
}

.seo-content p {
  margin: 0 0 12px;
  font-size: 14px;
}

.seo-content-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.seo-content-grid article {
  min-width: 0;
}

.seo-faq details {
  border-top: 1px solid #242424;
  padding: 12px 0;
}

.seo-faq details:last-child {
  border-bottom: 1px solid #242424;
}

.seo-faq summary {
  cursor: pointer;
  color: #ddd;
  font-weight: 600;
}

.seo-faq p {
  margin-top: 8px;
}

@media (max-width: 700px) {
  .seo-content-grid {
    grid-template-columns: 1fr;
  }

  .seo-content {
    width: min(100% - 28px, 980px);
  }
}


.seo-landing {
  width: min(100% - 32px, 980px);
  margin: 18px auto 0;
}

.seo-landing .landing-header {
  text-align: center;
  margin-bottom: 18px;
}

.seo-landing h1 {
  font-size: clamp(25px, 4vw, 36px);
  margin: 0 0 9px;
  color: #eee;
}

.seo-landing .landing-lead {
  max-width: 760px;
  margin: 0 auto;
  color: #999;
  line-height: 1.7;
  font-size: 14px;
}

.seo-landing .landing-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 15px 0 22px;
}

.seo-landing .landing-links a {
  color: #8fbfff;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid #252525;
  border-radius: 7px;
}

.seo-landing .landing-links a:hover {
  border-color: #2196f3;
}

.landing-info {
  margin: 28px 0 45px;
  border-top: 1px solid #202020;
  padding-top: 25px;
}

.landing-info h2 {
  color: #eee;
  font-size: 21px;
  margin: 0 0 9px;
}

.landing-info h3 {
  color: #ddd;
  font-size: 16px;
  margin: 22px 0 6px;
}

.landing-info p,
.landing-info li {
  color: #aaa;
  font-size: 14px;
  line-height: 1.75;
}

.landing-info ul,
.landing-info ol {
  padding-left: 22px;
}

.tool-extra,
.article-extra {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid #202020;
}

.calc-box {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.calc-box label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #aaa;
  font-size: 13px;
}

.calc-box input {
  background: #151515;
  color: #eee;
  border: 1px solid #292929;
  border-radius: 7px;
  padding: 10px;
}

.calc-box button {
  border: 1px solid #2196f3;
  background: transparent;
  color: #8fc2ff;
  padding: 10px 14px;
  border-radius: 7px;
  cursor: pointer;
}

.calc-box p {
  grid-column: 1/-1;
  color: #aaa;
}

.wpm-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.wpm-table th,
.wpm-table td {
  border: 1px solid #292929;
  padding: 10px;
  text-align: left;
  color: #aaa;
}

.wpm-table th {
  color: #ddd;
}

@media(max-width:650px) {
  .calc-box {
    grid-template-columns: 1fr;
  }

  .calc-box p {
    grid-column: auto;
  }
}

/* ================= TYPING RACE - PHASE 1 ================= */
.typing-race-section {
  max-width: 900px;
  margin: 34px auto 20px;
  padding: 0 20px;
}

.race-card {
  background: #151515;
  border: 1px solid #292929;
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}

.race-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 24px;
}

.race-kicker {
  color: #2196f3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.race-header h2 {
  margin: 5px 0 7px;
  font-size: 26px;
}

.race-header p,
.race-note,
.race-waiting p,
.race-ready p {
  color: #8e8e8e;
  font-size: 13px;
  line-height: 1.6;
}

.race-close {
  border: 1px solid #333;
  background: transparent;
  color: #aaa;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 22px;
}

.race-lobby {
  display: grid;
  gap: 14px;
}

.race-primary-btn,
.race-secondary-btn {
  border-radius: 10px;
  padding: 12px 18px;
  font-weight: 700;
  cursor: pointer;
  transition: .2s ease;
}

.race-primary-btn {
  border: 1px solid #2196f3;
  background: #2196f3;
  color: #fff;
}

.race-primary-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.race-secondary-btn {
  border: 1px solid #333;
  background: #1d1d1d;
  color: #ddd;
}

.race-secondary-btn:hover {
  border-color: #2196f3;
}

.race-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #666;
  font-size: 11px;
}

.race-divider::before,
.race-divider::after {
  content: "";
  height: 1px;
  background: #282828;
  flex: 1;
}

.race-join-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.race-join-row input {
  min-width: 0;
  background: #0f0f0f;
  color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.race-join-row input:focus {
  border-color: #2196f3;
}

.race-waiting,
.race-ready,
.race-result {
  text-align: center;
}

.race-status-pill {
  display: inline-block;
  border: 1px solid #333;
  background: #101010;
  color: #aaa;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  margin-bottom: 18px;
}

.race-code-box {
  max-width: 420px;
  margin: 0 auto 15px;
  border: 1px dashed #3a3a3a;
  border-radius: 14px;
  padding: 16px;
  display: grid;
  gap: 8px;
}

.race-code-box span {
  color: #777;
  font-size: 10px;
  letter-spacing: 1.4px;
}

.race-code-box strong {
  font-size: 30px;
  letter-spacing: 6px;
}

.race-code-box button {
  margin: 4px auto 0;
  border: 0;
  background: transparent;
  color: #2196f3;
  cursor: pointer;
  font-weight: 700;
}

.race-ready {
  display: grid;
  gap: 18px;
}

.race-players-mini {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
}

.race-players-mini>div:not(.race-vs-mini) {
  background: #101010;
  border: 1px solid #292929;
  border-radius: 12px;
  padding: 14px;
  display: grid;
  gap: 5px;
}

.race-players-mini span {
  color: #777;
  font-size: 11px;
}

.race-vs-mini {
  color: #2196f3;
  font-weight: 800;
  font-size: 12px;
}

.race-ready-actions,
.race-result-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.race-battle {
  position: relative;
}

.race-countdown {
  min-height: 54px;
  text-align: center;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 800;
  color: #2196f3;
  margin-bottom: 16px;
}

.race-player-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px;
  align-items: center;
  margin: 12px 0;
}

.race-player-info {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.race-player-label {
  color: #777;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 700;
}

.race-player-info strong {
  font-size: 13px;
}

.race-player-progress {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px;
  align-items: center;
}

.race-progress-track {
  height: 11px;
  border-radius: 999px;
  background: #252525;
  overflow: hidden;
}

.race-progress-fill {
  width: 0;
  height: 100%;
  background: #2196f3;
  border-radius: inherit;
  transition: width .08s linear;
}

.race-progress-fill.opponent {
  background: #9b59b6;
}

.race-player-progress>span {
  color: #aaa;
  font-size: 11px;
  text-align: right;
}

.race-live-status {
  text-align: center;
  color: #8e8e8e;
  font-size: 12px;
  margin: 18px 0 14px;
}

.race-typing-text {
  background: #0d0d0d;
  border: 1px solid #292929;
  border-radius: 12px;
  padding: 18px;
  min-height: 110px;
  color: #777;
  font-size: 20px;
  line-height: 1.7;
  text-align: left;
  user-select: none;
  margin-bottom: 12px;
}

.race-typing-text .race-char-correct {
  color: #4caf50;
}

.race-typing-text .race-char-wrong {
  color: #ff4d4d;
  text-decoration: underline;
}

.race-typing-text .race-char-current {
  color: #fff;
  background: rgba(33, 150, 243, .14);
  border-radius: 3px;
}

.race-input {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  background: #101010;
  color: #fff;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 14px;
  font: 500 16px/1.6 Sora, Arial, sans-serif;
  outline: none;
}

.race-input:focus {
  border-color: #2196f3;
}

.race-result-icon {
  font-size: 48px;
  margin-bottom: 6px;
}

.race-result h3 {
  font-size: 30px;
  margin-bottom: 7px;
}

.race-result>p {
  color: #999;
  margin-bottom: 20px;
}

.race-result-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}

.race-result-stats>div {
  background: #101010;
  border: 1px solid #292929;
  border-radius: 11px;
  padding: 14px 8px;
}

.race-result-stats span {
  display: block;
  color: #777;
  font-size: 10px;
  margin-bottom: 5px;
}

.race-result-stats strong {
  font-size: 19px;
}

@media (max-width: 600px) {
  .typing-race-section {
    padding: 0 15px;
    margin-top: 25px;
  }

  .race-card {
    padding: 18px;
    border-radius: 14px;
  }

  .race-header h2 {
    font-size: 22px;
  }

  .race-join-row {
    grid-template-columns: 1fr;
  }

  .race-players-mini {
    grid-template-columns: 1fr;
  }

  .race-vs-mini {
    order: 2;
  }

  .race-players-mini>div:not(.race-vs-mini) {
    width: 100%;
  }

  .race-player-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .race-player-info {
    justify-content: space-between;
  }

  .race-typing-text {
    font-size: 17px;
    line-height: 1.65;
  }

  .race-result-stats {
    grid-template-columns: 1fr 1fr;
  }

  .race-countdown {
    font-size: 36px;
  }
}


.race-launcher {
  border: 1px solid #2196f3;
  background: rgba(33, 150, 243, .08);
  color: #8fc7ff;
  font: 600 13px Sora, Arial, sans-serif;
  padding: 6px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.race-launcher:hover {
  background: rgba(33, 150, 243, .15);
  border-color: #42a5ff;
}

/* ================= MULTIPLAYER GAMES PROMOTION ================= */
/* New section only. Existing TypingMeter UI is unchanged. */

.games-promo {
  width: min(100% - 40px, 980px);
  margin: 34px auto 0;
  padding: 22px 0 4px;
  border-top: 1px solid #202020;
}

.games-promo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.games-promo-kicker {
  display: block;
  margin-bottom: 5px;
  color: #2196f3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.games-promo h2 {
  margin: 0 0 6px;
  color: #eee;
  font-size: 22px;
  line-height: 1.25;
}

.games-promo-head p {
  max-width: 650px;
  margin: 0;
  color: #777;
  font-size: 13px;
  line-height: 1.6;
}

.games-promo-all {
  flex: 0 0 auto;
  color: #8fbfff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.games-promo-all:hover {
  color: #fff;
}

.games-promo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.game-promo-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 12px;
  background: #111;
  border: 1px solid #222;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.game-promo-card:hover {
  border-color: #333;
  background: #151515;
  transform: translateY(-2px);
}

.game-promo-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #181818;
  font-size: 15px;
}

.game-promo-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-promo-info strong {
  overflow: hidden;
  color: #ddd;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-promo-info small {
  overflow: hidden;
  color: #666;
  font-size: 10px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-promo-arrow {
  margin-left: auto;
  color: #555;
  font-size: 13px;
  transition: transform .2s ease, color .2s ease;
}

.game-promo-card:hover .game-promo-arrow {
  color: #8fbfff;
  transform: translateX(2px);
}

@media (max-width: 900px) {
  .games-promo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .games-promo {
    width: min(100% - 28px, 980px);
    margin-top: 28px;
    padding-top: 20px;
  }

  .games-promo-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .games-promo-head p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .games-promo-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   TypingMeter — Original CSS Mobile Refinement
   Targeted changes only; existing desktop UI is preserved.
   ========================================================= */

:root {
  --theme-active: #2563eb;
  --theme-active-hover: #1d4ed8;
}

/* Theme-colored active controls */
button.active,
button.selected,
.control-btn.active,
.option-btn.active,
.mode-btn.active,
.time-btn.active,
.word-btn.active,
.difficulty-btn.active,
.test-option.active,
.setting-btn.active,
.theme-btn.active {
  background: var(--theme-active);
  border-color: var(--theme-active);
  color: #fff;
}

button.active:hover,
button.selected:hover,
.control-btn.active:hover,
.option-btn.active:hover,
.mode-btn.active:hover,
.time-btn.active:hover,
.word-btn.active:hover,
.difficulty-btn.active:hover,
.test-option.active:hover,
.setting-btn.active:hover,
.theme-btn.active:hover {
  background: var(--theme-active-hover);
  border-color: var(--theme-active-hover);
  color: #fff;
}

/* Use the existing theme color variables when they exist */
[data-theme="green"] {
  --theme-active: #16a34a;
  --theme-active-hover: #15803d;
}

[data-theme="purple"] {
  --theme-active: #7c3aed;
  --theme-active-hover: #6d28d9;
}

[data-theme="orange"] {
  --theme-active: #ea580c;
  --theme-active-hover: #c2410c;
}

[data-theme="red"] {
  --theme-active: #dc2626;
  --theme-active-hover: #b91c1c;
}

/* ---------- Mobile only ---------- */
@media (max-width: 700px) {

  /* Prevent the original desktop spacing from creating horizontal overflow */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  main,
  .main-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Keep the original header style, just make it compact */
  header {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Controls: allow natural wrapping instead of squeezing buttons */
  .controls,
  .control-panel,
  .test-controls,
  .settings-controls {
    width: 100%;
    box-sizing: border-box;
  }

  .controls {
    gap: 8px;
  }

  /* Existing button groups remain visually consistent */
  .control-group,
  .button-group,
  .difficulty-controls,
  .time-controls,
  .word-controls {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Touch-friendly controls */
  .controls button,
  .control-group button,
  .button-group button,
  .difficulty-controls button,
  .time-controls button,
  .word-controls button,
  .control-btn,
  .option-btn,
  .mode-btn,
  .time-btn,
  .word-btn,
  .difficulty-btn {
    min-height: 42px;
    box-sizing: border-box;
  }

  /* Do not let long labels force the page wider */
  button {
    max-width: 100%;
    white-space: nowrap;
  }

  /* Typing area */
  .typing-box,
  .text-area {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .text-area {
    overflow: hidden;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Results */
  .result-screen,
  .results,
  .result-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Footer links should wrap cleanly */
  footer {
    max-width: 100%;
    box-sizing: border-box;
  }

  footer a,
  footer button {
    min-height: 40px;
  }
}

/* ---------- Small phones ---------- */
@media (max-width: 480px) {

  body {
    -webkit-text-size-adjust: 100%;
  }

  header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Make the main control area easier to tap */
  .controls,
  .control-panel,
  .test-controls {
    gap: 7px;
  }

  .controls button,
  .control-group button,
  .button-group button,
  .difficulty-controls button,
  .time-controls button,
  .word-controls button,
  .control-btn,
  .option-btn,
  .mode-btn,
  .time-btn,
  .word-btn,
  .difficulty-btn {
    min-height: 44px;
    padding: 9px 10px;
    font-size: 14px;
  }

  /* Avoid oversized typing text on narrow displays */
  .typing-box {
    padding-left: 12px;
    padding-right: 12px;
  }

  .text-area {
    font-size: 18px;
    line-height: 1.7;
  }

  /* Result cards can use the full phone width */
  .result-card,
  .stat-card {
    min-width: 0;
    box-sizing: border-box;
  }

  footer {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {

  .controls button,
  .control-group button,
  .button-group button,
  .difficulty-controls button,
  .time-controls button,
  .word-controls button,
  .control-btn,
  .option-btn,
  .mode-btn,
  .time-btn,
  .word-btn,
  .difficulty-btn {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }

  .text-area {
    font-size: 17px;
    line-height: 1.65;
  }
}

/* Keyboard focus remains visible for accessibility */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--theme-active);
  outline-offset: 2px;
}