:root{
  --bg:#050000;
  --red:#ff2b2b;
  --red2:#ff5c5c;
  --green:#00ff88;
  --text: rgba(255,215,215,.92);
  --muted: rgba(255,215,215,.65);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 16px;
  --shadow: rgba(0,0,0,.75);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:
    radial-gradient(900px 520px at 50% 55%, rgba(255,43,43,.08), transparent 65%),
    var(--bg);
  color:var(--text);
  font-family:var(--mono);
  overflow:hidden;
}

/* Fullscreen canvas (ASCII reveal) */
#asciiBg{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:block;
  opacity:1;
}

/* Grid + scanlines (inspired by your green page .fx) */
.bg-fx{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.18)),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,43,43,0.05) 3px,
      rgba(255,255,255,0) 6px
    ),
    linear-gradient(90deg, rgba(255,43,43,0.10) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(255,43,43,0.10) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 42px 42px, 42px 42px;
  opacity: 0.55;
  filter: contrast(1.05) saturate(1.05);
  mix-blend-mode: screen;
}

/* Subtle noise */
body::before{
  content:"";
  position:fixed;
  inset:-30%;
  z-index:3;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,0) 2px,
      rgba(255,255,255,.05) 3px,
      rgba(255,255,255,0) 6px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,0) 3px,
      rgba(255,255,255,.04) 4px,
      rgba(255,255,255,0) 8px
    );
  opacity:.22;
  mix-blend-mode: overlay;
  animation: noiseMove 140ms steps(2,end) infinite;
}

@keyframes noiseMove{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(-1.2%,.6%); }
  50%{ transform: translate(.8%,-1%); }
  75%{ transform: translate(-.5%,.9%); }
  100%{ transform: translate(0,0); }
}

/* Layout container */
.stage{
  position:relative;
  z-index:10;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  animation: powerOn 1500ms ease-out both;
}

@keyframes powerOn{
  0%{ filter: brightness(0) contrast(1.3); }
  35%{ filter: brightness(.06) contrast(1.35); }
  100%{ filter: brightness(1) contrast(1.08); }
}

/* Terminal box */
.terminal{
  width: min(900px, 92vw);
  height: min(620px, 78vh);
  border-radius: var(--radius);
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,43,43,.22);
  box-shadow: 0 24px 90px var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Header bar */
.tbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,43,43,.18);
  background: linear-gradient(180deg, rgba(255,43,43,.10), rgba(0,0,0,.20));
}

.tleft{ display:flex; gap:10px; align-items:center; }
.dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 14px rgba(255,43,43,.35); }
.d1{ background: rgba(255,95,95,.95); }
.d2{ background: rgba(255,43,43,.85); }
.d3{ background: rgba(255,160,160,.55); }

.title{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

.badge{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red2);
  text-shadow:0 0 14px rgba(255,43,43,.35);
}

/* Screen (logs) */
.screen{
  flex:1;
  padding:14px;
  overflow:hidden;     /* important: avoid weird gaps */
  display:flex;        /* makes .lines fill exactly */
}

.lines{
  flex:1;
  overflow-y:auto;     /* allow user to scroll up */
  padding-right:6px;
  font-size:13px;
  line-height:1.55;
}

.line{
  white-space:pre-wrap;
  animation: fadeIn .12s linear;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(1px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Scrollbar (WebKit) */
.lines::-webkit-scrollbar{
  width:6px;
}
.lines::-webkit-scrollbar-thumb{
  background: rgba(255,43,43,.35);
  border-radius:6px;
}
.lines::-webkit-scrollbar-track{
  background: transparent;
}

/* Progress footer */
.footer{
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-top:1px solid rgba(255,43,43,.18);
  background: linear-gradient(0deg, rgba(255,43,43,.08), rgba(0,0,0,.20));
}

.meta{ font-size:12px; color:var(--muted); }

.pwrap{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,43,43,.2);
  overflow:hidden;
  background: rgba(0,0,0,.25);
}

.pbar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(255,43,43,.35), rgba(255,92,92,.80));
  box-shadow: 0 0 22px rgba(255,43,43,.22);
  transition: width 80ms linear;
}

.pct{
  width:54px;
  text-align:right;
  font-size:12px;
  color:var(--muted);
}

/* Access button area */
.gate{
  padding: 14px;
  border-top: 1px solid rgba(255,43,43,.12);
  background: linear-gradient(0deg, rgba(255,43,43,.06), rgba(0,0,0,.18));
  display:flex;
  justify-content:center;
}

.access-btn{
  width: min(520px, 100%);
  height: 44px;
  border-radius: 12px;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(255,43,43,.35);
  background: rgba(0,0,0,.35);
  color: rgba(255,215,215,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}

.access-btn.denied{
  border-color: rgba(255,43,43,.55);
  color: rgba(255,92,92,.92);
  text-shadow: 0 0 14px rgba(255,43,43,.25);
}
.access-btn.denied:hover{
  cursor: not-allowed;
  filter: brightness(1.05);
}

.access-btn.granted{
  border-color: rgba(0,255,120,.55);
  color: rgba(190,255,220,.95);
  background: rgba(0,255,120,.06);
  text-shadow: 0 0 14px rgba(0,255,120,.22);
}
.access-btn.granted:hover{
  cursor: pointer;
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.access-btn:disabled{ opacity: 1; }


/* === Responsive (mobile) : ajustements sans changer le design === */
img, canvas, svg, video { max-width: 100%; height: auto; }

@supports (height: 100dvh){
  body{ height: 100dvh; }
  .stage{ height: 100dvh; }
  .terminal{ height: min(860px, 100dvh); }
}

@media (max-width: 560px){
  .stage{ padding: 12px; }
  .terminal{ width: 100%; height: 100%; }

  .tbar{ flex-wrap: wrap; gap: 8px; }
  .title{
    flex: 1 1 100%;
    text-align: center;
    font-size: 11px;
    letter-spacing: .14em;
  }
  .screen{ padding: 12px; }
}