*{
    box-sizing:border-box;
}

body{

    margin:0;
    background:#0a0a0a;
    overflow:hidden;

}

/* Layout */

html, body {
  height: 100%;
  font-family: 'Courier New', monospace;
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 20px;
  background:#0d1b5d;
  color:#ffff00;
  border-bottom:2px solid rgba(255,0,147,0.3);
}

.topbar .title{font-weight:700}

.container{
  display:grid;
  grid-template-columns: 280px 1fr 260px;
  gap:14px;
  padding:18px;
  height: calc(100vh - 64px);
  background: linear-gradient(180deg,#0d1b5d 0%, #0f2370 60%);
}

.panel{
  background: linear-gradient(180deg,#0d1b5d 0%, #1a2d7d 100%);
  border:1px solid rgba(255,20,147,0.3);
  padding:12px;
  border-radius:8px;
  color:#ffff00;
}

.left-panel .panel label{display:block;margin-top:8px;font-size:13px}
.left-panel select, .left-panel input[type=number]{width:100%;padding:6px;margin-top:6px;border-radius:4px;border:1px solid #ff1493;background:#1a2d7d;color:#ffff00}
.checkboxes label{display:block;margin-top:8px;font-size:13px}
.big{padding:12px 16px;margin-top:12px;width:100%}

.center-panel{display:flex;align-items:flex-start}
.progress-area{width:100%}
.bar-row{margin-bottom:12px}
.bar-label{font-size:13px;color:#ffff00;margin-bottom:6px}
.bar{height:18px;background:rgba(255,255,255,0.03);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#00ff00,#00cc00);box-shadow:0 0 12px rgba(0,255,0,0.3)}

.lab-symbol{text-align:center;font-size:72px;margin-top:20px;opacity:0.6;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:0.6}50%{opacity:1}}

.center-panel .notifications{margin-top:20px;max-height:120px;overflow-y:auto}

.right-panel .notifications{display:none}
.notification{background:#1a2d7d;color:#ffff00;padding:8px;border-radius:6px;margin-bottom:8px;box-shadow:0 4px 12px rgba(255,20,147,0.3);font-size:12px}

.right-panel{display:flex;flex-direction:column;height:100%}

.log{margin-top:0;flex:1;display:flex;flex-direction:column}
.log-title{font-size:13px;color:#ffff00;margin-bottom:8px}
.log-body{background:#0a1642;padding:8px;border-radius:6px;flex:1;overflow:auto;color:#ffff00}
.log-line{margin-bottom:6px;font-size:13px}

/* Modals */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.5);z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#0d1b5d;padding:18px;border-radius:8px;color:#ffff00;width:360px;border:1px solid rgba(255,20,147,0.4)}
.modal-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

/* small helpers */
.mini-status{margin-top:12px;color:#ffff00}
.settings-short{margin-top:12px}

@media(max-width:900px){
  .container{grid-template-columns:1fr;grid-auto-rows:auto;padding:8px}
  .right-panel{order:3}
}

/* Intro / start screen styles */
.start-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg,#0d1b5d, #1a2d7d);
  color:#ffff00;
  z-index:6;
}
.start-overlay h1{font-size:48px;margin:0}
.start-overlay h2{margin:6px 0 12px 0}
.start-overlay p{opacity:0.8}

/* Monitor / screen (restore original small display) */
#room{
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}


#monitor{
  width:920px; /* increased to fit GUI */
  height:680px;
  background:#d8d8d8;
  border-radius:28px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: inset 12px 12px 0 #f5f5f5, inset -12px -12px 0 #b0b0b0, 0 40px 80px rgba(0,0,0,.7);
}

.side-copy{
  position:absolute;
  left:2.5%;
  top:18%;
  max-width:220px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#ffff00;
  font-family:'Courier New', monospace;
  z-index:10;
}

.microcopy-cta{
  font-size:16px;
  line-height:1.4;
  font-family:'Courier New', monospace;
  color:#ffffff;
  margin:0;
}

.microcopy-note{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,0.78);
  margin:0;
}

.microcopy-contact{
  font-size:14px;
  line-height:1.5;
  color:#ffffff;
  margin:8px 0 0;
}

.microcopy-contact strong{
  font-weight:700;
}


#screen{
  width:820px; /* larger screen */
  height:520px;
  background: #0d1b5d; /* azul rey oscuro */
  border-radius:18px;
  color:#ffff00;
  position:relative;
  overflow:hidden;
  padding:14px;
  box-shadow: inset 0 0 30px rgba(0,255,0,.1);
}

/* ensure container fits inside the screen */
.container{height:100%;overflow:auto}

/* monitor base */
#monitor::after{
  content:"";
  position:absolute;
  bottom:-40px;
  left:50%;
  transform:translateX(-50%);
  width:360px;
  height:48px;
  background:linear-gradient(180deg,#cfcfcf,#bdbdbd);
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

/* adjust topbar/font sizes to fit */
.topbar{padding:8px 12px}
.topbar .title{font-size:14px}
.start-overlay h1{font-size:32px}
.start-overlay h2{font-size:16px}

/* settings panel with multiple buttons */
.settings-short{display:flex;flex-direction:column;gap:8px}
.settings-short button{width:100%}

/* panel buttons (top right) */
.panel-buttons{display:flex;gap:8px;margin-bottom:12px}
.panel-buttons button{flex:1;padding:8px 4px !important;font-size:11px}

/* Button styling override */
.nes-btn.is-primary {
  background-color: #ff1493 !important;
  border-color: #ff1493 !important;
  color: #000 !important;
}

.nes-btn.is-primary:hover {
  background-color: #ff69b4 !important;
  border-color: #ff69b4 !important;
}

.nes-btn {
  background-color: #1a2d7d !important;
  border-color: #ff1493 !important;
  color: #ffff00 !important;
}

.nes-btn:hover {
  background-color: #2a3d9d !important;
}