/* =====================================================
   LANDSCAPE MODE FOR MOBILE DEVICES
   Handles horizontal orientation on phones and small tablets
   ===================================================== */
@media screen and (max-width: 932px) and (orientation: landscape) {
  /* Global landscape adjustments */
  body {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .page {
    overflow: hidden !important;
  }

  .card {
    padding: 8px !important;
  }

  /* PAGE 1 - Main Dashboard */
  #page1 #dashboard {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #page1 #dashboard .card,
  #page1 #dashboard .difficulty-card {
    min-height: 0 !important;
    padding: 10px !important;
  }

  #page1 #dashboard .card h2 {
    font-size: 28px !important;
  }

  #page1 #dashboard .card p {
    font-size: 12px !important;
  }

  #page1 .difficulty-card h1 {
    font-size: 16px !important;
  }

  #page1 .difficulty-card .adjustment span {
    font-size: 12px !important;
  }

  #page1 .difficulty-card .progress-bar {
    width: 70px !important;
    height: 70px !important;
    margin-right: 10px !important;
  }

  #page1 .difficulty-card .progress-bar::before {
    width: 50px !important;
    height: 50px !important;
  }

  #page1 .difficulty-card .progress-bar span {
    font-size: 12px !important;
  }

  #page1 .difficulty-card .remaining-blocks {
    font-size: 11px !important;
    margin-bottom: 0 !important;
  }

  #page1 .difficulty-card .adjustments {
    margin-left: 0 !important;
    margin-bottom: -5px !important;
    column-gap: 10px !important;
  }

  /* PAGE 2 - Bitcoin Price Chart */
  #page2 .price-container {
    font-size: 22px !important;
    margin-bottom: 5px !important;
  }

  #page2 .flashing-dot {
    width: 12px !important;
    height: 12px !important;
  }

  #page2 .price-change {
    font-size: 18px !important;
  }

  #page2 .chart-container {
    height: 85% !important;
  }

  /* PAGE 3 - Multi-currency Flapper */
  #page3 .card {
    padding: 5px !important;
  }

  #page3 .displays {
    padding: 0 !important;
  }

  #page3 .display.XXL {
    font-size: 52px !important;
    line-height: 56px !important;
    height: 56px !important;
    margin-bottom: 4px !important;
  }

  #page3 .display.XXL .digit {
    height: 56px !important;
    width: 42px !important;
    border-radius: 4px !important;
  }

  #page3 .display.XXL .digit .top {
    clip: rect(0px, auto, 27px, 0px) !important;
  }

  #page3 .display.XXL .digit .bottom {
    clip: rect(28px, auto, 56px, 0px) !important;
  }

  #page3 .activity {
    top: 20px !important;
    left: -25px !important;
    height: 0px !important;
  }

  #page3 .flapper-flashing-dot {
    width: 20px !important;
    height: 20px !important;
    top: 18px !important;
    left: 10px !important;
  }

  /* PAGE 4 - Next Halving */
  #page4 .halving-progress-circle {
    width: 250px !important;
    height: 250px !important;
  }

  #page4 .halving-progress-circle::before {
    width: 200px !important;
    height: 200px !important;
  }

  #page4 .halving-progress-circle .progress-text {
    font-size: 16px !important;
    padding: 5px !important;
    top: 60px !important;
  }

  #page4 .inner-circle {
    margin-top: 20px !important;
  }

  #page4 .remaining-text {
    font-size: 12px !important;
    margin: 0 !important;
    padding-bottom: 5px !important;
  }

  #page4 .split-flap .digit {
    font-size: 35px !important;
  }

  #page4 .marker.vertical {
    height: 7.7% !important;
  }

  #page4 .marker.marker-25 {
    top: 50% !important;
    left: 92.2% !important;
    transform: translateY(-50%) !important;
  }

  #page4 .marker.horizontal {
    width: 7.7% !important;
    height: 2px !important;
  }

  #page4 .split-flap {
    margin: 0 !important;
  }

  #page4 .next-halving-text {
    font-size: 12px !important;
    margin-top: 8px !important;
  }

  #page4 .dynamic-date {
    font-size: 14px !important;
    margin-top: 3px !important;
  }

  /* PAGE 5 - Hashrate Chart */
  #page5 .price-container {
    font-size: 22px !important;
    margin-bottom: 5px !important;
  }

  #page5 .chart-container {
    height: 85% !important;
  }

  /* PAGE 6 - Mempool Visualizer */
  #page6 .card {
    padding: 0 !important;
  }

  body .tx-scene.svelte-16phi98 {
    height: 100% !important;
    top: 0 !important;
  }

  /* PAGE 7 - Price Range Chart */
  #page7 .pricerange-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page7 .chart-container {
    height: 90% !important;
  }

  #page7 #priceRangeChart {
    width: 100% !important;
    height: 100% !important;
  }

  /* PAGE 8 - Node Map */
  #page8 .card {
    overflow: hidden !important;
    position: relative !important;
  }

  #page8 #map-container {
    height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.65) !important;
  }

  #page8 #map {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    max-height: 100% !important;
  }

  #page8 #reachable-nodes {
    bottom: 70px !important;
    font-size: 11px !important;
    padding: 6px !important;
  }

  /* PAGE 9 - Sats per Dollar */
  #page9 .satsusd-price-container {
    margin-bottom: 5px !important;
  }

  #page9 #satsusd-value {
    font-size: 28px !important;
  }

  #page9 .satsusd-price-change {
    font-size: 18px !important;
  }

  #page9 #sats-per-dollar {
    font-size: 12px !important;
    padding: 5px !important;
  }

  #page9 .satsusd-container {
    margin-top: 5px !important;
  }

  #page9 .satsusd-large-square {
    width: 60px !important;
    height: 60px !important;
    grid-template-columns: repeat(10, 6px) !important;
    grid-template-rows: repeat(10, 6px) !important;
    margin: 3px !important;
  }

  #page9 .satsusd-small-square {
    width: 6px !important;
    height: 6px !important;
  }

  /* PAGE 10 - Fear & Greed */
  #page10 .price-container {
    font-size: 18px !important;
    margin: 0 !important;
  }

  #page10 .highcharts-figure {
    height: 180px !important;
    margin: 0 !important;
  }

  #page10 .historical-data-container {
    margin-top: 5px !important;
  }

  #page10 .historical-data .label {
    font-size: 11px !important;
    margin-bottom: 5px !important;
  }

  #page10 .value-wrapper {
    width: 35px !important;
    height: 35px !important;
  }

  #page10 .value {
    font-size: 16px !important;
  }

  /* PAGE 11 - Address Distribution */
  #page11 .wallet-distribution-text,
  #page36 .wallet-distribution-text,
  #market-sentiment .wallet-distribution-text {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }

  #page11 #bitcoin-distribution-table {
    font-size: 10px !important;
  }

  #page11 #bitcoin-distribution-table th,
  #page11 #bitcoin-distribution-table td {
    padding: 4px !important;
  }

  /* PAGE 12 - Market Cap */
  #page12 .marketcap-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page12 .chart-container {
    height: 90% !important;
  }

  /* PAGE 13 - Global Assets */
  #page13 .globalassets-text {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }

  #page13 #treemapContainer {
    height: calc(100% - 30px) !important;
  }

  /* PAGE 14 - TX Count */
  #page14 .price-container {
    font-size: 22px !important;
    margin-bottom: 5px !important;
  }

  #page14 .chart-container {
    height: 85% !important;
  }

  /* PAGE 15 - Wealth Distribution */
  #page15 .wealthdistribution-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page15 #wealth-distribution-container {
    height: calc(100% - 30px) !important;
  }

  #page15 #wealth-distribution-container svg text {
    font-size: 14px !important;
  }

  /* PAGE 16 - Mayer Multiple */
  #page16 .price-container {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  #page16 .chart-container {
    height: 85% !important;
  }

  /* PAGE 17 - House Price */
  #page17 .price-container {
    transform: scale(0.8) !important;
    margin-bottom: 5px !important;
  }

  #page17 .house-price-text {
    font-size: 14px !important;
    padding-bottom: 5px !important;
  }

  #page17 .historical-house-prices {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #page17 .historical-house-prices .historical-price-card {
    height: auto !important;
    padding: 8px !important;
  }

  #page17 .historical-house-prices .period-label {
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }

  #page17 .historical-house-prices .price-value {
    font-size: 18px !important;
  }

  #page17 .historical-house-prices .change-value {
    font-size: 12px !important;
    margin-top: 3px !important;
  }

  #page17 .extended-historical-house-prices {
    display: none !important;
  }

  #page17::before,
  #page17::after {
    display: none !important;
  }

  /* PAGE 18 - Polar Graph */
  #page18 .centered-polar-image {
    max-height: 85% !important;
    max-width: 85% !important;
    width: auto !important;
  }

  /* PAGE 19 - Power Law */
  #page19 .powerlaw-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page19 .chart-container {
    height: 90% !important;
  }

  #page19 #bandPrices {
    bottom: 80px !important;
    right: 10px !important;
    font-size: 10px !important;
    width: 140px !important;
    padding: 5px !important;
  }

  #page19 .model-box {
    bottom: 40px !important;
    right: 10px !important;
    font-size: 10px !important;
    width: 140px !important;
    padding: 5px !important;
  }

  /* PAGE 20 - Stock-to-Flow */
  #page20 .stocktoflow-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page20 .chart-container {
    height: 90% !important;
  }

  #page20 #s2fMetrics {
    bottom: 100px !important;
    right: 10px !important;
    font-size: 10px !important;
    width: 140px !important;
    padding: 5px !important;
  }

  #page20 #halvingColorScale {
    bottom: 40px !important;
    right: 10px !important;
    width: 140px !important;
    padding: 5px !important;
  }

  #page20 #halvingColorScale > div:first-child {
    font-size: 9px !important;
  }

  #page20 .halving-scale-labels {
    font-size: 8px !important;
  }

  /* PAGE 21 - Thank You Satoshi */
  #page21 .thank-you {
    font-size: 35px !important;
  }

  #page21 .satoshi {
    font-size: 35px !important;
  }

  /* PAGE 22 - Node Versions */
  #page22 .nodeversions-text {
    font-size: 16px !important;
    top: 30px !important;
  }

  #page22 .split-layout {
    flex-direction: row !important;
    padding-top: 30px !important;
  }

  #page22 .left-panel {
    flex: 1 !important;
  }

  #page22 .right-panel {
    flex: 1 !important;
  }

  #page22 #node-version-table {
    font-size: 10px !important;
  }

  #page22 #node-version-table th,
  #page22 #node-version-table td {
    padding: 4px 8px !important;
  }

  #page22 #versionPieChart {
    max-width: 200px !important;
    max-height: 200px !important;
  }

  /* PAGE 23 - Monthly Returns */
  #page23 .monthlyreturns-text {
    font-size: 14px !important;
    margin-top: 0 !important;
  }

  #page23 .price-container {
    margin: 5px 0 !important;
  }

  #page23 #current-month-return {
    font-size: 18px !important;
  }

  #page23 .flashing-dot {
    width: 12px !important;
    height: 12px !important;
  }

  #page23 #monthlyReturnsContainer {
    height: calc(100% - 60px) !important;
    overflow: auto !important;
  }

  #page23 #monthlyReturnsCanvas {
    width: 100% !important;
    height: 100% !important;
  }

  /* PAGE 24 - Big Mac Index */
  #page24 .bigmac-img-wrapper img {
    width: 80px !important;
    margin-bottom: 5px !important;
  }

  #page24 .price-container {
    font-size: 16px !important;
    margin-bottom: 5px !important;
    transform: none !important;
  }

  #page24 .bigmac-price-text {
    font-size: 14px !important;
    padding-bottom: 5px !important;
  }

  #page24 .historical-bigmac-prices {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #page24 .historical-bigmac-prices .historical-price-card {
    height: auto !important;
    padding: 8px !important;
  }

  #page24 .historical-bigmac-prices .period-label {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }

  #page24 .historical-bigmac-prices .price-value {
    font-size: 14px !important;
  }

  #page24 .historical-bigmac-prices .change-value {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  #page24 .extended-historical-bigmac-prices {
    display: none !important;
  }

  #page24 .bigmac-content-wrapper {
    margin-top: 0 !important;
  }

  /* PAGE 25 - Bitcoin Dominance */
  #page25 .dominance-cards-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
  }

  #page25 .dominance-card {
    padding: 8px !important;
    min-height: auto !important;
  }

  #page25 .dominance-card-header h3 {
    font-size: 10px !important;
  }

  #page25 .bitcoin-icon {
    width: 20px !important;
    height: 20px !important;
  }

  #page25 .dominance-value {
    font-size: 18px !important;
    margin-bottom: 3px !important;
  }

  #page25 .dominance-change {
    font-size: 10px !important;
  }

  #page25 .sparkline-container {
    height: 25px !important;
    margin-top: 5px !important;
  }

  #page25 .market-comparison-section h4,
  #page25 .dominance-chart-container h4 {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  #page25 .market-comparison {
    height: 25px !important;
    margin-bottom: 8px !important;
  }

  #page25 .comparison-legend {
    font-size: 10px !important;
    gap: 15px !important;
  }

  #page25 .dominance-chart-container {
    min-height: 120px !important;
    max-height: 150px !important;
  }

  /* PAGE 26 - Log-Log Chart */
  #page26 .log-log-text {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #page26 .log-log-model-box {
    bottom: 60px !important;
    right: 10px !important;
    font-size: 10px !important;
    width: 120px !important;
    padding: 5px !important;
  }

  #page26 #logLogChart {
    height: 90% !important;
  }

  /* PAGE 27 - MVRV Z-Score */
  #page27 .price-container {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  #page27 .chart-container {
    height: 85% !important;
  }

  /* PAGE 28 - Google Trends */
  #page28 .googletrends-text {
    font-size: 14px !important;
    margin-bottom: 0 !important;
  }

  #page28 .price-container {
    font-size: 16px !important;
    margin-bottom: 5px !important;
  }

  #page28 #googleTrendsChart {
    height: 85% !important;
  }

  /* PAGE 29 - Historical Performance */
  #page29 .performance-metrics-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    height: auto !important;
    margin-bottom: 8px !important;
  }

  #page29 .performance-metric-card {
    padding: 8px !important;
  }

  #page29 .performance-metric-header h3 {
    font-size: 9px !important;
  }

  #page29 .performance-icon {
    font-size: 10px !important;
  }

  #page29 .performance-metric-value {
    font-size: 20px !important;
  }

  #page29 .performance-metric-subtitle {
    font-size: 8px !important;
  }

  #page29 .performance-main-content {
    flex-direction: row !important;
    gap: 10px !important;
    max-height: calc(100% - 100px) !important;
  }

  #page29 .performance-chart-section {
    flex: 1.5 !important;
    min-height: 150px !important;
  }

  #page29 .performance-section-title {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }

  #page29 .performance-stats-section {
    flex: 1 !important;
    margin-top: 0 !important;
  }

  #page29 .performance-stats-container {
    gap: 5px !important;
    margin-top: 0 !important;
  }

  #page29 .performance-stats-card {
    padding: 5px 8px !important;
    margin-bottom: 0 !important;
  }

  #page29 .performance-stats-title {
    font-size: 11px !important;
    margin-bottom: 3px !important;
    margin-top: 5px !important;
  }

  #page29 .performance-stat-item {
    padding: 2px 0 !important;
  }

  #page29 .performance-stat-period {
    font-size: 9px !important;
  }

  #page29 .performance-stat-value {
    font-size: 10px !important;
  }

  /* PAGE 30 - Million Dollar Wall */
  #page30 .stats-container {
    flex-direction: row !important;
    gap: 15px !important;
    margin-bottom: 5px !important;
  }

  #page30 .stat-card {
    padding: 10px 15px !important;
    min-width: auto !important;
  }

  #page30 .stat-label {
    font-size: 10px !important;
  }

  #page30 .current-price-card .current-price,
  #page30 .progress-card .progress-percentage {
    font-size: 22px !important;
  }

  #page30 .stat-sublabel {
    font-size: 9px !important;
  }

  #page30 .circle-container {
    width: 220px !important;
    height: 220px !important;
    margin: 5px auto !important;
  }

  #page30 .dot {
    width: 5px !important;
    height: 5px !important;
  }

  /* Header/Navigation Landscape Adjustments */
  .logo {
    width: 80px !important;
    top: 10px !important;
    left: 10px !important;
  }

  .header-icons {
    top: 10px !important;
  }

  .live-button {
    font-size: 10px !important;
    padding: 3px !important;
    margin-top: 0 !important;
  }

  .dashboard-settings-btn {
    margin-top: 0 !important;
    margin-right: 6px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .ai-mic-button {
    margin-top: 0 !important;
    margin-right: 6px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }

  .date-time {
    font-size: 11px !important;
    margin-top: 0 !important;
  }

  .play-pause-container {
    bottom: 10px !important;
    left: 10px !important;
  }

  #footer-text {
    font-size: 10px !important;
  }

  .page-navigation {
    bottom: 8px !important;
    right: 10px !important;
  }

  .page-navigation #page-counter {
    font-size: 10px !important;
  }
}

/* =====================================================
   TABLET SCREENS (768px - 1366px)
   For 11-12 inch tablets and small laptops
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1366px) {
  /* PAGE 1 - Main Dashboard */
  #page1 #dashboard {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  #page1 #dashboard .card,
  #page1 #dashboard .difficulty-card {
    padding: 12px !important;
  }

  #page1 #dashboard .card h2 {
    font-size: 60px !important;
  }

  #page1 #dashboard .card p {
    font-size: 16px !important;
  }

  #page1 #dashboard .card h2 span {
    font-size: 14px !important;
    right: -55px !important;
    top: -8px !important;
  }

  #page1 .mini-card h2 {
    font-size: 50px !important;
  }

  #page1 .mini-card p {
    font-size: 16px !important;
  }

  #page1 .difficulty-card h1 {
    font-size: 20px !important;
    margin-top: 30px !important;
  }

  #page1 .difficulty-card .adjustments {
    margin-top: -20px !important;
    margin-bottom: 15px !important;
  }

  #page1 .difficulty-card .adjustment span {
    font-size: 16px !important;
  }

  #page1 .difficulty-card .progress-bar {
    width: 85px !important;
    height: 85px !important;
    margin-right: 20px !important;
  }

  #page1 .difficulty-card .progress-bar::before {
    width: 60px !important;
    height: 60px !important;
  }

  #page1 .difficulty-card .progress-bar span {
    font-size: 14px !important;
  }

  #page1 .difficulty-card .remaining-blocks {
    font-size: 12px !important;
    margin-bottom: 10px !important;
  }

  #page1 .difficulty-card .adjustments {
    margin-left: 20px !important;
    margin-bottom: -15px !important;
    column-gap: 15px !important;
  }

  #page1 .difficulty-card .adjustments-left {
    margin-right: 10px !important;
  }

  /* PAGE 2, 5, 14, 16, 23, 27, 28 - Chart pages */
  #page2 .price-container,
  #page5 .price-container,
  #page14 .price-container,
  #page16 .price-container,
  #page23 #current-month-return,
  #page27 .price-container,
  #page28 .price-container {
    font-size: 40px !important;
  }

  #page2 .chart-container,
  #page5 .chart-container,
  #page14 .chart-container,
  #page27 .chart-container {
    height: 85% !important;
  }

  /* PAGE 3 - Multi-currency */
  #page3 .display.XXL {
    font-size: 58px !important;
    line-height: 62px !important;
    height: 62px !important;
    margin-bottom: 5px !important;
  }

  #page3 .display.XXL .digit {
    height: 62px !important;
    width: 46px !important;
    border-radius: 4px !important;
  }

  #page3 .display.XXL .digit .top {
    clip: rect(0px, auto, 30px, 0px) !important;
  }

  #page3 .display.XXL .digit .bottom {
    clip: rect(31px, auto, 62px, 0px) !important;
  }

  #page3 .activity {
    top: 22px !important;
    left: -28px !important;
  }

  #page3 .flapper-flashing-dot {
    width: 22px !important;
    height: 22px !important;
    top: 11px !important;
    left: -15px !important;
  }

  /* PAGE 4 - Halving */
  #page4 .halving-progress-circle {
    width: 450px !important;
    height: 450px !important;
  }

  #page4 .halving-progress-circle::before {
    width: 380px !important;
    height: 380px !important;
  }

  #page4 .halving-progress-circle .progress-text {
    font-size: 24px !important;
    top: 110px !important;
  }

  #page4 .split-flap .digit {
    font-size: 70px !important;
  }

  #page4 .remaining-text {
    font-size: 18px !important;
  }

  #page4 .next-halving-text {
    font-size: 18px !important;
  }

  #page4 .dynamic-date {
    font-size: 22px !important;
  }

  #page4 .marker.vertical {
    height: 7.7% !important;
  }

  #page4 .marker.marker-25 {
    top: 50% !important;
    left: 92.2% !important;
    transform: translateY(-50%) !important;
  }

  #page4 .marker.horizontal {
    width: 7.7% !important;
    height: 2px !important;
  }

  /* PAGE 8 - Node Map */
  #page8 .card {
    overflow: hidden !important;
    position: relative !important;
  }

  #page8 #map-container {
    height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  #page8 #map {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
    max-height: 100% !important;
  }

  #page8 #reachable-nodes {
    bottom: 90px !important;
    font-size: 14px !important;
    padding: 10px !important;
  }

  /* PAGE 9 - Sats per Dollar */
  #page9 #satsusd-value {
    font-size: 45px !important;
  }

  #page9 .satsusd-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 1px !important;
    justify-content: center !important;
  }

  #page9 .satsusd-large-square {
    width: 100px !important;
    height: 100px !important;
    grid-template-columns: repeat(10, 10px) !important;
    grid-template-rows: repeat(10, 10px) !important;
    margin: 8px !important;
  }

  #page9 .satsusd-small-square {
    width: 10px !important;
    height: 10px !important;
  }

  /* PAGE 10 - Fear & Greed */
  #page10 .price-container {
    font-size: 35px !important;
    margin: 0 !important;
  }

  #page10 .highcharts-figure {
    height: 280px !important;
    margin: -20px auto !important;
  }

  #page10 .historical-data-container {
    margin-top: 10px !important;
  }

  #page10 .historical-data .label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  #page10 .value-wrapper {
    width: 45px !important;
    height: 45px !important;
  }

  #page10 .value {
    font-size: 22px !important;
  }

  /* PAGE 11 - Address Distribution */
  #page11 .wallet-distribution-text,
  #page36 .wallet-distribution-text,
  #market-sentiment .wallet-distribution-text {
    margin-bottom: 8px !important;
  }

  #page11 #bitcoin-distribution-table {
    font-size: 16px !important;
  }

  #page11 #bitcoin-distribution-table th,
  #page11 #bitcoin-distribution-table td {
    padding: 8px 10px !important;
  }

  #page11 .wallet-icon {
    width: 1.8em !important;
    height: 1.8em !important;
    font-size: 1.6em !important;
  }

  /* PAGE 15 - Wealth Distribution */
  #page15 .wealthdistribution-text {
    margin-bottom: -25px !important;
  }

  #page15 #wealth-distribution-container {
    height: calc(100% - 40px) !important;
    transform: scale(0.85) !important;
    transform-origin: center center !important;
  }

  #page15 #wealth-distribution-container svg text {
    font-size: 18px !important;
  }

  /* PAGE 17 - House Price */
  #page17 .price-container {
    transform: scale(0.95) !important;
    margin-bottom: 10px !important;
  }

  #page17 .house-price-text {
    font-size: 23px !important;
    padding-bottom: 10px !important;
  }

  #page17 .historical-house-prices {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  #page17 .historical-house-prices .historical-price-card {
    padding: 10px !important;
    height: 120px !important;
    width: 165px !important;
  }

  #page17 .historical-house-prices .period-label {
    font-size: 23px !important;
    margin-bottom: 5px !important;
  }

  #page17 .historical-house-prices .price-value {
    font-size: 26px !important;
  }

  #page17 .historical-house-prices .change-value {
    font-size: 20px !important;
  }

  #page17 .extended-historical-house-prices {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
    margin-bottom: -15px !important;
  }

  #page17 .extended-historical-house-prices .historical-price-card {
    padding: 8px !important;
    height: auto !important;
    margin-bottom: 0 !important;
    width: 170px !important;
  }

  #page17 .extended-historical-house-prices .period-label {
    font-size: 18px !important;
  }

  #page17 .extended-historical-house-prices .price-value {
    font-size: 20px !important;
  }

  #page17 .extended-historical-house-prices .change-value {
    font-size: 16px !important;
  }

  #page17::before {
    width: 850px !important;
    height: 75% !important;
  }

  #page17::after {
    top: 58% !important;
    transform: translate(320px, -250px) !important;
    width: 50px !important;
    height: 100px !important;
  }

  /* PAGE 18 - Polar Graph */
  #page18 .centered-polar-image {
    max-height: 90% !important;
    max-width: 90% !important;
    width: auto !important;
  }

  /* PAGE 21 - Thank You Satoshi */
  #page21 .thank-you,
  #page21 .satoshi {
    font-size: 60px !important;
  }

  /* PAGE 22 - Node Versions */
  #page22 #node-version-table {
    font-size: 14px !important;
  }

  #page22 #versionPieChart {
    max-width: 450px !important;
    max-height: 450px !important;
  }

  /* PAGE 24 - Big Mac Index */
  #page24 .bigmac-img-wrapper img {
    width: 110px !important;
  }

  #page24 .price-container {
    font-size: 26px !important;
  }

  #page24 .bigmac-price-text {
    font-size: 25px !important;
  }

  #page24 .historical-bigmac-prices .historical-price-card {
    height: 120px !important;
    width: 165px !important;
    padding: 10px !important;
  }

  #page24 .historical-bigmac-prices .period-label {
    font-size: 20px !important;
  }

  #page24 .historical-bigmac-prices .price-value {
    font-size: 26px !important;
  }

  #page24 .historical-bigmac-prices .change-value {
    font-size: 20px !important;
  }

  #page24 .extended-historical-bigmac-prices {
    margin-bottom: -15px !important;
  }

  #page24 .extended-historical-bigmac-prices .historical-price-card {
    width: 170px !important;
    height: 80px !important;
    padding: 8px !important;
  }

  #page24 .price-container {
    font-size: 35px !important;
  }

  #page24 .price-change,
  #page24 .sats-text {
    font-size: 35px !important;
  }

  #page24 .extended-historical-bigmac-prices .period-label {
    font-size: 16px !important;
  }

  #page24 .extended-historical-bigmac-prices .price-value {
    font-size: 20px !important;
  }

  #page24 .extended-historical-bigmac-prices .change-value {
    font-size: 16px !important;
  }

  /* PAGE 25 - Bitcoin Dominance */
  #page25 .dominance-value {
    font-size: 26px !important;
  }

  #page25 .dominance-card-header h3 {
    font-size: 13px !important;
  }

  #page25 .market-comparison {
    height: 15px !important;
  }

  #page25 .market-comparison-section h4 {
    margin-bottom: 5px !important;
  }

  #page25 .dominance-card {
    min-height: 154px !important;
  }

  #page25 .dominance-cards-row {
    margin-bottom: 10px !important;
  }

  /* PAGE 29 - Historical Performance */
  #page29 .card {
    padding: 70px 20px 80px 20px !important;
  }

  #page29 .performance-metric-value {
    font-size: 30px !important;
  }

  #page29 .performance-metric-header h3 {
    font-size: 12px !important;
  }

  #page29 .performance-metric-card {
    padding: 15px !important;
  }

  #page29 .performance-metrics-row {
    margin-bottom: 20px !important;
  }

  #page29 .performance-chart-section {
    flex: 1.2 !important;
    min-height: 280px !important;
  }

  #page29 .performance-chart-container {
    min-height: 280px !important;
    height: 100% !important;
  }

  #page29 #annualReturnsChart {
    height: 100% !important;
    min-height: 250px !important;
  }

  #page29 .performance-stats-section {
    flex: 0.5 !important;
    margin-top: 0 !important;
    overflow: visible !important;
    max-width: 280px !important;
  }

  #page29 .performance-stats-container {
    flex-direction: column !important;
    height: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #page29 .performance-stats-card {
    padding: 8px 12px !important;
    flex: 1 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page29 .performance-stats-card.additional-stats {
    overflow: visible !important;
    border-radius: 8px !important;
  }

  #page29 .performance-stats-title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    margin-top: 4px !important;
  }

  #page29 .performance-stat-item {
    padding: 4px 0 !important;
  }

  #page29 .performance-stat-period,
  #page29 .performance-stat-value {
    font-size: 13px !important;
  }

  #page29 .performance-main-content {
    flex-direction: row !important;
    gap: 15px !important;
  }

  /* PAGE 30 - Million Dollar Wall */
  #page30 .circle-container {
    width: 600px !important;
    height: 600px !important;
    transform: scale(0.7) !important;
    margin: -100px auto !important;
  }
}

/* =====================================================
   SMALL TABLETS IN LANDSCAPE (e.g., iPad Mini landscape)
   ===================================================== */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #page1 #dashboard {
    gap: 6px !important;
  }

  #page1 #dashboard .card h2 {
    font-size: 32px !important;
  }

  #page1 #dashboard .card p {
    font-size: 14px !important;
  }

  #page1 .difficulty-card .progress-bar {
    width: 75px !important;
    height: 75px !important;
  }

  #page1 .difficulty-card .progress-bar::before {
    width: 55px !important;
    height: 55px !important;
  }

  #page29 .performance-main-content {
    gap: 10px !important;
  }
}

/* =====================================================
   MOBILE PORTRAIT (ORIGINAL RULES)
   ===================================================== */
@media screen and (max-width: 767px) and (orientation: portrait) {
  body {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
    height: 100dvh !important;
  }

  .page {
    /* margin-top: 85px; */
    overflow: auto;
  }

  #page29.page {
    overflow-y: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #page1 #dashboard {
    grid-template-columns: 1fr;
  }
}

/* General mobile rules (both orientations) */
@media screen and (max-width: 767px) {
  body {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
    height: 100dvh !important;
  }

  .page {
    /* margin-top: 85px; */
    overflow: auto;
  }

  #page29.page {
    overflow-y: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  #page1 #dashboard {
    grid-template-columns: 1fr;
  }

  #page1 .difficulty-card .adjustments {
    margin-left: 0px;
    margin-bottom: -10px;
    column-gap: 20px;
  }

  #page1 .difficulty-card .adjustments-left {
    margin-right: 0px !important;
  }

  #page1 .difficulty-card .progress {
    margin-left: 0px;
  }

  #page1 .difficulty-card .progress-bar {
    margin-right: 0px;
  }

  #page1 .difficulty-card .equal-height {
    padding-bottom: 0px !important;
  }

  #page1 .difficulty-card .remaining-blocks {
    margin-bottom: 5px !important;
  }

  .chart-container {
    height: 90% !important;
  }

  /* Bitcoin Price chart responsive fix - Page 2 ONLY */
  #page2 #myChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page2 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page2 .card {
    overflow: hidden !important;
  }

  /* Fix for Bitcoin Price chart last label on mobile */
  @media screen and (max-width: 768px) {
    #page2 #myChart {
      width: 100% !important;
      margin: 0 auto;
    }
    
    #page2 .chart-container {
      padding: 0 10px 0 10px !important;
      overflow: visible !important;
    }
  }

  /* Hashrate chart responsive fix - Page 5 */
  #page5 #hashrateChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page5 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page5 .card {
    overflow: hidden !important;
  }

  /* TX Count chart responsive fix - Page 14 */
  #page14 #txChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page14 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page14 .card {
    overflow: hidden !important;
  }

  /* Marketcap chart responsive fix - Page 12 */
  #page12 #marketCapChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page12 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page12 .card {
    overflow: hidden !important;
  }

  /* Mayer Multiple chart responsive fix - Page 16 */
  #page16 #mayerMultipleChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page16 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page16 .card {
    overflow: hidden !important;
  }

  /* Price Range chart responsive fix */
  #page7 #priceRangeChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page7 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page7 .card {
    overflow: hidden !important;
  }

  #page7 #priceRangeChart,
  #page19 #btcPowerLawChart,
  #page20 #btcStockToFlowChart {
    height: 100% !important;
    width: 800px !important;
  }

  #page2 .price-container,
  #page5 .price-container,
  #page14 .price-container,
  #page27 .price-container {
    font-size: 30px;
    margin-bottom: 20px;
  }

  #page19 .powerlaw-text {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #page20 .stocktoflow-text {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #page16 .price-container {
    font-size: 20px;
    margin-bottom: 20px;
  }

  #page27 .price-container {
    font-size: 20px;
    margin-bottom: 20px;
  }

  /* Mayer Multiple chart responsive fix for 1080p screens */
  @media screen and (min-width: 768px) and (max-width: 1920px) {
    #page16 #mayerMultipleChart {
      width: 100% !important;
      height: 85% !important;
      max-width: 100vw !important;
    }

    #page16 .chart-container {
      overflow: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #page16 .card {
      overflow: hidden !important;
      padding: 15px !important;
    }
  }

  /* Mayer Multiple chart responsive fix for 2K+ screens */
  @media screen and (min-width: 1921px) {
    #page16 #mayerMultipleChart {
      width: 100% !important;
      height: 90% !important;
      max-width: 100vw !important;
    }

    #page16 .chart-container {
      overflow: hidden !important;
      width: 100% !important;
      max-width: 100vw !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #page16 .card {
      overflow: hidden !important;
      padding: 20px !important;
    }
  }

  /* Additional Mayer Multiple improvements for better chart display */
  @media screen and (min-width: 768px) {
    #page16 .mayermultiple-text {
      font-size: 22px !important;
      margin-bottom: 15px !important;
    }
  }

  @media screen and (min-width: 1921px) {
    #page16 .mayermultiple-text {
      font-size: 24px !important;
      margin-bottom: 20px !important;
    }
  }

  #page19 #bandPrices {
    bottom: 135px !important;
    right: 20px !important;
    left: auto !important;
  }

  /* Power Law chart responsive fix */
  #page19 #btcPowerLawChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }
  
  #page19 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #page19 .card {
    overflow: hidden !important;
  }

  #page19 .model-box {
    bottom: 85px !important;
    right: 20px !important;
    left: auto !important;
  }

  /* Stock-to-Flow chart responsive fix */
  #page20 #btcStockToFlowChart {
    width: 100% !important;
    height: 95% !important;
    max-width: 100vw !important;
  }

  #page20 .chart-container {
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page20 .card {
    overflow: hidden !important;
  }

  #page20 #s2fMetrics {
    bottom: 175px !important;
    right: 20px !important;
    left: auto !important;
  }

  #page20 #halvingColorScale {
    bottom: 85px !important;
    right: 20px !important;
    left: auto !important;
  }

  #page12 .marketcap-text,
  #page7 .pricerange-text {
    font-size: 20px;
    margin-bottom: 0px !important;
  }

  /* PAGE 6 */

  .canvas-wrapper.svelte-1dys3k8.svelte-1dys3k8 {
    margin-bottom: 20px !important;
  }

  .svg-icon.svelte-10b4xd8 {
    display: none;
  }

  .block-info.svelte-itmjm5 .data-row.svelte-itmjm5 {
    justify-content: center !important;
  }

  .spacer.svelte-1dys3k8 {
    flex: 1 !important;
  }

  .block-info.svelte-itmjm5.svelte-itmjm5 {
    /* bottom: calc(100% + 1.75rem) !important; */
    bottom: calc(100% - 10px) !important;
  }

  .block-info.svelte-itmjm5 .data-field.close-button.svelte-itmjm5 {
    display: none !important;
  }

  body .tx-scene.svelte-16phi98 {
    height: 110% !important;
    top: -45px !important;
  }

  #page8 .card {
    position: relative;
    overflow: auto;
  }

  #page8 #map-container {
    height: 100%;
    overflow: auto;
    /* width: 1200px; */
  }

  #page8 #map {
    margin-top: 0px;
    max-height: none;
    width: 1100px;
  }

  #page8 #reachable-nodes {
    bottom: 40px;
    font-size: 15px;
  }

  #page10 .price-container {
    font-size: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  #page10 .fear-greed-wrapper {
    gap: 10px;
    margin-bottom: 10px;
  }

  #page10 .fear-greed-wrapper .value-wrapper,
  #page10 .fear-greed-wrapper .price-change {
    margin-left: 0 !important;
  }

  #page10 .value-wrapper {
    width: 50px;
    height: 50px;
  }

  #page10 .value-wrapper .value {
    font-size: 22px;
  }

  #page10 .historical-data li {
    justify-content: space-between;
  }

  #page10 .highcharts-figure {
    height: 220px;
    margin: 0px;
  }

  #page10 .historical-data .label {
    font-size: 14px;
  }

  #page15 .wealthdistribution-text {
    font-size: 20px;
  }

  #page15 .card {
    justify-content: start !important;
  }

  #page15 #wealth-distribution-container {
    height: auto !important;
    flex: 1 !important;
  }

  #page15 #wealth-distribution-container svg text {
    font-size: 22px !important;
  }

  #page2 .card,
  #page5 .card,
  #page7 .card,
  #page14 .card,
  #page16 .card,
  #page19 .card,
  #page20 .card {
    padding: 10px;
    /* overflow: hidden; */
  }

  #page12 .card {
    padding: 7px;
  }

  #page27 .card {
    padding: 20px 0px 20px 5px;
  }

  #page19 .chart-container,
  #page20 .chart-container {
    position: relative;
  }

  #page21 .thank-you,
  #page21 .satoshi {
    font-size: 30px !important;
  }

  #page23 .monthlyreturns-text {
    font-size: 20px !important;
    margin-top: 10px !important;
  }

  #page23 #current-month-return {
    font-size: 25px !important;
  }

  #page23 #monthlyReturnsContainer {
    overflow: auto !important;
  }

  #page23 #monthlyReturnsCanvas {
    width: 1000px !important;
  }

  /* #page24 .historical-bigmac-prices {
    padding: 0px;
  } */

  #page24 .card {
    height: auto;
  }

  #page24 .bigmac-content-wrapper {
    margin-top: 0px !important;
  }

  #page24 .bigmac-img-wrapper img {
    width: 150px !important;
  }

  body #page24 .price-container {
    font-size: 20px !important;
    margin-bottom: 25px !important;
  }

  #page24 .flashing-dot {
    width: 15px !important;
    height: 15px !important;
  }

  #page24 .flashing-dot {
    margin-right: 10px;
  }
  #page24 .price-change {
    margin-left: 10px;
  }

  #page24 .historical-bigmac-prices,
  .extended-historical-bigmac-prices {
    grid-template-columns: 1fr !important;
  }

  #page24 .extended-historical-bigmac-prices {
    margin-top: 16px !important;
    margin-bottom: 20px;
  }

  #page24 .extended-historical-bigmac-prices .historical-price-card {
    margin-bottom: 0px;
  }

  #page24 .historical-price-card {
    padding: 20px !important;
    height: auto;
  }

  #page24 .historical-bigmac-prices .period-label {
    font-size: 25px;
  }

  #page24 .historical-bigmac-prices .price-value {
    font-size: 28px;
  }

  #page24 .historical-bigmac-prices .change-value {
    font-size: 22px;
  }

  #page24 .bigmac-price-text {
    position: initial !important;
    text-align: center !important;
    transform: none !important;
    font-size: 20px !important;
    margin-top: 0px !important;
    padding-bottom: 30px !important;
  }

  /* PAGE 13 */
  #page13 .globalassets-text {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  #page13 #treemapContainer {
    height: calc(100vh - 180px) !important;
    width: 100% !important;
  }

  /* #page13 .node {
    font-size: 8px !important;
    line-height: 1.1 !important;
  }

  #page13 .node[style*="background: rgb(247, 148, 20)"] {
    font-size: 6px !important;
  }

  #page13 .node[style*="background: rgb(247, 148, 20)"] .bitcoin-content {
    gap: 1px !important;
    padding: 1px !important;
    flex-direction: column !important;
  }

  #page13 .node[style*="background: rgb(247, 148, 20)"] img {
    width: 8px !important;
    height: 8px !important;
    margin-right: 1px !important;
  }

  #page13 .node[style*="background: rgb(247, 148, 20)"] span {
    font-size: 6px !important;
    margin-top: 1px !important;
    writing-mode: sideways-lr !important;
  } */

  #page13 .node {
    overflow: visible !important;
  }

  #page13 .bitcoin-content {
    justify-content: center;
  }

  #page13 .bitcoin-content img {
    width: 12px !important;
    height: 12px !important;
    /* padding-right: 5px; */
  }

  #page13 .bitcoin-content span {
    position: absolute;
    top: -16px;
    left: 6px;
    font-size: 12px !important;
  }

  #page13 .bitcoin-content span::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -5px;
    width: 1px;
    height: 11px;
    background: rgb(196 121 42);
  }

  #page13 .bitcoin-content span::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -3px;
    width: 1px;
    height: 5px;
    background: rgb(196 121 42);
    transform: rotate(90deg);
  }

  #page13 span#Collectibles {
    position: absolute;
    top: -17px;
    left: 36px;
    color: white;
    font-size: 12px !important;
  }

  #page13 span#Collectibles::before {
    content: "";
    position: absolute;
    top: 7px;
    left: -4px;
    width: 1px;
    height: 11px;
    background: rgb(134, 104, 168);
  }

  #page13 span#Collectibles::after {
    content: "";
    position: absolute;
    top: 5px;
    left: -2px;
    width: 1px;
    height: 5px;
    background: rgb(134, 104, 168);
    transform: rotate(90deg);
  }

  #page13 span#Collectibles ~ span {
    font-size: 10px;
    position: absolute;
    top: 12px;
    /* left: -3px; */
  }

  /* Top Bar */
  .logo {
    left: 12px !important;
    width: 115px !important;
    top: 19px !important;
  }

  .header-icons {
    top: 20px !important;
    right: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .live-button {
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .ai-mic-button {
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .dashboard-settings-btn {
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
  }

  .date-time {
    margin: 0 !important;
    font-size: 12px !important;
  }

  #fullscreen-btn {
    width: auto !important;
    height: auto !important;
    position: initial !important;
  }

  /* Bottom Navigation  */

  body .play-pause-container {
    left: 12px !important;
    bottom: 17px !important;
  }

  #play-pause-btn {
    bottom: 0px !important;
    left: 0px !important;
    position: initial !important;
  }

  #footer-text {
    margin-left: 0px !important;
    margin-bottom: 0px !important;
    font-size: 12px !important;
  }

  .page-navigation {
    position: absolute !important;
    right: 12px !important;
    bottom: 17px !important;
  }

  .page-navigation #page-counter {
    margin-bottom: 0px;
    margin-right: 0px;
    font-size: 12px;
  }

  .page-navigation #prev-btn,
  .page-navigation #next-btn {
    bottom: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    position: initial;
    margin-right: 0px;
  }

  #play-pause-btn {
    width: 30px !important;
    height: 30px !important;
  }

  #play-pause-btn::before {
    width: 22px !important;
    height: 22px !important;
  }

  #play-pause-btn i {
    font-size: 14px;
  }

  /* PAGE 3 */

  #page3 .card {
    padding: 10px;
  }

  #page3 .displays {
    padding: 0px;
  }

  #page3 .display.XXL {
    font-size: 28px !important;
    line-height: 30px !important;
    height: 30px !important;
    margin-bottom: 4px !important;
  }

  #page3 .display.XXL .digit {
    height: 30px !important;
    width: 24px !important;
    border-radius: 3px !important;
    margin: 0 0 0 2px !important;
  }

  #page3 .display.XXL .digit:first-child {
    margin: 0 !important;
  }

  #page3 .display.XXL .digit div {
    border-radius: 1px !important;
  }

  #page3 .display.XXL .digit .top {
    clip: rect(0px, auto, 14px, 0px) !important;
  }

  #page3 .display.XXL .digit .bottom {
    clip: rect(15px, auto, 30px, 0px) !important;
  }

  #page3 .activity {
    top: -5px !important;
    left: -35px !important;
    height: 0px !important;
  }

  #page3 .flapper-flashing-dot {
    width: 12px !important;
    height: 12px !important;
    top: 15px !important;
    left: 15px !important;
  }

  /* PAGE 4 */

  #page4 .halving-progress-circle {
    width: 350px !important;
    height: 350px !important;
  }

  #page4 .halving-progress-circle::before {
    width: 280px !important;
    height: 280px !important;
  }

  #page4 .progress-container {
    margin-top: 0px;
  }

  #page4 .marker.vertical {
    height: 10%;
  }

  #page4 .marker.horizontal {
    width: 10%;
  }

  #page4 .marker.marker-25 {
    right: 0px;
    left: auto;
  }

  #page4 .halving-progress-circle .progress-text {
    font-size: 20px;
    padding: 7px;
    top: 85px;
  }

  #page4 .inner-circle {
    margin-top: 30px;
  }

  #page4 .remaining-text {
    font-size: 15px;
    padding-bottom: 10px;
    margin: 0px;
  }

  #page4 .split-flap .digit {
    font-size: 50px;
    width: 1.3ch;
  }

  #page4 .split-flap {
    margin: 0px;
  }

  #page4 .next-halving-text {
    font-size: 15px !important;
    margin-top: 15px;
  }

  #page4 .dynamic-date {
    font-size: 20px !important;
    margin-top: 5px;
  }

  /* PAGE 9 */

  #page9 .card {
    min-height: 100%;
    height: auto;
  }

  #page9 .satsusd-container {
    justify-content: center !important;
    margin-top: 10px;
    max-width: 100% !important;
  }

  #page9 .satsusd-large-square {
    width: 140px !important;
    height: 140px !important;
    grid-template-columns: repeat(10, 14px) !important;
    grid-template-rows: repeat(10, 14px) !important;
    margin: 8px !important;
  }

  #page9 .satsusd-small-square {
    width: 14px !important;
    height: 14px !important;
  }

  #page9 #satsusd-value {
    font-size: 40px;
  }

  #page9 .satsusd-price-change {
    font-size: 25px;
  }

  /* PAGE 11 */
  #page11 .card {
    overflow-x: hidden;
  }

  #page11 .wallet-distribution-text,
  #page36 .wallet-distribution-text,
  #market-sentiment .wallet-distribution-text {
    font-size: 20px;
  }

  #page11 #bitcoin-distribution-table {
    display: block !important;
    width: 100%;
    font-size: 12px;
    overflow: auto;
    margin: 0px;
  }

  #page11 #bitcoin-distribution-table th,
  #page11 #bitcoin-distribution-table td {
    text-wrap: nowrap;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* PAGE 17 */

  #page17 .card {
    min-height: 100%;
    height: auto;
    overflow: hidden;
  }

  #page17::before {
    /* top: 31% !important;
    width: 100% !important;
    height: 36% !important; */
    /* top: 244px !important;
    width: 100% !important;
    height: 283px !important;
    border-radius: 0px !important; */
    display: none !important;
  }

  #page17::after {
    /* transform: translate(122px, -265px) !important;
    width: 38px !important;
    height: 88px !important; */
    display: none !important;
  }

  #page17 .price-container {
    transform: scale(1.1) !important;
    margin-bottom: 20px !important;
  }

  #page17 .historical-house-prices,
  #page17 .extended-historical-house-prices {
    grid-template-columns: 1fr;
  }

  #page17 .extended-historical-house-prices {
    margin-bottom: 20px;
  }

  #page17 .historical-price-card.small {
    margin-bottom: 0px;
  }

  #page17 .historical-price-card {
    height: auto;
  }

  #page17 .historical-house-prices .period-label {
    font-size: 25px !important;
  }

  #page17 .historical-house-prices .price-value {
    font-size: 45px !important;
  }

  #page17 .historical-house-prices .change-value {
    font-size: 22px !important;
  }

  #page17 .house-price-text {
    position: initial !important;
    text-align: center !important;
    font-size: 20px !important;
    transform: none !important;
    padding-bottom: 50px !important;
  }

  /* PAGE 22 */

  #page22 .card {
    height: auto !important;
    padding: 20px !important;
    min-height: 100%;
  }

  #page22 .split-layout {
    flex-direction: column !important;
    padding-top: 0px !important;
  }

  #page22 .nodeversions-text {
    position: initial !important;
    font-size: 20px !important;
    order: 1 !important;
  }

  #page22 .right-panel {
    padding-right: 0px !important;
    order: 2 !important;
  }

  #page22 .left-panel {
    padding-left: 0px !important;
    order: 3 !important;
  }

  #page22 #versionPieChart {
    width: 100% !important;
    height: auto !important;
  }

  /* HIDE FULL SCREEN BUTTON ON MOBILE */

  #fullscreen-btn,
  #play-pause-btn,
  #prev-btn,
  #next-btn {
    display: none;
  }

  /* PAGE 26 */

  #page26 .log-log-model-box {
    bottom: 80px !important;
    right: 50px !important;
  }

  #page26 .log-log-text {
    font-size: 20px !important;
    margin-top: 0px !important;
  }

  #page26 #logLogChart {
    width: 100% !important;
    height: 100% !important;
  }

  /* PAGE 25  */

  #page25 .card {
    min-height: 100%;
    height: auto !important;
    padding: 20px !important;
  }

  #page25 .card .legend-item span {
    text-wrap: nowrap;
  }

  /* PAGE 29 - Bitcoin Historical Performance */
  #page29 .card {
    min-height: 100% !important;
    height: auto !important;
    padding: 20px !important;
    overflow: visible !important;
  }

  #page29 .performance-metrics-row {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
    height: auto !important;
    margin-bottom: 20px !important;
  }

  #page29 .performance-metric-card {
    height: auto !important;
    padding: 15px !important;
  }

  #page29 .performance-metric-value {
    font-size: 24px !important;
  }

  #page29 .performance-metric-header h3 {
    font-size: 14px !important;
  }

  #page29 .performance-main-content {
    flex-direction: column !important;
    gap: 30px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #page29 .performance-chart-section {
    height: 200px !important;
    min-height: 200px !important;
  }

  #page29 .performance-chart-container {
    height: 100% !important;
    min-height: 200px !important;
  }

  #page29 #annualReturnsChart {
    width: 100% !important;
    height: 100% !important;
    max-height: 200px !important;
  }

  #page29 .performance-stats-section {
    height: auto !important;
    overflow: visible !important;
  }

  #page29 .performance-stats-container {
    flex-direction: column !important;
    gap: 20px !important;
    height: auto !important;
    margin-top: 40px !important;
  }

  #page29 .performance-stats-card {
    height: auto !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
  }

  #page29 .performance-stats-title {
    font-size: 16px !important;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
  }

  #page29 .performance-stat-item {
    padding: 8px 0 !important;
  }

  #page29 .performance-stat-period {
    font-size: 14px !important;
  }

  #page29 .performance-stat-value {
    font-size: 16px !important;
  }

  #page29 .performance-section-title {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  /* PAGE 27  */
  #page27 .pricerange-text {
    font-size: 20px !important;
  }

  #page27 .card {
    overflow: hidden;
  }

  #page27 #bdcoChart {
    width: 100% !important;
    height: 95% !important;
    margin: 0px !important;
    max-height: none !important;
  }

  #page28 #googleTrendsChart {
    height: 89% !important;
  }

  body #page28 .price-container {
    font-size: 20px !important;
  }

/* Page 30 */
@media screen and (max-width: 767px) {
  #page30 .stats-container {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 1px !important;
  }
  
  #page30 .stat-card {
    padding: 15px 20px;
    min-width: auto;
    width: 100%;
    max-width: 300px;
  }
  
  #page30 .stat-label {
    font-size: 12px;
  }
  
  #page30 .current-price-card .current-price {
    font-size: 24px;
  }
  
  #page30 .progress-card .progress-percentage {
    font-size: 24px;
  }
  
  #page30 .circle-container {
    width: 350px;
    height: 350px;
    margin: 10px auto;
    overflow: hidden;
    position: relative;
  }
  
  #page30 .dot {
    width: 4px;
    height: 4px;
    margin: 1px;
  }
  
  #page30 .dot.filled {
    box-shadow: 0 0 2px rgba(247, 147, 26, 0.3);
  }
  
  /* Prevent horizontal scroll on mobile for page 30 */
  #page30 {
    overflow-x: hidden;
  }
  
  #page30 .card {
    overflow-x: hidden;
    padding: 15px;
  }
}

/* For very small screens - MUST come after the general mobile rules */
@media screen and (max-width: 480px) {
  #page30 .circle-container {
    width: 320px !important;
    height: 320px !important;
  }
  
  #page30 .dot {
    width: 7px !important;
    height: 7px !important;
  }

  #page30 .stats-container .stat-card {
    padding: 12px 15px !important;
    max-width: 280px !important;
  }
  
  #page30 .current-price-card .current-price,
  #page30 .progress-card .progress-percentage {
    font-size: 20px !important;
  }
}
}

/* AI Indicator removed - using AI border effect only */

/* PAGE 31 - BTCMAP MERCHANTS RESPONSIVE */

/* LANDSCAPE MODE */
@media screen and (max-width: 932px) and (orientation: landscape) {
  #page31 .card {
    overflow: hidden !important;
    position: relative !important;
  }

  #page31 #merchant-map {
    height: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0.65) !important;
    margin-top: 0 !important;
  }

  #page31 .leaflet-bottom.leaflet-left {
    bottom: 70px !important;
  }

  #page31 .merchant-legend {
    padding: 8px 12px !important;
    transform: scale(0.85) !important;
    transform-origin: center bottom !important;
  }

  #page31 .btcmap-logo {
    height: 35px !important;
  }

  #page31 .merchant-legend-total {
    font-size: 13px !important;
  }

  #page31 .merchant-gradient {
    min-width: 200px !important;
    height: 10px !important;
  }

  #page31 .merchant-legend-labels {
    font-size: 10px !important;
  }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #page31 #merchant-map {
    height: calc(100% - 15px) !important;
    margin-top: 15px !important;
  }

  #page31 .merchant-legend {
    padding: 10px 12px !important;
  }

  #page31 .btcmap-logo {
    height: 40px !important;
  }

  #page31 .merchant-legend-total {
    font-size: 14px !important;
  }

  #page31 .merchant-gradient {
    min-width: 220px !important;
  }

  #page31 .merchant-legend-labels {
    font-size: 11px !important;
  }
}

/* SMALLER DESKTOP (1200px - 1400px) */
@media screen and (min-width: 1200px) and (max-width: 1400px) {
  #page31 #merchant-map {
    height: 100% !important;
    width: 100% !important;
  }

  #page31 .merchant-legend {
    padding: 10px 12px !important;
  }

  #page31 .btcmap-logo {
    height: 40px !important;
  }

  #page31 .merchant-legend-total {
    font-size: 14px !important;
  }

  #page31 .merchant-gradient {
    min-width: 220px !important;
  }

  #page31 .merchant-legend-labels {
    font-size: 11px !important;
  }
}

/* MOBILE PORTRAIT */
@media screen and (max-width: 767px) {
  #page31 .card {
    position: relative !important;
    overflow: auto !important;
    overflow-y: hidden !important;
  }

  #page31 #merchant-map {
    margin-top: 0px !important;
    max-height: none !important;
    width: 1750px !important;
    height: 100% !important;
  }

  #page31 #merchant-map .leaflet-map-pane {
    left: 350px !important;
  }

  #page31 .leaflet-tooltip {
    margin-left: -350px !important;
  }

  #page31 .leaflet-bottom.leaflet-left {
    position: fixed !important;
    bottom: 80px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
  }

  #page31 .merchant-legend {
    background-color: rgba(0, 0, 0, 0.7) !important;
    padding: 12px 15px !important;
    border-radius: 5px !important;
    border: none !important;
  }

  #page31 .merchant-legend-inner {
    gap: 12px !important;
  }

  #page31 .btcmap-logo {
    height: 45px !important;
  }

  #page31 .merchant-legend-content {
    min-width: 200px !important;
  }

  #page31 .merchant-legend-total {
    font-size: 14px !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
  }

  #page31 .merchant-gradient {
    min-width: 200px !important;
    height: 12px !important;
  }

  #page31 .merchant-legend-labels {
    font-size: 12px !important;
    margin-top: 5px !important;
  }
}

/* ===== Dashboard Settings Modal Responsive ===== */

@media screen and (max-width: 767px) {
  .ds-modal {
    width: 96% !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
  }

  .ds-header {
    padding: 16px 16px 12px !important;
  }

  .ds-title {
    font-size: 16px !important;
  }

  .ds-body {
    padding: 12px 16px !important;
  }

  .ds-category-header {
    padding: 12px !important;
  }

  .ds-chips-area.expanded {
    padding: 0 12px 12px !important;
  }

  .ds-chip {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }

  .ds-footer {
    padding: 12px 16px 16px !important;
  }

}

@media screen and (max-width: 480px) {
  .ds-chips-grid {
    gap: 6px !important;
  }

  .ds-chip {
    padding: 4px 8px !important;
    font-size: 10px !important;
  }
}

/* =====================================================================
   TECHNICAL INDICATORS — Responsive
   ===================================================================== */

@media screen and (max-width: 1024px) {
  .tech-gauges {
    gap: 2px;
    padding: 4px 4px 0;
  }

  .tech-gc {
    max-width: 140px;
  }

  .tech-gs {
    font-size: 11px;
  }

  .tech-gcs {
    gap: 10px;
  }

  .tech-v {
    font-size: 12px;
  }

  .tech-l {
    font-size: 9px;
  }

  .tech-gt {
    font-size: 9px;
  }

  .visual-tab {
    font-size: 12px;
    padding: 8px 12px;
  }
}

@media screen and (max-width: 768px) {
  .visual-tab {
    font-size: 11px;
    padding: 7px 10px;
  }

  .tech-gauges {
    flex-direction: row;
    gap: 0;
    padding: 4px 2px 0;
  }

  .tech-gw-mid {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    padding: 0 2px;
  }

  .tech-gc {
    max-width: 110px;
  }

  .tech-gs {
    font-size: 10px;
  }

  .tech-gcs {
    gap: 6px;
  }

  .tech-v {
    font-size: 11px;
  }

  .tech-l {
    font-size: 8px;
  }

  .tech-gt {
    font-size: 8px;
  }

  .tech-full-view-link {
    font-size: 11px;
    padding: 6px 0;
  }

  /* Full View Modal */
  .tech-overlay {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tech-overlay::-webkit-scrollbar {
    display: none;
  }

  .tech-modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 98%;
    max-height: none;
    border-radius: 12px;
    margin: 20px auto;
  }

  .tech-modal-body {
    padding: 16px;
    overflow: visible;
  }

  .tech-fv-gauges {
    gap: 4px;
    margin-bottom: 20px;
  }

  .tech-fv-gw {
    padding: 0 6px;
  }

  .tech-fv-gw:nth-child(2) {
    padding: 0 12px;
  }

  .tech-fv-gc {
    width: 160px;
    height: 100px;
  }

  .tech-fv-tables {
    flex-direction: column;
    gap: 20px;
  }

  .tech-fv-section {
    min-width: unset;
    width: 100%;
    border-radius: 12px;
  }

  .tech-rw {
    font-size: 11px;
  }
}

@media screen and (max-width: 480px) {
  .tech-fv-gc {
    width: 120px;
    height: 75px;
  }

  .tech-fv-gw:nth-child(2) {
    padding: 0 8px;
  }
}