:root{
  --bg: #01100a;
  --green: #33ff55;
  --green-dim: #1c9c37;
  --cyan: #4dfaff;
  --amber: #ffb000;
  --red: #ff4444;
  --white: #d8ffe0;
  --font: "Consolas", "Lucida Console", "Courier New", monospace;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0; height:100%;
  background: var(--bg);
  color: var(--green);
  font-family: var(--font);
  overflow: hidden;
}

body{
  position:relative;
}

/* CRT scanline overlay (sits behind screen content so corner UI stays legible) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.25) 2px
  );
  z-index: 1;
}
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  box-shadow: inset 0 0 90px rgba(0,0,0,0.45);
  z-index: 1;
}

.screen{
  display:none;
  position:absolute; inset:0;
  align-items:center; justify-content:center;
  z-index: 2;
  padding: 24px;
}
.screen.active{ display:flex; }

.wrap{
  width:100%;
  max-width: 900px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
}
.wrap.center{ text-align:center; }

/* ASCII BOX (pre) */
.ascii-box{
  font-family: var(--font);
  white-space: pre;
  margin: 0;
  line-height: 1.15;
  color: var(--green);
  text-shadow: 0 0 6px currentColor;
}
.ascii-box.small{ font-size: 14px; }
.ascii-box.big{ font-size: clamp(20px, 3.4vw, 34px); }
.ascii-box.cyan{ color: var(--cyan); }
.ascii-box.amber{ color: var(--amber); }
.ascii-box.red{ color: var(--red); }
.ascii-box.green{ color: var(--green); }

.subtitle, .game-subtitle{
  letter-spacing: 2px;
  color: var(--cyan);
  font-size: 13px;
  text-align:center;
}

.panel{
  width:100%;
  border: 2px double var(--green-dim);
  padding: 18px 20px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.field label{
  display:block;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--amber);
  margin-bottom: 6px;
}

input[type="text"], input[type="tel"], input[type="password"]{
  width:100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--green-dim);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  padding: 6px 4px;
  outline: none;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus{
  border-bottom-color: var(--cyan);
}

#participants-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom: 8px;
}
.participant-row{
  display:flex;
  gap:8px;
  align-items:center;
}
.participant-row .participant-input{ flex:1; }
.participant-row .participant-turma-input{ flex: 0 0 100px; text-align:center; }

button{
  font-family: var(--font);
  cursor: pointer;
  background: transparent;
  color: var(--green);
  border: 2px solid var(--green-dim);
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 1px;
}
button:hover:not(:disabled){
  background: var(--green);
  color: #001a06;
}
button:disabled{
  opacity: 0.4;
  cursor: default;
}
.btn-primary{
  border-color: var(--cyan);
  color: var(--cyan);
  font-size: 16px;
  padding: 12px 32px;
}
.btn-primary:hover:not(:disabled){
  background: var(--cyan);
  color: #001a1a;
}
.btn-secondary.danger{
  border-color: var(--red);
  color: var(--red);
}
.btn-secondary.danger:hover{
  background: var(--red);
  color: #1a0000;
}
.btn-remove-participant{
  border-color: var(--red);
  color: var(--red);
  padding: 6px 10px;
}

.footer-hint{
  font-size: 11px;
  color: var(--green-dim);
  letter-spacing: 1px;
}

/* TIMER */
#timer-box{
  position: fixed;
  top: 16px; right: 16px;
  z-index: 50;
  padding: 6px 12px;
}
#timer-box.warn{
  color: var(--red);
  animation: blink 1s steps(1) infinite;
}

/* PLANTS */
#plants{
  width:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.plant-card{
  border: 2px double var(--green-dim);
  padding: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  text-align:center;
}
.plant-title{
  color: var(--cyan);
  letter-spacing: 2px;
  font-size: 14px;
}
.plant-led{
  font-size: 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.led{ font-size: 20px; }
.led.on{ color: var(--green); text-shadow: 0 0 10px var(--green); animation: blink 1.4s steps(1) infinite; }
.led.off{ color: #555; }
.plant-buttons{
  display:flex; gap:10px;
}

/* TOAST */
.toast{
  position: fixed;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 22px;
  border: 2px double var(--green);
  background: #001a06;
  color: var(--green);
  font-size: 13px;
  letter-spacing: 1px;
  max-width: 90vw;
  text-align:center;
  opacity: 0;
  pointer-events:none;
  transition: opacity .2s;
}
.toast.show{ opacity: 1; }
.toast.error{ border-color: var(--red); color: var(--red); background:#1a0000; font-weight:bold; text-transform:uppercase; }
.toast.success{ border-color: var(--green); color: var(--green); }
.toast.warning{ border-color: var(--amber); color: var(--amber); }
.toast.info{ border-color: var(--cyan); color: var(--cyan); }

/* MODAL */
.overlay{
  position: fixed; inset:0;
  background: rgba(0,10,4,0.88);
  display:flex; align-items:center; justify-content:center;
  z-index: 500;
}
.overlay.hidden{ display:none; }
.modal-box{
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y:auto;
  border: 3px double var(--cyan);
  background: #001008;
  padding: 22px 24px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.admin-box{ width:min(720px, 94vw); }

.warning-text{
  color: var(--amber);
  font-size: 13px;
  line-height: 1.5;
}

.color-squares{
  display:flex; gap:10px;
}
.color-squares .sq{
  width: 26px; height:26px;
  display:inline-block;
  border: 1px solid #000;
}

.pw-row{
  display:flex; align-items:center; gap:10px;
}
.pw-row label{ color: var(--amber); font-size:13px; white-space:nowrap; }
.pw-row input{ font-size: 20px; letter-spacing: 4px; text-align:center; }

.pw-status{
  min-height: 22px;
  font-size: 13px;
  letter-spacing: 1px;
}
.pw-status.ok{ color: var(--green); }
.pw-status.err{ color: var(--red); font-weight:bold; text-transform:uppercase; }
.pw-status.testing{ color: var(--cyan); }

.modal-actions{
  display:flex; gap:10px; flex-wrap:wrap;
}

.choice-buttons{
  display:flex; flex-direction:column; gap:10px;
}
.choice-btn{
  text-align:left;
  width:100%;
}
.choice-btn.done{
  color: var(--green-dim);
  border-color: var(--green-dim);
}

.checklist{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  font-size: 14px;
}
.checklist .chk{ color: var(--amber); margin-right:6px; }

.victory-detail{
  font-size: 14px;
  line-height: 1.8;
  text-align:center;
}

.timeout-hint{
  color: var(--red);
  letter-spacing: 2px;
  font-size: 14px;
}

.admin-content{
  max-height: 50vh;
  overflow-y:auto;
  font-size: 12px;
}
.admin-content table{
  width:100%;
  border-collapse: collapse;
}
.admin-content th, .admin-content td{
  border: 1px solid var(--green-dim);
  padding: 5px 8px;
  text-align:left;
}
.admin-content th{ color: var(--cyan); }

@keyframes blink{
  50%{ opacity: 0.25; }
}
.blink{ animation: blink 0.9s steps(1) infinite; }

@media (max-width: 640px){
  #plants{ grid-template-columns: 1fr; }
}