/* =====================================================
   PAGE 1 MODERNIZED - RESPONSIVE ADDITIONS
   Add this to your responsive.css
   ===================================================== */

/* LANDSCAPE MODE FOR MOBILE DEVICES */
@media screen and (max-width: 932px) and (orientation: landscape) {
  /* Page 1 Modern Elements */
  #page1 .card h2 {
    font-size: 28px !important;
  }
  
  #page1 .card p {
    font-size: 12px !important;
  }
  
  /* Move BTC/USD text up on mobile landscape to create space from sparkline */
  #page1 #dashboard .card:first-child p {
    margin-bottom: 15px !important;
  }
  
  #page1 .price-change-badge {
    padding: 2px 6px !important;
    font-size: 9px !important;
    top: -8px !important;
    right: -45px !important;
  }
  
  #page1 .sparkline-container {
    height: 25px !important;
    bottom: 8px !important;
    left: 0 !important;
    right: 0 !important;
    right: 10px !important;
  }
  
  #page1 .sats-visual {
    display: none !important;
  }
  
  #page1 .mini-chart {
    height: 20px !important;
    bottom: 8px !important;
    left: 10px !important;
    right: 10px !important;
  }
  
  #page1 .supply-bar {
    height: 4px !important;
    top: 15px !important;
    left: 15px !important;
    right: 15px !important;
  }
  
  #page1 .difficulty-card .adjustments {
    margin-top: -10px !important;
  }
}

/* TABLET */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #page1 .card h2 {
    font-size: 3.5rem !important;
  }
  
  #page1 .card p {
    font-size: 18px !important;
  }
  
  #page1 .price-change-badge {
    padding: 4px 8px !important;
    font-size: 0.75rem !important;
    top: -8px !important;
    right: -50px !important;
  }
  
  #page1 .sparkline-container {
    height: 35px !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  #page1 .sats-visual {
    right: 15px !important;
  }
  
  #page1 .sat-dot {
    width: 4px !important;
    height: 4px !important;
  }
  
  #page1 .sats-row {
    gap: 3px !important;
  }
  
  #page1 .mini-chart {
    height: 30px !important;
  }
  
  #page1 .supply-bar {
    top: 20px !important;
  }
  
  #page1 .difficulty-card .adjustments {
    margin-top: -12px !important;
  }
}

/* MOBILE PORTRAIT - FIXED LAYOUT WITH TALLER CARDS */
@media screen and (max-width: 767px) {
  /* Force single column layout on mobile with taller cards */
  #page1 #dashboard {
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(9, minmax(180px, 1fr)) !important;
    gap: 10px !important;
  }
  
  #page1 #dashboard .card,
  #page1 #dashboard .difficulty-card {
    min-height: 180px !important;
    padding: 20px !important;
  }
  
  #page1 .card h2 {
    font-size: 3.2rem !important;
  }
  
  #page1 .card p {
    font-size: 16px !important;
  }
  
  /* Move BTC/USD text up on mobile to create space from sparkline */
  #page1 #dashboard .card:first-child p {
    margin-bottom: 20px !important;
  }
  
  #page1 .price-change-badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
    top: -25px !important;
    right: -50px !important;
  }
  
  #page1 .sparkline-container {
    height: 35px !important;
    bottom: 15px !important;
    left: 0 !important;
    right: 0 !important;
    right: 20px !important;
    opacity: 0.5 !important;
  }
  
  #page1 .sats-visual {
    right: 35px !important;
    opacity: 0.3 !important;
  }
  
  #page1 .sat-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  #page1 .sats-row {
    gap: 3px !important;
  }
  
  #page1 .mini-chart {
    height: 30px !important;
    bottom: 15px !important;
    left: 15px !important;
    right: 15px !important;
    opacity: 0.4 !important;
  }
  
  #page1 .supply-bar {
    height: 5px !important;
    top: 20px !important;
    left: 25px !important;
    right: 25px !important;
  }
  
  /* Disable hover effects on mobile */
  #page1 .card:hover,
  #page1 .difficulty-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  /* Disable animations on mobile for performance */
  #page1 #dashboard .card,
  #page1 #dashboard .difficulty-card {
    animation: none !important;
  }
  
  /* Difficulty card adjustments for mobile */
  #page1 .difficulty-card .adjustments {
    margin-left: 0 !important;
    margin-top: -20px !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 20px !important;
  }
  
  #page1 .difficulty-card .progress-bar {
    width: 80px !important;
    height: 80px !important;
    margin-right: 0 !important;
  }
  
  #page1 .difficulty-card .progress-bar::before {
    width: 60px !important;
    height: 60px !important;
  }
  
  #page1 .difficulty-card h1 {
    font-size: 18px !important;
    margin-top: 12px !important;
  }
  
  #page1 .difficulty-card .remaining-blocks {
    font-size: 12px !important;
  }
}

/* 2K MONITORS (2560 x 1440) */
@media screen and (min-width: 2000px) and (max-width: 2600px) {
  #page1 .card h2 {
    font-size: 6.5rem !important;
  }
  
  #page1 .card p {
    font-size: 32px !important;
  }
  
  #page1 .price-change-badge {
    padding: 6px 14px !important;
    font-size: 1rem !important;
    top: -12px !important;
    right: -90px !important;
  }
  
  #page1 .sparkline-container {
    height: 55px !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  #page1 .sats-visual {
    right: 40px !important;
  }
  
  #page1 .sat-dot {
    width: 15px !important;
    height: 15px !important;
  }
  
  #page1 .sats-row {
    gap: 5px !important;
  }
  
  #page1 .mini-chart {
    height: 50px !important;
    bottom: 20px !important;
  }
  
  #page1 .supply-bar {
    height: 8px !important;
    top: 30px !important;
  }
  
  #page1 .difficulty-card .adjustments {
    margin-top: 0px !important;
  }
  
  #page1 .difficulty-card .remaining-blocks {
    font-size: 18px !important;
  }
  
  #page1 .difficulty-card h1 {
    font-size: 32px !important;
  }
  
  #page1 .price-change-badge {
    right: -137px !important;
    padding: 10px 20px !important;
    font-size: 1.3rem !important;
    top: -30px !important;
  }
}

/* 4K MONITORS */
@media screen and (min-width: 3000px) {
  #page1 .card h2 {
    font-size: 8rem !important;
  }
  
  #page1 .card p {
    font-size: 38px !important;
  }
  
  #page1 .price-change-badge {
    padding: 8px 18px !important;
    font-size: 1.2rem !important;
    top: -25px !important;
    right: -100px !important;
  }
  
  #page1 .sparkline-container {
    height: 70px !important;
    bottom: 25px !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  #page1 .sats-visual {
    right: 20px !important;
  }
  
  #page1 .sat-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  #page1 .sats-row {
    gap: 6px !important;
  }
  
  #page1 .mini-chart {
    height: 65px !important;
    bottom: 25px !important;
  }
  
  #page1 .supply-bar {
    height: 10px !important;
    top: 35px !important;
  }
  
  #page1 .difficulty-card .adjustments {
    margin-top: -25px !important;
  }
  
  #page1 .difficulty-card .remaining-blocks {
    font-size: 22px !important;
  }
}

/* Ultrawide monitors (3440x1440) and 4K */
@media screen and (min-width: 3000px) {
  #page1 .sat-dot {
    width: 8px !important;
    height: 8px !important;
  }
  
  #page1 .sats-row {
    gap: 8px !important;
  }
  
  #page1 .sats-visual {
    right: 20px !important;
  }
}