/* RESET & BASE STYLES */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: sans-serif;
            background-color: #f8f9fa;
            color: #333;
            text-align: center;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .logo { max-width: 200px; height: auto; margin-bottom: 20px; }

        /* THE POPUP MODAL */
        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95);
            display: flex; justify-content: center; align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        }

        input[type="number"] {
            padding: 10px;
            font-size: 1.2rem;
            width: 120px;
            border: 2px solid #ccc;
            border-radius: 5px;
            margin: 20px auto;
            display: block;
        }

        button {
            padding: 10px 20px;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 5px;
            border: none;
            background: #444;
            color: white;
            transition: 0.2s;
        }

        button:hover { background: #000; }

        footer  { font-size:9pt; color:#808080; }

        /* CONTENT VISIBILITY LOGIC */
        .after-dark-content { display: none; color: #d9534f; font-weight: bold; }
        
        /* This magic class shows/hides content when toggled */
        body.after-dark-active .g-rated { display: none; }
        body.after-dark-active .after-dark-content { display: block; }

        #main-site { padding: 20px; }
        .reset-btn { margin-top: 50px; background: transparent; color: #999; font-size: 0.8rem; }

/* make stripes fixed to viewport edges */
.left-stripes, .right-stripes {
  position: fixed;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  z-index: 999; /* behind content if needed; adjust */
  pointer-events: none; /* allow clicking through */
}

/* left group fixed to left edge */
.left-stripes { left: 0; }

/* right group fixed to right edge */
.right-stripes { right: 0; }

/* each stripe is 33px wide and full viewport height */
.left-stripes .stripe,
.right-stripes .stripe {
  width: 33px;
  height: 100vh;
  display: block;
}

/* ensure main content isn't under the fixed stripes */
.page-frame {
  display: block; /* or keep grid but ensure center content has side padding */
}

/* give center content horizontal padding equal to stripe groups (99px each side) */
.center-content {
  padding: 20px;
  margin: 0 auto;
  max-width: 1100px;
  box-sizing: border-box;
  padding-left: calc(99px + 20px);   /* left stripes + extra */
  padding-right: calc(99px + 20px);  /* right stripes + extra */
}

/* responsive: reduce fixed stripe width on small screens */
@media (max-width: 700px) {
  .left-stripes .stripe, .right-stripes .stripe { width: 16px; height: 100vh; }
  .center-content { padding-left: calc(48px + 12px); padding-right: calc(48px + 12px); }
}