/* ================================
   Vertical Compression System
   Adjusts all play page components based on quote length
   - 1-2 rows (0-46 chars): No adjustment
   - 3 rows (47-69 chars): 30px reduction
   - 4 rows (70-92 chars): 60px reduction
   - 5+ rows (93+ chars): 90px reduction
   ================================ */

/* Base scaling variables */
:root {
  --v-compress-scale: 1.0;     /* Component size multiplier */
  --v-compress-gap: 0px;       /* Gap reduction amount */
}

/* === 3 rows: 30px compression === */
.vertical-compress-1 {
  --v-compress-scale: 0.95;
  --v-compress-gap: -10px;
}

.vertical-compress-1 .tile {
  --tile-w: calc(45px * 0.95);
  --tile-h: calc(50px * 0.95);
  --tile-font: calc(28px * 0.95);
}

.vertical-compress-1 .letter-cell {
  width: calc(var(--initials-cell-w) * 0.95);
  height: calc(var(--initials-cell-h) * 0.95);
  font-size: calc(var(--initials-font) * 0.95);
}

.vertical-compress-1 .mode-btn {
  height: calc(var(--mode-btn-h) * 0.95);
  font-size: calc(var(--mode-btn-font) * 0.95);
}

.vertical-compress-1 #submit-slot {
  height: calc(58px * 0.95);
}

.vertical-compress-1 .submit-btn {
  font-size: calc(20px * 0.95);
  padding: calc(4px * 0.95) calc(14px * 0.95);
}

.vertical-compress-1 .q-mark {
  width: calc(30px * 0.95);
  height: calc(30px * 0.95);
  font-size: calc(24px * 0.95);
}

.vertical-compress-1 .word-button {
  padding: calc(8px * 0.95) calc(12px * 0.95);
  font-size: calc(20px * 0.95);
  margin: calc(6px * 0.95);
}

/* Reduce vertical spacing */
.vertical-compress-1 > div[style*="height"] {
  margin-top: var(--v-compress-gap);
  margin-bottom: var(--v-compress-gap);
}

/* === 4 rows: 60px compression === */
.vertical-compress-2 {
  --v-compress-scale: 0.90;
  --v-compress-gap: -20px;
}

.vertical-compress-2 .tile {
  --tile-w: calc(45px * 0.90);
  --tile-h: calc(50px * 0.90);
  --tile-font: calc(28px * 0.90);
}

.vertical-compress-2 .letter-cell {
  width: calc(var(--initials-cell-w) * 0.90);
  height: calc(var(--initials-cell-h) * 0.90);
  font-size: calc(var(--initials-font) * 0.90);
}

.vertical-compress-2 .mode-btn {
  height: calc(var(--mode-btn-h) * 0.90);
  font-size: calc(var(--mode-btn-font) * 0.90);
}

.vertical-compress-2 #submit-slot {
  height: calc(58px * 0.90);
}

.vertical-compress-2 .submit-btn {
  font-size: calc(20px * 0.90);
  padding: calc(4px * 0.90) calc(14px * 0.90);
}

.vertical-compress-2 .q-mark {
  width: calc(30px * 0.90);
  height: calc(30px * 0.90);
  font-size: calc(24px * 0.90);
}

.vertical-compress-2 .word-button {
  padding: calc(8px * 0.90) calc(12px * 0.90);
  font-size: calc(20px * 0.90);
  margin: calc(6px * 0.90);
}

/* === 5+ rows: 90px compression === */
.vertical-compress-3 {
  --v-compress-scale: 0.85;
  --v-compress-gap: -30px;
}

.vertical-compress-3 .tile {
  --tile-w: calc(45px * 0.85);
  --tile-h: calc(50px * 0.85);
  --tile-font: calc(28px * 0.85);
}

.vertical-compress-3 .letter-cell {
  width: calc(var(--initials-cell-w) * 0.85);
  height: calc(var(--initials-cell-h) * 0.85);
  font-size: calc(var(--initials-font) * 0.85);
}

.vertical-compress-3 .mode-btn {
  height: calc(var(--mode-btn-h) * 0.85);
  font-size: calc(var(--mode-btn-font) * 0.85);
}

.vertical-compress-3 #submit-slot {
  height: calc(58px * 0.85);
}

.vertical-compress-3 .submit-btn {
  font-size: calc(20px * 0.85);
  padding: calc(4px * 0.85) calc(14px * 0.85);
}

.vertical-compress-3 .q-mark {
  width: calc(30px * 0.85);
  height: calc(30px * 0.85);
  font-size: calc(24px * 0.85);
}

.vertical-compress-3 .word-button {
  padding: calc(8px * 0.85) calc(12px * 0.85);
  font-size: calc(20px * 0.85);
  margin: calc(6px * 0.85);
}