/* ========================================= */
/* GLOBAL                                    */
/* ========================================= */

body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  height: 100dvh; /* Safari fix */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #faf8f0;
  font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
}

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

#game-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fffbe6;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* ========================================= */
/* CANVAS                                    */
/* ========================================= */

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Play area must not pan/zoom on touch (double-tap, pinch). */
  touch-action: none;
  background-color: #a9d57e;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'>\
  <path d='M10 20 l-2 -6 l4 0 Z' fill='%23557a34'/>\
  </svg>");
  background-size: 20px 20px;
  background-position: 0 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* ========================================= */
/* GRASS ANIMATION                           */
/* ========================================= */

.grass-static {
  animation-name: none !important;
}

.grass-moving {
  animation-name: grassScroll;
  animation-duration: 5s;
}

.grass-boost {
  animation-name: grassScroll;
  animation-duration: 2s;
}

@keyframes grassScroll {
  from { background-position: 0 0; }
  to { background-position: 0 100px; }
}

/* ========================================= */
/* HUD — SCORE CONTAINER (top right)         */
/* ========================================= */

#score-container {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #5e3a00;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
  text-shadow: 1px 1px 2px #fff;
  background: rgba(255, 250, 230, 0.85);
  border: 2px solid #c2b280;
  border-radius: 8px;
  padding: 8px 12px;
}

#current-score {
  font-size: 20px;
}

#high-score {
  font-size: 16px;
  opacity: 0.85;
}

/* ========================================= */
/* HUD — MINI LEADERBOARD (in-game)          */
/* ========================================= */

#mini-leaderboard {
  margin-top: 10px;
  background: rgba(255, 250, 230, 0.85);
  border: 2px solid #c2b280;
  border-radius: 8px;
  padding: 6px 10px;
  max-width: 180px;
}

.mini-lb-title {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #5e3a00;
}

#mini-leaderboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  color: #5e3a00;
}

#mini-leaderboard-list li {
  padding: 2px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(194, 178, 128, 0.2);
}

#mini-leaderboard-list li:last-child {
  border-bottom: none;
}

.mini-lb-name {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-lb-score {
  font-weight: bold;
  margin-left: 8px;
}

/* ========================================= */
/* HUD — HEALTH CONTAINER (top left)         */
/* ========================================= */

#health-container {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #5e3a00;
  font-size: 18px;
  font-weight: bold;
  z-index: 10;
  text-shadow: 1px 1px 2px #fff;
  background: rgba(255, 250, 230, 0.85);
  border: 2px solid #c2b280;
  border-radius: 8px;
  padding: 8px 12px;
}

/* ========================================= */
/* HUD — UI BLOCKS & LABELS                  */
/* ========================================= */

.ui-block {
  margin-bottom: 8px;
}

.ui-block:last-child {
  margin-bottom: 0;
}

.ui-label {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 3px;
  color: #5e3a00;
}

/* ========================================= */
/* HUD — HEALTH BAR                          */
/* ========================================= */

#health-bar {
  display: flex;
  width: 120px;
  height: 18px;
  background-color: #ddd;
  border: 2px solid #5e3a00;
  border-radius: 5px;
  overflow: hidden;
}

#health-bar div {
  flex: 1;
  background-color: #4caf50;
  transition: background-color 0.3s;
}

/* ========================================= */
/* HUD — MISSED ENEMIES BAR                  */
/* ========================================= */

#missed-bar {
  display: flex;
  width: 120px;
  height: 18px;
  background-color: #ddd;
  border: 2px solid #5e3a00;
  border-radius: 5px;
  overflow: hidden;
}

#missed-bar div {
  flex: 1;
  background-color: #ddd;
  transition: background-color 0.3s;
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

/* ========================================= */
/* TOUCH CONTROLS                            */
/* ========================================= */

#touch-controls {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#touch-controls button {
  background-color: #ffe4b5;
  color: #5e3a00;
  border: 2px solid #5e3a00;
  padding: 12px;
  margin: 5px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, transform 0.3s;
  /* Kill iOS double-tap-to-zoom on the controls (user-scalable=no is
     ignored by Safari); manipulation also removes the 300ms tap delay. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#touch-controls button:hover {
  background-color: #ffdead;
  transform: scale(1.1);
}

@media (hover: none) and (pointer: coarse) {
  #touch-controls {
    display: flex;
  }
}

/* ========================================= */
/* MENUS — SHARED (start, pause)             */
/* ========================================= */

#start-menu,
#pause-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 250, 230, 0.95);
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#start-menu h1,
#game-over-screen h1,
#pause-menu h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #5e3a00;
}

#game-over-screen p,
#pause-menu p {
  font-size: 20px;
  margin-bottom: 20px;
  color: #5e3a00;
}

/* ========================================= */
/* MENUS — SHARED BUTTON STYLE               */
/* ========================================= */

#start-menu button,
#game-over-screen button,
#pause-menu button {
  background-color: #ffe4b5;
  color: #5e3a00;
  border: 2px solid #5e3a00;
  padding: 12px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 8px;
  margin: 6px;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  width: 220px;
  box-sizing: border-box;
  text-align: center;
}

#start-menu button:hover,
#game-over-screen button:hover,
#pause-menu button:hover {
  background-color: #ffdead;
  transform: scale(1.05);
}

/* ========================================= */
/* GAME OVER SCREEN                          */
/* ========================================= */

#game-over-screen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 250, 230, 0.97);
  padding: 20px 25px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
  max-width: 420px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
}

#game-over-score-summary {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
  color: #5e3a00;
}

.game-over-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ========================================= */
/* GAME OVER — LEADERBOARD INPUT             */
/* ========================================= */

#leaderboard-input {
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
  width: 100%;
  justify-content: center;
}

#leaderboard-username {
  padding: 10px 12px;
  border: 2px solid #c2b280;
  border-radius: 8px;
  font-size: 16px;
  width: 60%;
  background: #fffbe6;
  color: #5e3a00;
  outline: none;
  transition: border-color 0.3s;
}

#leaderboard-username:focus {
  border-color: #5e3a00;
}

#leaderboard-username::placeholder {
  color: #c2b280;
}

#submit-leaderboard-btn {
  min-width: auto !important;
  width: auto !important;
  padding: 10px 16px !important;
  font-size: 16px !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* ========================================= */
/* GAME OVER — LEADERBOARD TABLE             */
/* ========================================= */

#leaderboard-section {
  width: 100%;
  margin-bottom: 15px;
}

#leaderboard-section h3 {
  font-size: 18px;
  color: #5e3a00;
  margin-bottom: 8px;
  text-align: center;
}

#leaderboard-table-wrapper {
  max-height: 200px;
  overflow-y: auto;
  border: 2px solid #c2b280;
  border-radius: 8px;
}

#leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #5e3a00;
  text-align: center;
}

#leaderboard-table thead {
  background: #ffe4b5;
  position: sticky;
  top: 0;
}

#leaderboard-table th {
  padding: 8px 6px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #c2b280;
}

#leaderboard-table td {
  padding: 6px;
  text-align: center;
  border-bottom: 1px solid rgba(194, 178, 128, 0.3);
}

#leaderboard-table tbody tr:hover {
  background: rgba(255, 228, 181, 0.3);
}

#leaderboard-table tbody tr:nth-child(1) td:first-child::before { content: '🥇 '; }
#leaderboard-table tbody tr:nth-child(2) td:first-child::before { content: '🥈 '; }
#leaderboard-table tbody tr:nth-child(3) td:first-child::before { content: '🥉 '; }

/* ========================================= */
/* MODAL — SHARED STYLES                     */
/* ========================================= */

/* Shared overlay for all modals */
#rules-modal,
#leaderboard-modal,
#settings-modal,
#delete-modal,
#privacy-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Privacy modal needs higher z-index (can open on top of settings) */
#privacy-modal {
  z-index: 35;
}

/* Shared modal content box */
#rules-content,
#leaderboard-modal-content,
#settings-content,
#delete-modal-content,
#privacy-content {
  background-color: #fffbe6;
  border: 3px solid #c2b280;
  border-radius: 15px;
  padding: 25px;
  max-width: 420px;
  width: 90%;
  max-height: 80%;
  overflow-y: auto;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  color: #5e3a00;
}

/* Leaderboard modal is slightly wider */
#leaderboard-modal-content {
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

/* Shared modal title */
#rules-content h2,
#leaderboard-modal-content h2,
#settings-content h2,
#delete-modal-content h2,
#privacy-content h2 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 15px;
  color: #5e3a00;
}

#rules-content h2 {
  font-size: 26px;
}

/* Shared modal close button */
#rules-close-btn,
#leaderboard-close-btn,
#settings-close-btn,
#delete-modal-close-btn,
#privacy-close-btn {
  display: block;
  margin: 15px auto 0;
  background-color: #ffe4b5;
  color: #5e3a00;
  border: 2px solid #5e3a00;
  padding: 10px 30px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  width: 220px;
  box-sizing: border-box;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

#rules-close-btn:hover,
#leaderboard-close-btn:hover,
#settings-close-btn:hover,
#delete-modal-close-btn:hover,
#privacy-close-btn:hover {
  background-color: #ffdead;
  transform: scale(1.05);
}

/* Shared modal scrollbar */
#rules-content::-webkit-scrollbar,
#leaderboard-modal-content::-webkit-scrollbar,
#settings-content::-webkit-scrollbar,
#delete-modal-content::-webkit-scrollbar,
#privacy-content::-webkit-scrollbar,
#leaderboard-table-wrapper::-webkit-scrollbar,
#leaderboard-modal-table-wrapper::-webkit-scrollbar,
#game-over-screen::-webkit-scrollbar {
  width: 6px;
}

#rules-content::-webkit-scrollbar-thumb,
#leaderboard-modal-content::-webkit-scrollbar-thumb,
#settings-content::-webkit-scrollbar-thumb,
#delete-modal-content::-webkit-scrollbar-thumb,
#privacy-content::-webkit-scrollbar-thumb,
#leaderboard-table-wrapper::-webkit-scrollbar-thumb,
#leaderboard-modal-table-wrapper::-webkit-scrollbar-thumb,
#game-over-screen::-webkit-scrollbar-thumb {
  background: #c2b280;
  border-radius: 3px;
}

#rules-content::-webkit-scrollbar-track,
#leaderboard-modal-content::-webkit-scrollbar-track,
#settings-content::-webkit-scrollbar-track,
#delete-modal-content::-webkit-scrollbar-track,
#privacy-content::-webkit-scrollbar-track,
#leaderboard-table-wrapper::-webkit-scrollbar-track,
#leaderboard-modal-table-wrapper::-webkit-scrollbar-track,
#game-over-screen::-webkit-scrollbar-track {
  background: transparent;
}

/* ========================================= */
/* MODAL — RULES                             */
/* ========================================= */

#rules-content {
  text-align: left;
}

.rules-lore {
  background-color: rgba(194, 178, 128, 0.15);
  border-left: 4px solid #c2b280;
  padding: 10px 15px;
  margin-bottom: 15px;
  border-radius: 0 8px 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

.rules-lore p {
  margin: 8px 0;
}

.rules-section {
  margin-bottom: 12px;
}

.rules-section h3 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #5e3a00;
}

.rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.rules-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(194, 178, 128, 0.3);
}

.rules-table td:first-child {
  width: 40px;
  text-align: center;
  font-size: 18px;
}

.rules-list {
  list-style: none;
  padding: 0;
  font-size: 14px;
}

.rules-list li {
  padding: 4px 0;
  line-height: 1.4;
}

.rules-footer {
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  margin: 15px 0 10px;
}

/* ========================================= */
/* MODAL — LEADERBOARD (full)                */
/* ========================================= */

#leaderboard-modal-table-wrapper {
  flex: 1;
  overflow-y: auto;
  border: 2px solid #c2b280;
  border-radius: 8px;
  margin-bottom: 15px;
}

#leaderboard-modal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #5e3a00;
  text-align: center;
}

#leaderboard-modal-table thead {
  background: #ffe4b5;
  position: sticky;
  top: 0;
  z-index: 1;
}

#leaderboard-modal-table th {
  padding: 10px 6px;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #c2b280;
}

#leaderboard-modal-table td {
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(194, 178, 128, 0.3);
}

#leaderboard-modal-table tbody tr:hover {
  background: rgba(255, 228, 181, 0.3);
}

#leaderboard-modal-table tbody tr:nth-child(1) td:first-child::before { content: '🥇 '; }
#leaderboard-modal-table tbody tr:nth-child(2) td:first-child::before { content: '🥈 '; }
#leaderboard-modal-table tbody tr:nth-child(3) td:first-child::before { content: '🥉 '; }

#leaderboard-modal-empty {
  text-align: center;
  font-size: 16px;
  color: #c2b280;
  padding: 20px;
}

/* ========================================= */
/* MODAL — SETTINGS                          */
/* ========================================= */

.settings-section {
  background: rgba(194, 178, 128, 0.1);
  border: 2px solid #c2b280;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 12px;
}

.settings-section h3 {
  font-size: 15px;
  margin: 0 0 10px;
  color: #5e3a00;
  text-align: center;
}

.settings-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-buttons button {
  background-color: #ffe4b5;
  color: #5e3a00;
  border: 2px solid #5e3a00;
  padding: 10px 16px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
  width: 100%;
  box-sizing: border-box;
}

.settings-buttons button:hover {
  background-color: #ffdead;
  transform: scale(1.02);
}

/* Delete button inside settings — red theme, full width */
.settings-buttons #delete-data-btn {
  background-color: transparent;
  border: 2px solid #cc4444;
  color: #cc4444;
  font-size: 16px;
  padding: 10px 16px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none;
  opacity: 0.8;
}

.settings-buttons #delete-data-btn:hover {
  opacity: 1;
  background-color: rgba(204, 68, 68, 0.1);
  transform: scale(1.02);
}

/* Credits text */
.credits-text {
  font-size: 13px;
  line-height: 1.6;
}

.credits-text p {
  margin: 4px 0;
}

/* ========================================= */
/* MODAL — DELETE DATA                       */
/* ========================================= */

.delete-method {
  background: rgba(194, 178, 128, 0.1);
  border: 2px solid #c2b280;
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 12px;
}

.delete-method h3 {
  font-size: 15px;
  margin: 0 0 6px;
  color: #5e3a00;
}

.delete-method p {
  font-size: 13px;
  margin: 0 0 10px;
  line-height: 1.4;
  color: #5e3a00;
}

.delete-method button {
  background-color: #ffcccc;
  color: #cc4444;
  border: 2px solid #cc4444;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s;
  width: 100%;
}

.delete-method button:hover {
  background-color: #ff9999;
  transform: scale(1.02);
}

#delete-result {
  text-align: center;
  padding: 10px;
  margin: 10px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
}

#delete-result.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

#delete-result.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

#delete-result.warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

.delete-fallback {
  margin: 15px 0;
  padding: 10px;
  background: rgba(194, 178, 128, 0.1);
  border-radius: 8px;
  font-size: 12px;
  text-align: center;
  color: #5e3a00;
  line-height: 1.5;
}

/* ========================================= */
/* MODAL — PRIVACY POLICY                    */
/* ========================================= */

.privacy-text h3 {
  font-size: 15px;
  margin: 12px 0 6px;
  color: #5e3a00;
}

.privacy-text p {
  font-size: 13px;
  line-height: 1.5;
  margin: 4px 0;
}

.privacy-text ul {
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}

.privacy-text a {
  color: #c2b280;
}

/* ========================================= */
/* GDPR CONSENT BANNER                       */
/* ========================================= */

#gdpr-banner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 25;
  background: rgba(255, 250, 230, 0.97);
  border-top: 3px solid #c2b280;
  padding: 15px;
  box-sizing: border-box;
}

#gdpr-content {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

#gdpr-content p {
  font-size: 13px;
  color: #5e3a00;
  margin-bottom: 10px;
  line-height: 1.4;
}

#gdpr-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 8px;
}

#gdpr-buttons button {
  padding: 8px 16px;
  font-size: 14px;
  border: 2px solid #5e3a00;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

#gdpr-accept {
  background-color: #ffe4b5;
  color: #5e3a00;
}

#gdpr-accept:hover {
  background-color: #ffdead;
  transform: scale(1.05);
}

#gdpr-decline {
  background-color: transparent;
  color: #5e3a00;
}

#gdpr-decline:hover {
  background-color: rgba(194, 178, 128, 0.2);
}

#gdpr-privacy-link {
  font-size: 12px;
  color: #c2b280;
  text-decoration: underline;
}

/* ========================================= */
/* RESPONSIVE — TABLET & DESKTOP (769px+)    */
/* Framed window with a fixed-width play     */
/* column: the canvas (= actual game area,   */
/* spawns and movement derive from its size) */
/* is 550px centered, and the side gutters   */
/* host the HUD so it never covers gameplay. */
/* Play width is part of game balance —      */
/* don't widen it without re-checking        */
/* difficulty (see AUDIT.md, batch 2b).      */
/* ========================================= */

@media (min-width: 769px) {
  #game-container {
    max-width: 900px;
    max-height: 100%;
    border: 5px solid #c2b280;
  }

  #gameCanvas {
    width: 550px;
    margin: 0 auto;
    /* Explicit field edge where the lawn ends (drawn outside the
       550px play width thanks to content-box sizing). Dark green,
       one shade below the grass triangles (#557a34). */
    border-left: 3px solid #46662b;
    border-right: 3px solid #46662b;
  }

  /* HUD panels sized to the side gutters: width = gutter minus the
     10px margin on each side, so they never overlap the play field
     and sit centered between window edge and field edge.
     556px = 550px play width + 2 x 3px field border. */
  #health-container,
  #score-container {
    width: calc((100% - 556px) / 2 - 20px);
    top: 10px;
    box-sizing: border-box;
  }

  #health-container {
    left: 10px;
  }

  #score-container {
    right: 10px;
  }

  /* Keep HUD labels on one line — the panels are narrow */
  .ui-label,
  .mini-lb-title {
    white-space: nowrap;
  }

  #mini-leaderboard {
    max-width: none;
    padding: 6px 8px;
  }

  /* Bars and the mini leaderboard fill the panel instead of using
     fixed pixel widths that can overflow the gutter. */
  #health-bar,
  #missed-bar {
    width: 100%;
    box-sizing: border-box;
  }
}

/* ========================================= */
/* RESPONSIVE — DESKTOP (1201px+)            */
/* ========================================= */

@media (min-width: 1201px) {
  #score-container {
    font-size: 18px;           /* offsets come from the gutter-panel rules (769px+ block) */
  }

  #current-score {
    font-size: 18px;           /* Fits "Score: 99999" on one line in the gutter panel */
    white-space: nowrap;
  }

  #high-score {
    font-size: 15px;
    white-space: nowrap;
  }

  .ui-label {
    font-size: 14px;           /* Fits "Egg Damage: NN" on one line in the gutter panel */
  }

  #health-bar,
  #missed-bar {
    height: 22px;              /* Width comes from the gutter-panel rules (769px+ block) */
  }

  .mini-lb-title {
    font-size: 13px;           /* Fits "Top Players" on one line in the gutter panel */
  }

  #mini-leaderboard-list {
    font-size: 13px;
  }

  #touch-controls {
    display: none !important;
  }
}

/* ========================================= */
/* RESPONSIVE — MOBILE (768px and below)     */
/* ========================================= */

@media (max-width: 768px) {
  #game-container {
    max-width: 100%;
    max-height: 100%;
    border: none;
    border-radius: 0;
  }

  #mini-leaderboard {
    max-width: 150px;
  }

  .mini-lb-title {
    font-size: 11px;
  }

  #mini-leaderboard-list {
    font-size: 11px;
  }

  #game-over-screen {
    padding: 15px;
    max-height: 80vh;
    width: 92%;
  }

  #game-over-screen h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }

  #game-over-score-summary {
    font-size: 16px;
    gap: 12px;
  }

  #leaderboard-table {
    font-size: 12px;
  }

  #leaderboard-table th,
  #leaderboard-table td {
    padding: 5px 4px;
  }

  #leaderboard-table-wrapper {
    max-height: 150px;
  }

  #start-menu button,
  #game-over-screen button,
  #pause-menu button {
    padding: 12px 24px;
    font-size: 18px;
  }

  #leaderboard-modal-content {
    padding: 15px;
    max-height: 85%;
  }

  #leaderboard-modal-table {
    font-size: 12px;
  }

  #leaderboard-modal-table th,
  #leaderboard-modal-table td {
    padding: 6px 4px;
  }
}