@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

:root {
  --body-bg: #0a0a0a;
  --text-color: #ffffff;
  --game-container-bg-start: #1a1a1a;
  --game-container-bg-end: #0f0f0f;
  --ui-box-bg-start: #2a2a2a;
  --ui-box-bg-end: #1a1a1a;
  --h2-color: #808080;
  --score-color: #ffffff;

  --canvas-bg: #222;
  --piece-preview-bg: #1a1a1a;
  --piece-preview-border: #808080;
  --modal-content-bg: #0f0f0f;
  --modal-content-border: #808080;
  --modal-h2-color: #808080;
  --restart-button-color: #808080;
  --restart-button-border: #808080;
  --restart-button-hover-bg: #808080;
  --restart-button-hover-color: #ffffff;
  --high-score-li-bg: var(--ui-box-bg-end);

  /* Tetromino Colors - NEW Standard Order */
  --tetromino-color-1: #ff00d4; /* T (Purple) */
  --tetromino-color-2: #FFD700; /* O (Yellow) */
  --tetromino-color-3: #ff8800; /* L (Orange) */
  --tetromino-color-4: #2d71d8; /* J (Blue) */
  --tetromino-color-5: #01EDFA; /* I (Cyan) */
  --tetromino-color-6: #09f309; /* S (Green) */
  --tetromino-color-7: #ff1a4c; /* Z (Red) */
}

/* Sunset Theme */
body.theme-sunset {
  --body-bg: #1a0e1f;
  --text-color: #ffe0b2;
  --game-container-bg-start: #4a1942;
  --game-container-bg-end: #2e1328;
  --ui-box-bg-start: #6a2958;
  --ui-box-bg-end: #4a1942;
  --h2-color: #ffab91;
  --score-color: #ffd54f;

  --canvas-bg: #1a0814;
  --piece-preview-bg: #3e1a35;

  --modal-content-bg: #2e1328;

  --modal-content-border: #ff5252;
  --modal-h2-color: #ff8a65;
  --high-score-li-bg: #4a1942;
  --restart-button-color: #ff5252;
  --restart-button-border: #ff5252;
  --restart-button-hover-bg: #ff5252;
  --restart-button-hover-color: #ffe0b2;

  /* Tetromino Colors - Sunset Palette (Reordered) */
  --tetromino-color-1: #7B1FA2; /* T (Purple) */
  --tetromino-color-2: #FFA000; /* O (Yellow/Amber) */
  --tetromino-color-3: #F57C00; /* L (Orange) */
  --tetromino-color-4: #E64A19; /* J (Blue -> Deep Orange) */
  --tetromino-color-5: #C2185B; /* I (Cyan -> Pink) */
  --tetromino-color-6: #E91E63; /* S (Green -> Pink) */
  --tetromino-color-7: #D32F2F; /* Z (Red) */
  --tetromino-color-8: #ff4500; /* Lava Block Color */
  --lava-glow-color: rgba(255, 69, 0, 0.8); /* Orange-red glow */
}

/* Blueish Theme */
body.theme-blueish {
  --body-bg: #0a1929;
  --text-color: #e3f2fd;
  --game-container-bg-start: #1e3a5f;
  --game-container-bg-end: #132f4c;
  --ui-box-bg-start: #2e5266;
  --ui-box-bg-end: #1e3a4c;
  --h2-color: #90caf9;
  --score-color: #ffffff;

  --canvas-bg: #001e3c;
  --piece-preview-bg: #0d2738;

  --modal-content-bg: #132f4c;

  --modal-content-border: #2196f3;
  --modal-h2-color: #64b5f6;
  --high-score-li-bg: #1e3a4c;
  --restart-button-color: #2196f3;
  --restart-button-border: #2196f3;
  --restart-button-hover-bg: #2196f3;
  --restart-button-hover-color: #e3f2fd;

  /* Tetromino Colors - Shades of Blue (Reordered) */
  --tetromino-color-1: #5C6BC0; /* T (Purple -> Indigo Blue) */
  --tetromino-color-2: #81D4FA; /* O (Yellow -> Very Light Blue) */
  --tetromino-color-3: #1565C0; /* L (Orange -> Dark Blue) */
  --tetromino-color-4: #2962FF; /* J (Blue -> Royal Blue) */
  --tetromino-color-5: #29B6F6; /* I (Cyan -> Light Blue) */
  --tetromino-color-6: #00838F; /* S (Green -> Dark Cyan) */
  --tetromino-color-7: #42A5F5; /* Z (Red -> Medium Blue) */
  --tetromino-color-9: #B3E5FC; /* Light Cyan for Frozen Blocks */
}

/* Greenish Theme */
body.theme-greenish {
  --body-bg: #0d1f0d;
  --text-color: #e8f5e9;
  --game-container-bg-start: #1b4332;
  --game-container-bg-end: #0f2818;
  --ui-box-bg-start: #2d5a3d;
  --ui-box-bg-end: #1e3a28;
  --h2-color: #81c784;
  --score-color: #ffffff;

  --canvas-bg: #0a1f0a;
  --piece-preview-bg: #1a3520;

  --modal-content-bg: #0f2818;

  --modal-content-border: #43a047;
  --modal-h2-color: #66bb6a;
  --high-score-li-bg: #1e3a28;
  --restart-button-color: #43a047;
  --restart-button-border: #43a047;
  --restart-button-hover-bg: #43a047;
  --restart-button-hover-color: #e8f5e9;

  /* Tetromino Colors - Forest Greens (Reordered) */
  --tetromino-color-1: #2E7D32; /* T (Purple -> Green 800) */
  --tetromino-color-2: #66BB6A; /* O (Yellow -> Green 400) */
  --tetromino-color-3: #558B2F; /* L (Orange -> Light Green 800) */
  --tetromino-color-4: #00695C; /* J (Blue -> Teal 800) */
  --tetromino-color-5: #43A047; /* I (Cyan -> Green 600) */
  --tetromino-color-6: #388E3C; /* S (Green -> Green 700) */
  --tetromino-color-7: #689F38; /* Z (Red -> Light Green 700) */
}

/* Yellowish Theme */
body.theme-yellowish {
  --body-bg: #2b210a;
  --text-color: #fffde7;
  --game-container-bg-start: #4a3c19;
  --game-container-bg-end: #3c2f13;
  --ui-box-bg-start: #66552e;
  --ui-box-bg-end: #4a3c19;
  --h2-color: #fff176;
  --score-color: #ffffff;

  --canvas-bg: #1c1a08;
  --piece-preview-bg: #352a0a;

  --modal-content-bg: #3c2f13;

  --modal-content-border: #ffca28;
  --modal-h2-color: #ffee58;
  --high-score-li-bg: #4a3c19;
  --restart-button-color: #ffca28;
  --restart-button-border: #ffca28;
  --restart-button-hover-bg: #ffca28;
  --restart-button-hover-color: #2b210a;

  /* Tetromino Colors - Golden Hues */
  --tetromino-color-1: #D4AC0D; /* T (Purple -> Dark Gold) */
  --tetromino-color-2: #F1C40F; /* O (Yellow -> Bright Yellow) */
  --tetromino-color-3: #F39C12; /* L (Orange -> Orange Gold) */
  --tetromino-color-4: #B7950B; /* J (Blue -> Muted Gold) */
  --tetromino-color-5: #FFEB3B; /* I (Cyan -> Lemon Yellow) */
  --tetromino-color-6: #D35400; /* S (Green -> Burnt Orange) */
  --tetromino-color-7: #E67E22; /* Z (Red -> Lighter Orange) */
}

/* Pastel Theme */
body.theme-pastel {
  --body-bg: #2a1a2e;
  --text-color: #fef6e4;
  --game-container-bg-start: #f8e1e4;
  --game-container-bg-end: #f3d1dc;
  --ui-box-bg-start: #e9c8d4;
  --ui-box-bg-end: #362b3d;
  --h2-color: #8b7f9a;
  --score-color: #ff8fab;
  --canvas-border-color: #ffc6d0;
  --canvas-bg: #3a2a3e;
  --piece-preview-bg: #ffeef0;
  --piece-preview-border: #ffb3c1;
  --modal-content-bg: #2a1a2e;
  --modal-content-border: #ff8fab;
  --modal-h2-color: #ff8fab;
  --high-score-li-bg: #362b3d;
  --restart-button-color: #ff8fab;
  --restart-button-border: #ff8fab;
  --restart-button-hover-bg: #ff8fab;
  --restart-button-hover-color: #ffffff;

  /* Tetromino Colors - Soft Pastels (Reordered) */
  --tetromino-color-1: #E0BBE4; /* T (Purple -> Pastel Purple) */
  --tetromino-color-2: #FFFFBA; /* O (Yellow -> Pastel Yellow) */
  --tetromino-color-3: #FFDFBA; /* L (Orange -> Pastel Orange) */
  --tetromino-color-4: #D4A5A5; /* J (Blue -> Pastel Mauve) */
  --tetromino-color-5: #BAE1FF; /* I (Cyan -> Pastel Blue) */
  --tetromino-color-6: #BAFFC9; /* S (Green -> Pastel Green) */
  --tetromino-color-7: #FFB3BA; /* Z (Red -> Pastel Pink) */
}

/* Monochrome Theme */
body.theme-monochrome {
  --body-bg: #1a1a1a;
  --text-color: #e0e0e0;
  --game-container-bg-start: #1a1a1a;
  --game-container-bg-end: #1f1f1f;
  --ui-box-bg-start: #2a2a2a;
  --ui-box-bg-end: #1a1a1a;
  --h2-color: #b0b0b0;
  --score-color: #ffffff;
  --canvas-border-color: #606060;
  --canvas-bg: #151515;
  --piece-preview-bg: #1a1a1a;
  --piece-preview-border: #505050;
  --modal-content-bg: #1f1f1f;
  --modal-content-border: #808080;
  --modal-h2-color: #c0c0c0;
  --high-score-li-bg: #1a1a1a;
  --restart-button-color: #808080;
  --restart-button-border: #808080;
  --restart-button-hover-bg: #808080;
  --restart-button-hover-color: #ffffff;

  /* Tetromino Colors - Grayscale (Reordered) */
  --tetromino-color-1: #606060; /* T (Purple) */
  --tetromino-color-2: #C0C0C0; /* O (Yellow -> Lightest Gray) */
  --tetromino-color-3: #A8A8A8; /* L (Orange) */
  --tetromino-color-4: #909090; /* J (Blue) */
  --tetromino-color-5: #FFFFFF; /* I (Cyan -> White for visibility) */
  --tetromino-color-6: #484848; /* S (Green) */
  --tetromino-color-7: #404040; /* Z (Red -> Darkest Gray) */
}

/* Retro Theme */
body.theme-retro {
  --body-bg: #000000;
  --text-color: #00ff00;
  --game-container-bg-start: #0a0a0a;
  --game-container-bg-end: #000000;
  --ui-box-bg-start: #1a1a1a;
  --ui-box-bg-end: #0a0a0a;
  --h2-color: #00ff00;
  --score-color: #00ff00;
  --canvas-border-color: #00ff00;
  --canvas-bg: #111;
  --piece-preview-bg: #0a0a0a;
  --piece-preview-border: #00ff00;
  --modal-content-bg: #000000;
  --modal-content-border: #00ff00;
  --modal-h2-color: #00ff00;
  --high-score-li-bg: rgba(0, 255, 0, 0.15);
  --restart-button-color: #00ff00;
  --restart-button-border: #00ff00;
  --restart-button-hover-bg: #00ff00;
  --restart-button-hover-color: #000000;

  /* Tetromino Colors - Classic Game Boy Style (Reordered) */
  --tetromino-color-1: #306230; /* T (Purple -> GB Dark Green) */
  --tetromino-color-2: #9BBC0F; /* O (Yellow -> GB Light Green) */
  --tetromino-color-3: #8BAC0F; /* L (Orange -> GB Medium Green) */
  --tetromino-color-4: #306230; /* J (Blue -> GB Dark Green) */
  --tetromino-color-5: #9BBC0F; /* I (Cyan -> GB Light Green) */
  --tetromino-color-6: #8BAC0F; /* S (Green -> GB Medium Green) */
  --tetromino-color-7: #0F380F; /* Z (Red -> GB Darkest Green) */
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  touch-action: none;
  overflow: hidden;
}

body {
  background: var(--body-bg);
  color: var(--text-color);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1em;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: background-color 1.5s ease, color 1.5s ease;
  padding-top: clamp(3em, 5vw, 4em);
  scrollbar-width: none; /* For Firefox */
  -webkit-user-select: none;
  user-select: none;
}

/* ── Navbar ── */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--body-bg) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background-color 1.5s ease;
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo-img {
  height: 16px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  color: #7a7a8e;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #e0e0e8;
}

body::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.js-loading #info-container h2,
.js-loading #score,
.js-loading #high-scores li,
.js-loading .modal-content h2,
.js-loading .modal-content p,
.js-loading #restart-button {
  visibility: hidden;
}

.js-loaded #info-container h2,
.js-loaded #score,
.js-loaded #high-scores li,
.js-loaded .modal-content h2,
.js-loaded .modal-content p,
.js-loaded #restart-button {
  visibility: visible;
}

#game-container {
  display: block;
  padding: clamp(0.5em, 2vw, 2em);
  border-radius: 15px;
  position: relative;
}

#main-content-container {
  display: flex;
  align-items: stretch;
  gap: 0em;
}

#info-container, #left-info-container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  width: clamp(60px, calc(var(--block-size) * 4.5), 220px);
}




#score-container, #next-piece-container, #held-piece-container, #level-container, #timer-container, #lines-container, #mode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  border-radius: 10px;
  gap: 0.5em;
}

h1 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700; /* font-bold */
  color: var(--text-color); /* Assuming main title color */
  letter-spacing: 1px;
  text-transform: uppercase;
}

h2 {
  margin-top: 0;
  color: var(--h2-color);
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.4), 1rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 1.5s ease;
}

#score-container h2,
#level-container h2,
#timer-container h2,
#lines-container h2,
#next-piece-container h2,
#held-piece-container h2,
#mode-container h2 {
  margin-bottom: 0;
}

#score, #level, #timer, #lines-remaining {
  font-size: clamp(0.8rem, calc(var(--block-size) * 0.7), 1.875rem);
  font-weight: 700;
  color: var(--score-color);
  transition: color 1.5s ease;
  margin: 0;
}

#action-text-container {
  margin-top: -1em;
  margin-bottom: 1em;
  height: 4em; /* Reserve space to prevent layout shifts */
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
}

#action-text {
  font-size: clamp(0.6em, calc(var(--block-size) * 0.12), 0.8em);
  color: #ffeb3b; /* Bright color for visibility */
  text-shadow: 0 0 5px #ffeb3b, 0 0 10px #ff0000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

canvas {
  border: none;
  background: var(--canvas-bg);
  border-radius: 5px;
  position: relative;
  transition: border-color 1.5s ease, background-color 1.5s ease;
}

#tetris {
  height: 80vh;
  border: 2px solid var(--restart-button-color);
  border-radius: 4px;
}

.next-piece-canvas, 
#held-piece {
  background: transparent;
  border: none;
  border-radius: 8px;
  transition: background-color 1.5s ease, border-color 1.5s ease;
  margin-bottom: 0.5em;
}

.next-piece-canvas:last-child {
  margin-bottom: 0;
}

.modal {
  position: absolute;
  z-index: 1;
  background-color: var(--modal-content-bg);
  display: flex; /* Make it a flex container */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  overflow: hidden; /* Clip content to rounded corners */
}

.modal-content {
  background-color: var(--modal-content-bg);
  padding: clamp(5px, calc(var(--block-size) * 0.5), 30px);
  width: 100%;
  max-width: none;
  height: 100%;
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 4px;
  box-sizing: border-box;
  border: 2px solid var(--modal-content-border);
  transition: background-color 1.5s ease, border-color 1.5s ease, color 1.5s ease;
  animation: settingsFadeIn 0.15s ease;
  overflow-y: auto;
  padding-top: clamp(12px, calc(var(--block-size) * 2.5), 80px);
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.modal-content::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.modal-content h2 {
  color: var(--modal-h2-color);
  font-size: clamp(1rem, calc(var(--block-size) * 1.2), 5rem);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  letter-spacing: 4px;
  transition: color 1.5s ease;
}

.modal-content p {
    font-size: clamp(0.7em, calc(var(--block-size) * 0.25), 2em);
    margin-bottom: clamp(10px, calc(var(--block-size) * 0.56), 40px);
}

/* Game Over Specific Styles */
.game-over-score-container {
  margin-bottom: clamp(10px, calc(var(--block-size) * 0.56), 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.final-score-label {
  color: var(--h2-color);
  text-transform: uppercase;
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.4), 2rem);
  letter-spacing: 1px;
  margin-bottom: 0.2em;
}

#final-score {
  font-size: clamp(1.2rem, calc(var(--block-size) * 1), 6rem);
  font-weight: 700;
  color: var(--score-color);
}

.new-record-label {
  display: none;
  margin-top: 0.3em;
  color: var(--restart-button-color);
  background: transparent;
  padding: 0;
  font-size: clamp(0.6rem, calc(var(--block-size) * 0.34), 1.5rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.modal-content h3 {
    color: var(--h2-color);
    font-size: clamp(0.7rem, calc(var(--block-size) * 0.4), 2rem);
    font-weight: 700;
    margin-bottom: clamp(6px, calc(var(--block-size) * 0.3), 24px);
    text-transform: uppercase;
    letter-spacing: 2px;
    width: clamp(200px, 70%, 400px);
    padding-bottom: clamp(4px, calc(var(--block-size) * 0.19), 16px);
}

#high-scores {
  list-style-type: none;
  padding: 0;
  margin: 0 0 clamp(10px, calc(var(--block-size) * 0.74), 50px) 0;
  width: auto;
}

#high-scores li {
  background: var(--high-score-li-bg);
  padding: clamp(4px, calc(var(--block-size) * 0.23), 18px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: auto;
  margin-bottom: clamp(3px, calc(var(--block-size) * 0.15), 12px);
  border-radius: 6px;
  font-size: clamp(0.7rem, calc(var(--block-size) * 0.41), 1.8rem);
  text-transform: uppercase;
  transition: background-color 1.5s ease;
  display: flex;
  justify-content: center;
  gap: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  align-items: center;
  border: 2px solid transparent;
}

.rank-badge {
  font-weight: bold;
  flex: 1;
  text-align: center;
  opacity: 0.7;
  display:none;
}

.hs-score {
  font-weight: 700;
  color: var(--score-color);
  letter-spacing: 1px;
  flex: 1;
  text-align: center;
}

/* Highlight current score regardless of position */
#high-scores li.current-score {
  border: 2px solid var(--modal-content-border);
}

.game-over-mode-label {
  font-size: 0.7em;
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 0.7;
}

.game-over-buttons {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding-bottom: clamp(8px, calc(var(--block-size) * 0.8), 30px);
}

#restart-button {
  background-color: transparent;
  color: var(--restart-button-color);
  padding: clamp(8px, calc(var(--block-size) * 0.35), 30px) clamp(14px, calc(var(--block-size) * 0.7), 50px);
  border: 2px solid var(--restart-button-border);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.7em, calc(var(--block-size) * 0.34), 1.8em);
  text-transform: uppercase;
}

#restart-button:hover {
  background-color: var(--restart-button-hover-bg);
  color: var(--restart-button-hover-color);
}


#main-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex: 1;
  animation: settingsFadeIn 0.15s ease;
}

.keybinding-setting {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin-bottom: clamp(8px, calc(var(--block-size) * 0.37), 30px);
}

.keybinding-setting label {
  color: var(--text-color);
  font-size: clamp(0.55em, calc(var(--block-size) * 0.30), 1.8em);
  text-transform: uppercase;
}

.keybinding-setting input[type='text'] {
  background-color: var(--ui-box-bg-end);
  color: var(--score-color);
  border: none;
  border-radius: 5px;
  padding: clamp(4px, calc(var(--block-size) * 0.19), 16px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: clamp(40px, calc(var(--block-size) * 2.5), 200px);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.55em, calc(var(--block-size) * 0.30), 1.8em);
  text-transform: uppercase;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  box-sizing: border-box;
}

.keybinding-setting input[type='text']:focus {
  border-color: var(--h2-color);
  outline: none;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: 100%;
  margin-top: auto;
  padding-bottom: clamp(8px, calc(var(--block-size) * 0.8), 30px);
}

.settings-button {
  background-color: transparent;
  color: var(--restart-button-color);
  padding: clamp(8px, calc(var(--block-size) * 0.35), 24px) clamp(14px, calc(var(--block-size) * 0.7), 45px);
  border: 2px solid var(--restart-button-color);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.6em, calc(var(--block-size) * 0.34), 1.8em);
  text-transform: uppercase;
}

.settings-button:hover {
  background-color: var(--restart-button-color);
  color: var(--restart-button-hover-color);
}

#advanced-settings {
  display: none; /* Initially hidden */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  flex: 1;
  animation: settingsFadeIn 0.15s ease;
}

@keyframes settingsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.keybinding-setting input[type='text']:focus,
.keybinding-setting input[type='number']:focus {
  border-color: var(--h2-color);
  outline: none;
}

.keybinding-setting input[type='number'] {
  background-color: var(--ui-box-bg-end);
  color: var(--score-color);
  border: none;
  border-radius: 5px;
  padding: clamp(4px, calc(var(--block-size) * 0.19), 16px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: clamp(40px, calc(var(--block-size) * 2.5), 200px);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.55em, calc(var(--block-size) * 0.30), 1.8em);
  -moz-appearance: textfield;
  appearance: textfield;
  box-sizing: border-box;
}

.keybinding-setting input[type='number']::-webkit-outer-spin-button,
.keybinding-setting input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Add a class for when a key is being rebound */
.is-rebinding {
  border-color: #ffeb3b !important; /* Bright yellow to indicate active rebinding */
  color: #000000 !important;
  background-color: #ffeb3b !important;
}

#soft-drop-speed-select,
#next-pieces-select,
#default-settings-button {
  background-color: var(--ui-box-bg-end);
  color: var(--score-color);
  border: none;
  border-radius: 5px;
  padding: clamp(4px, calc(var(--block-size) * 0.19), 16px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: clamp(40px, calc(var(--block-size) * 2.5), 200px);
  text-align: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.55em, calc(var(--block-size) * 0.30), 1.5em);
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
  box-sizing: border-box;
}

#default-settings-button:hover {
  background-color: var(--restart-button-color);
  color: var(--restart-button-hover-color);
}

.toggle-switch {
  --toggle-width: clamp(36px, calc(var(--block-size) * 1.4), 90px);
  --toggle-height: clamp(20px, calc(var(--block-size) * 0.8), 50px);
  --toggle-knob: calc(var(--toggle-height) - 8px);
  position: relative;
  display: inline-block;
  width: var(--toggle-width);
  height: var(--toggle-height);
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: var(--toggle-height);
}

.toggle-slider:before {
  position: absolute;
  content: '';
  height: var(--toggle-knob);
  width: var(--toggle-knob);
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--restart-button-color);
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px var(--restart-button-color);
}

input:checked + .toggle-slider:before {
  -webkit-transform: translateX(calc(var(--toggle-width) - var(--toggle-knob) - 8px));
  -ms-transform: translateX(calc(var(--toggle-width) - var(--toggle-knob) - 8px));
  transform: translateX(calc(var(--toggle-width) - var(--toggle-knob) - 8px));
}





#left-info-container > #held-piece-container {
  order: 1;
}
#left-info-container > #score-container,
#left-info-container > #timer-container {
  order: 2;
  margin-top: auto;
}
#left-info-container > #level-container,
#left-info-container > #lines-container {
  order: 3;
}

#left-info-container > #mode-container {
  order: 4;
}

#current-mode-label {
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.35), 0.9rem);
  font-weight: 500;
  color: var(--h2-color);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 1.5s ease;
}

.mode-selection-container {
  display: flex;
  justify-content: center;
  gap: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: 100%;
  margin-bottom: clamp(8px, calc(var(--block-size) * 0.37), 30px);
}

.mode-selection-container input[type="radio"] {
  display: none;
}

.mode-button {
  display: block;
  background-color: transparent;
  color: var(--restart-button-color);
  padding: clamp(8px, calc(var(--block-size) * 0.35), 24px) clamp(14px, calc(var(--block-size) * 0.7), 45px);
  border: 2px solid var(--restart-button-color);
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.6em, calc(var(--block-size) * 0.34), 1.8em);
  text-transform: uppercase;
  text-align: center;
}

/* Mode-specific colors */
label[for="mode-normal"] {
  border-color: #4a9eff;
  color: #4a9eff;
}
label[for="mode-normal"]:hover,
#mode-normal:checked + label[for="mode-normal"] {
  background-color: #4a9eff;
  color: #fff;
}

label[for="mode-challenge"] {
  border-color: #ff4452;
  color: #ff4452;
}
label[for="mode-challenge"]:hover,
#mode-challenge:checked + label[for="mode-challenge"] {
  background-color: #ff4452;
  color: #fff;
}

label[for="mode-20l"] {
  border-color: #00e676;
  color: #00e676;
}
label[for="mode-20l"]:hover,
#mode-20l:checked + label[for="mode-20l"] {
  background-color: #00e676;
  color: #111;
}

label[for="mode-40l"] {
  border-color: #ffab00;
  color: #ffab00;
}
label[for="mode-40l"]:hover,
#mode-40l:checked + label[for="mode-40l"] {
  background-color: #ffab00;
  color: #111;
}

/* Settings navigation items */
.settings-nav {
  width: 80%;
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(12px, calc(var(--block-size) * 0.5), 30px);
}

.settings-nav-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: var(--ui-box-bg-end);
  color: var(--text-color);
  border: none;
  padding: clamp(6px, calc(var(--block-size) * 0.28), 16px) clamp(10px, calc(var(--block-size) * 0.45), 24px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.55em, calc(var(--block-size) * 0.30), 1.4em);
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.settings-nav-item:first-child {
  border-radius: 6px 6px 0 0;
}

.settings-nav-item:last-child {
  border-radius: 0 0 6px 6px;
}

.settings-nav-item:not(:last-child) {
  border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.settings-nav-item:hover {
  background: var(--ui-box-bg-start);
}

.nav-chevron {
  color: var(--h2-color);
  font-size: 1.3em;
  opacity: 0.6;
}


/* Stack buttons vertically in mode select modal */
#mode-select-modal .modal-content {
    justify-content: center;
    padding-top: clamp(5px, calc(var(--block-size) * 0.5), 30px);
}

#mode-select-modal .button-container {
    margin-top: 0;
}

#mode-select-modal .mode-selection-container {
    flex-direction: column;
    width: 80%;
}

#mode-select-modal .modal-content h2 {
    letter-spacing: 1px;
}

#mode-select-modal .mode-button {
    width: 100%;
    box-sizing: border-box;
}


.default-confirm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 4px;
}

.default-confirm-box {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.default-confirm-box p {
  color: var(--text-color);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.7em, calc(var(--block-size) * 0.34), 1.4em);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}

.default-confirm-box .button-container {
  margin-top: 0;
  padding-bottom: 0;
}

#countdown-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Rubik', sans-serif;
  font-size: 10em;
  font-weight: 900;
  z-index: 100;
  -webkit-text-stroke: 4px black;
}

/* Player Name Input */
.player-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  margin-bottom: clamp(8px, calc(var(--block-size) * 0.37), 24px);
}

.player-name-container label {
  color: var(--h2-color);
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.35), 1.2rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#player-name-input {
  background-color: var(--ui-box-bg-end);
  color: var(--score-color);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: clamp(4px, calc(var(--block-size) * 0.18), 12px) clamp(8px, calc(var(--block-size) * 0.35), 24px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.6rem, calc(var(--block-size) * 0.34), 1.3rem);
  text-align: center;
  width: clamp(100px, calc(var(--block-size) * 5), 240px);
  box-sizing: border-box;
}

#player-name-input:focus {
  outline: none;
  border-color: var(--modal-content-border);
}

#player-name-input.name-rejected {
  border-color: #ff4444;
  animation: shake 0.3s ease;
}

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

/* Leaderboard Tabs */
.leaderboard-tabs {
  display: flex;
  gap: clamp(4px, calc(var(--block-size) * 0.2), 12px);
  margin-bottom: clamp(10px, calc(var(--block-size) * 0.5), 24px);
}

.leaderboard-tab {
  flex: 1;
  background: transparent;
  color: var(--h2-color);
  border: 1px solid var(--h2-color);
  border-radius: 5px;
  padding: clamp(3px, calc(var(--block-size) * 0.12), 8px) clamp(8px, calc(var(--block-size) * 0.4), 24px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.3), 1rem);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.leaderboard-tab.active {
  background: var(--restart-button-color);
  color: var(--modal-content-bg);
  border-color: var(--restart-button-color);
}

.leaderboard-tab:hover:not(.active) {
  background: rgba(128, 128, 128, 0.2);
}

/* Game Over Mode Label (standalone) */
.game-over-mode-label {
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.3), 1rem);
  font-weight: 400;
  letter-spacing: 1px;
  opacity: 0.7;
  color: var(--h2-color);
  text-transform: uppercase;
  margin-bottom: clamp(4px, calc(var(--block-size) * 0.15), 10px);
  display: block;
}

/* Global Scores List */
#global-scores {
  list-style-type: none;
  padding: 0;
  margin: 0 0 clamp(10px, calc(var(--block-size) * 0.74), 50px) 0;
  width: auto;
}

#global-scores li {
  background: var(--high-score-li-bg);
  padding: clamp(4px, calc(var(--block-size) * 0.23), 18px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: auto;
  margin-bottom: clamp(3px, calc(var(--block-size) * 0.15), 12px);
  border-radius: 6px;
  font-size: clamp(0.7rem, calc(var(--block-size) * 0.41), 1.8rem);
  text-transform: uppercase;
  transition: background-color 1.5s ease;
  display: flex;
  justify-content: space-between;
  gap: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  align-items: center;
  border: 2px solid transparent;
}

#global-scores .hs-rank,
#leaderboard-scores .hs-rank {
  color: var(--h2-color);
  font-weight: 700;
  opacity: 0.6;
  min-width: 1.5em;
  text-align: center;
  flex-shrink: 0;
}

#global-scores .hs-name {
  color: var(--h2-color);
  font-weight: 500;
  font-size: 0.85em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

#global-scores .hs-score {
  font-weight: 700;
  color: var(--score-color);
  letter-spacing: 1px;
  text-align: right;
}

#global-scores li.leaderboard-status,
#leaderboard-scores li.leaderboard-status {
  justify-content: center;
  color: var(--h2-color);
  font-size: clamp(0.6rem, calc(var(--block-size) * 0.35), 1.2rem);
}

/* Current user highlight */
#global-scores li.current-user,
#leaderboard-scores li.current-user {
  border: 2px solid var(--modal-content-border);
}

/* User rank display */
.user-rank-display {
  color: var(--h2-color);
  font-size: clamp(0.55rem, calc(var(--block-size) * 0.33), 1.1rem);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: clamp(8px, calc(var(--block-size) * 0.5), 30px);
  padding: clamp(4px, calc(var(--block-size) * 0.2), 14px) clamp(8px, calc(var(--block-size) * 0.4), 24px);
  background: var(--high-score-li-bg);
  border-radius: 6px;
  border: 1px solid var(--modal-content-border);
}

/* Leaderboard Modal Scores */
#leaderboard-scores {
  list-style-type: none;
  padding: 0;
  margin: 0 0 clamp(10px, calc(var(--block-size) * 0.74), 50px) 0;
  width: auto;
}

#leaderboard-scores li {
  background: var(--high-score-li-bg);
  padding: clamp(4px, calc(var(--block-size) * 0.23), 18px) clamp(6px, calc(var(--block-size) * 0.37), 30px);
  width: auto;
  margin-bottom: clamp(3px, calc(var(--block-size) * 0.15), 12px);
  border-radius: 6px;
  font-size: clamp(0.7rem, calc(var(--block-size) * 0.41), 1.8rem);
  text-transform: uppercase;
  transition: background-color 1.5s ease;
  display: flex;
  justify-content: space-between;
  gap: clamp(6px, calc(var(--block-size) * 0.37), 30px);
  align-items: center;
  border: 2px solid transparent;
}

#leaderboard-scores .hs-name {
  color: var(--h2-color);
  font-weight: 500;
  font-size: 0.85em;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
}

#leaderboard-scores .hs-score {
  font-weight: 700;
  color: var(--score-color);
  letter-spacing: 1px;
  text-align: right;
}

/* Leaderboard mode tabs */
.leaderboard-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: clamp(200px, 80%, 400px);
}

.leaderboard-mode-tabs {
  display: flex;
  gap: clamp(3px, calc(var(--block-size) * 0.12), 6px);
  margin-bottom: clamp(12px, calc(var(--block-size) * 0.5), 24px);
}

.leaderboard-content .leaderboard-tabs,
.leaderboard-content .leaderboard-mode-tabs {
  width: 100%;
  box-sizing: border-box;
}

.leaderboard-content ul {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.leaderboard-content li {
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.lb-mode-tab {
  flex: 1;
  background: transparent;
  color: var(--h2-color);
  border: 1px solid var(--h2-color);
  border-radius: 5px;
  padding: clamp(3px, calc(var(--block-size) * 0.15), 8px) clamp(6px, calc(var(--block-size) * 0.3), 16px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(0.5rem, calc(var(--block-size) * 0.28), 0.85rem);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}

.lb-mode-tab.active {
  background: var(--restart-button-color);
  color: var(--modal-content-bg);
  border-color: var(--restart-button-color);
}

.lb-mode-tab:hover:not(.active) {
  background: rgba(128, 128, 128, 0.2);
}

/* ── Compact layout for very small viewports ── */
@media (max-height: 700px) {
  .modal-content {
    padding: 4px;
    padding-top: 8px;
  }

  .modal-content h2 {
    font-size: clamp(0.7rem, 4vh, 1.5rem);
    margin-bottom: 0.3em;
    letter-spacing: 2px;
  }

  /* Game Over compact */
  .game-over-score-container {
    margin-bottom: 0.4em;
  }

  .final-score-label {
    font-size: clamp(0.45rem, 2vh, 0.9rem);
    margin-bottom: 0.1em;
  }

  #final-score {
    font-size: clamp(0.9rem, 5vh, 2.2rem);
  }

  .new-record-label {
    font-size: clamp(0.45rem, 1.8vh, 0.8rem);
  }

  .modal-content h3 {
    font-size: clamp(0.5rem, 2.2vh, 0.9rem);
    margin-bottom: 0.3em;
    padding-bottom: 0.2em;
    width: 90%;
  }

  #high-scores {
    margin: 0 0 0.5em 0;
    width: auto;
  }

  #high-scores li {
    padding: 0.2em 0.5em;
    margin-bottom: 0.15em;
    font-size: clamp(0.5rem, 2vh, 0.9rem);
    gap: 0.5rem;
  }

  .game-over-buttons {
    gap: 0.5em;
    padding-bottom: 4px;
  }

  #restart-button {
    padding: 4px 12px;
    font-size: clamp(0.55rem, 2.2vh, 1rem);
  }

  /* Leaderboard compact */
  .player-name-container {
    margin-bottom: 0.3em;
  }

  .leaderboard-tabs {
    margin-bottom: 0.2em;
  }

  .leaderboard-tab {
    padding: 2px 8px;
    font-size: clamp(0.45rem, 1.8vh, 0.8rem);
  }

  #global-scores li,
  #leaderboard-scores li {
    padding: 0.2em 0.5em;
    margin-bottom: 0.15em;
    font-size: clamp(0.5rem, 2vh, 0.9rem);
    gap: 0.5rem;
  }

  .user-rank-display {
    font-size: clamp(0.45rem, 1.6vh, 0.75rem);
    padding: 2px 8px;
    margin-bottom: 0.4em;
  }

  .leaderboard-mode-tabs {
    margin-bottom: 0.3em;
  }

  .lb-mode-tab {
    padding: 2px 6px;
    font-size: clamp(0.4rem, 1.5vh, 0.7rem);
  }

  /* Settings compact */
  .keybinding-setting {
    margin-bottom: 0.3em;
    width: 90%;
  }

  .keybinding-setting label {
    font-size: clamp(0.45rem, 1.8vh, 0.85rem);
  }

  .keybinding-setting input[type='text'],
  .keybinding-setting input[type='number'] {
    padding: 0.2em 0.4em;
    font-size: clamp(0.45rem, 1.8vh, 0.85rem);
  }

  #soft-drop-speed-select,
  #next-pieces-select {
    padding: 0.2em 0.4em;
    font-size: clamp(0.45rem, 1.8vh, 0.85rem);
  }

  .toggle-switch {
    --toggle-width: 36px;
    --toggle-height: 20px;
  }

  .button-container {
    margin-top: 0.5em;
    gap: 0.5em;
  }

  .settings-button {
    padding: 4px 10px;
    font-size: clamp(0.5rem, 2vh, 0.9rem);
  }

  .settings-nav {
    margin-bottom: 0.3em;
  }

  .settings-nav-item {
    padding: 4px 8px;
    font-size: clamp(0.45rem, 1.8vh, 0.85rem);
  }

  .mode-button {
    padding: 4px 10px;
    font-size: clamp(0.5rem, 2vh, 0.9rem);
  }

  .mode-selection-container {
    gap: 0.4em;
    margin-bottom: 0.4em;
  }

  .modal-content p {
    font-size: clamp(0.5em, 2vh, 0.9em);
    margin-bottom: 0.5em;
  }

  .default-confirm-box p {
    font-size: clamp(0.5em, 2vh, 0.9em);
  }
}

/* ── Mobile Layout ── */
.touch-device .navbar {
  display: none;
}

.touch-device body {
  padding-top: 0;
  align-items: flex-start;
  justify-content: center;
}

.touch-device #game-container {
  padding: 2px;
}

.touch-device #main-content-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 4px;
  padding-bottom: 6px;
  max-height: 100vh;
  max-height: 100dvh;
}

.touch-device #left-info-container {
  display: contents;
}

/* Row 1: stats — must override desktop #left-info-container > #id specificity (0,2,0) */
.touch-device #left-info-container > #mode-container  { order: -12; margin-top: 0; }
.touch-device #left-info-container > #level-container  { order: -11; margin-top: 0; }
.touch-device #left-info-container > #lines-container  { order: -11; margin-top: 0; }
.touch-device #left-info-container > #score-container  { order: -10; margin-top: 0; }
.touch-device #left-info-container > #timer-container  { order: -10; margin-top: 0; }

/* Line break after stats */
.touch-device #main-content-container::before {
  content: '';
  flex-basis: 100%;
  height: 0;
  order: -5;
}

/* Row 2: canvas */
.touch-device #tetris { order: 0; }
.touch-device #countdown-container { order: 0; }

/* Line break after canvas */
.touch-device #main-content-container::after {
  content: '';
  flex-basis: 100%;
  height: 0;
  order: 5;
}

/* Row 3: hold + next pieces */
.touch-device #left-info-container > #held-piece-container { order: 10; margin-top: 0; }
.touch-device #action-text-container { display: none; }

/* Compact stats — slightly narrower than board */
.touch-device #score-container,
.touch-device #level-container,
.touch-device #mode-container,
.touch-device #timer-container,
.touch-device #lines-container {
  flex: 1;
  max-width: calc(var(--block-size) * 3.5);
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  padding: 0 0.3em;
  gap: 0.2em;
}

/* Next pieces in a row */
.touch-device #next-piece-container {
  flex-direction: row;
  align-items: center;
  gap: 0.3em;
}

/* Hide labels in pieces row */
.touch-device #next-piece-container h2 {
  display: none;
}


/* Preview canvases */
.touch-device .next-piece-canvas,
.touch-device #held-piece {
  margin-bottom: 0;
  height: auto;
}

/* Ensure info-container doesn't collapse */
.touch-device #info-container {
  order: 11;
  flex-direction: row;
  width: auto;
  gap: 0.3em;
  flex-shrink: 0;
  overflow: visible;
  min-height: 0;
}

/* Prevent preview canvases from being hidden */
.touch-device #next-piece-container,
.touch-device #held-piece-container {
  overflow: visible;
  flex-shrink: 0;
}

/* Top stats row tappable for settings */
.touch-device #score-container,
.touch-device #level-container,
.touch-device #mode-container,
.touch-device #timer-container,
.touch-device #lines-container {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.touch-device #score-container:active,
.touch-device #level-container:active,
.touch-device #mode-container:active,
.touch-device #timer-container:active,
.touch-device #lines-container:active {
  opacity: 0.6;
}

/* Hold piece as tap target — background on container, not canvas */
.touch-device #held-piece-container {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: var(--piece-preview-bg, #1a1a1a);
  border-radius: 6px;
  padding: 0 2px;
  gap: 0;
  align-self: center;
  overflow: visible;
  transition: opacity 0.1s, background-color 1.5s ease;
  max-height: calc(var(--block-size) * 2);
}

.touch-device #held-piece-container h2 {
  display: none;
}

.touch-device #held-piece {
  display: block;
  background: transparent;
  border-radius: 0;
  margin-top: calc(var(--block-size) * -0.25);
}

.touch-device #held-piece-container:active {
  opacity: 0.7;
}

/* Taller touch targets for modal buttons */
.touch-device #restart-button,
.touch-device .settings-button,
.touch-device .mode-button,
.touch-device #default-settings-button {
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.touch-device #game-over-mode-button {
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Modal spacing for mobile */
.touch-device .modal-content {
  padding-top: 20px;
  justify-content: flex-start;
  gap: 4px;
}

.touch-device #mode-select-modal .modal-content {
  justify-content: center;
}

.touch-device .game-over-buttons,
.touch-device .button-container {
  padding-bottom: 16px;
}

/* Game over screen — larger text and better spacing on mobile */
.touch-device .game-over-score-container {
  margin-bottom: 12px;
}

.touch-device .final-score-label {
  font-size: 0.7rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
}

.touch-device #final-score {
  font-size: 1.8rem;
}

.touch-device .new-record-label {
  font-size: 0.65rem;
}

.touch-device .modal-content h3 {
  font-size: 0.8rem;
  margin-bottom: 8px;
  padding-bottom: 6px;
}

.touch-device #high-scores {
  width: 100%;
  margin-bottom: 12px;
}

.touch-device #high-scores li {
  font-size: 0.85rem;
  padding: 8px 12px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
}

.touch-device .game-over-buttons {
  gap: 12px;
}

.touch-device #global-scores {
  width: 100%;
  margin-bottom: 12px;
}

.touch-device #global-scores li {
  font-size: 0.85rem;
  padding: 8px 12px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
}

.touch-device .leaderboard-tab {
  min-height: 36px;
  padding: 6px 16px;
}

.touch-device #leaderboard-scores {
  width: 100%;
  margin-bottom: 12px;
}

.touch-device #leaderboard-scores li {
  font-size: 0.85rem;
  padding: 8px 12px;
  margin-bottom: 4px;
  width: 100%;
  box-sizing: border-box;
}

.touch-device .lb-mode-tab {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 0.6rem;
  letter-spacing: 0;
}

.touch-device .settings-nav {
  width: 90%;
  margin-bottom: 20px;
}

.touch-device .leaderboard-content {
  width: 92%;
}

.touch-device .leaderboard-content .leaderboard-mode-tabs {
  margin-bottom: 16px;
}

.touch-device .leaderboard-content .leaderboard-tabs {
  margin-bottom: 14px;
}

.touch-device .keybinding-setting {
  width: 90%;
}

.touch-device .settings-nav-item {
  min-height: 44px;
  padding: 10px 16px;
}

.touch-device .user-rank-display {
  font-size: 0.75rem;
  padding: 6px 12px;
}