/* 1. The Container (The "Window" on your site) */
.simulation-wrapper {
    position: relative; /* Essential for the stretching below */
    width: 100%;        /* Takes up full width of the parent column */
    max-width: 1000px;  /* Limits how big it can get */
    height: 583px;      /* Set this to the exact height you want */
    
    margin: 20px auto; 
    background: #000;
    border: 1px solid #444;
    overflow: hidden;
}

/* 2. The Iframe (The "Portal") */
.game-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;  /* !important ensures it ignores defaults */
    height: 100% !important;
    border: none;
}

.container {
  text-align: center;
  font-family: Arial, sans-serif;
  max-width: auto;
  line-height: 1.6;
}

/* Standard hidden state */
.hidden {
  display: none;
}

/* Styling the clickable text */
.trigger-text {
  color: rgb(0, 102, 255);
  text-decoration: underline;
  cursor: pointer;
  font-weight: bold;
}

.trigger-text:hover {
  color: darkblue;
}

/* The Workaround: Updated for Mobile Responsiveness */
.bib-list {
  text-align: left;
  display: block;           /* Changed from inline-block to block for better fluid width */
  width: 100%;              /* Ensure it spans the container */
  max-width: 100%;          /* Prevents it from ever exceeding the screen width */
  margin: 20px 0;
  box-sizing: border-box;   /* Crucial: ensures padding doesn't push it off-screen */
  
  /* The secret sauce: Forces long URLs to break and wrap to the next line */
  overflow-wrap: break-word; 
  word-wrap: break-word;
  word-break: break-word;
}

/* Updated formatting for the numbered items */
.bib-list p {
  margin-bottom: 12px;
  padding-left: 50px;       /* Increased slightly for better mobile clearance */
  text-indent: -30px;       /* Matches padding to keep numbers aligned */
  line-height: 1.5;
  font-size: 14px;          /* Slightly smaller font is often better for long citations on mobile */
}

/* Keep your buttons centered */
.toggle-link {
  display: block;          /* Makes them take their own line */
  margin: 10px auto;       /* Centers them horizontally */
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}