/* no-mobile.css – load this on every page via <link> or @import */

/* 1. Target phones (adjust max-width as you like) */
@media (max-width:767px), (max-height:599px) {
  body { background:none !important; }      /* stop huge download */
  .button{display:none!important;}
  .case-container {display:none!important;}
  .case-container2 {display:none!important;}
  .page-header {display:none!important;}
  .container {display:none!important;}
  .start-button {display:none!important;}
  .sidebar {display:none!important;}
  .section-divider{display: none !important;}
  .section-title {display: none !important;}
}


  /* 3. Prevent scrolling */
  html, body {
    height: 100%;
    scrollbar-gutter: stable;
    
  }

  /* 4. Show a full-screen message */
  body::before {
    content: "📵 Mobile/Tablet version not available";
    white-space: pre-wrap;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    color: #333;
    text-align: center;
    padding: 1em 2em;
    background: rgba(255,255,255,0.9);
    border: 2px solid #666;
    border-radius: 8px;
    z-index: 9999;
  }