/* ============================================================
   css/deindex.css -- de-index sequence styling
   ============================================================
   Red/amber emergency palette over the boot black. Mono terminal feel,
   self-contained .di-* / #screen-deindex so it can't disturb other modules.
   alin styles.css:n jalkeen
   ============================================================ */
#screen-deindex {
  position: fixed;
  inset: 0;
  z-index: 9000;            /* above everything -- this takes over the app */
  background: #050505;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 24px 18px;
  font-family: 'Courier New', monospace;
  overflow: hidden;
}

/* subtle red scanline vignette for dread */
#screen-deindex::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(120, 0, 0, 0.22) 100%);
  pointer-events: none;
  z-index: 0;
}

.deindex-output {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
  max-height: 72vh;
  overflow-y: auto;
  /* Fluid base size: readable floor on phones, comfortable on tablets/TV.
     Was a flat 15px (13px on phones) -- too small + low contrast to read. */
  font-size: clamp(15px, 4.4vw, 19px);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: none;
}
.deindex-output::-webkit-scrollbar { display: none; }

.di-line {
  color: #b0b0b0;                /* was #888 -- lifted for legibility */
  letter-spacing: 0.3px;
  animation: di-flicker-in 0.12s ease-out;
}
@keyframes di-flicker-in {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.di-dim   { color: #8a8a8a; }                 /* was #6a6a6a -- too faint */
.di-amber { color: #ffbe2e; }                 /* slightly brighter amber */
.di-ok    { color: #22ff5a; }                 /* survived -- proxy/tumbler held */
.di-crit  { color: #ff3b3b; text-shadow: 0 0 6px rgba(255, 46, 46, 0.45); }

.di-crit-big {
  color: #ff3b3b;
  font-size: 2.4em;
  font-weight: bold;
  letter-spacing: 4px;
  text-shadow: 0 0 16px rgba(255, 46, 46, 0.7);
  margin: 8px 0;
  animation: di-pulse 1.4s ease-in-out infinite;
}
@keyframes di-pulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 16px rgba(255, 46, 46, 0.7); }
  50%      { opacity: 0.75; text-shadow: 0 0 28px rgba(255, 46, 46, 1); }
}

/* REFLECT countdown -- the 30s "think about your life" timer */
.di-reflect {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 28px;
  animation: di-flicker-in 0.3s ease-out;
}
.di-reflect-label {
  color: #ff3b3b;
  font-size: 1em;
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.di-reflect-num {
  color: #ff6a6a;
  font-size: 3.6em;
  font-weight: bold;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255, 46, 46, 0.6);
}
.di-reflect-sub {
  color: #8a8a8a;
  font-size: 0.92em;
  letter-spacing: 1px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  /* Let the fluid clamp() on .deindex-output own the base size -- do NOT
     hard-set font-size here or it overrides the clamp floor and shrinks
     text back to unreadable. Only tweak layout that genuinely needs it. */
  #screen-deindex { padding: 20px 14px; }
  .deindex-output { max-height: 66vh; }
  .di-crit-big { font-size: 2em; letter-spacing: 3px; }
  .di-reflect-num { font-size: 3em; }
}