/* css/alert.css
   ALERT overlay/banner + BOOT screen + BOOT flash + shake + alert-mode color shift
*/

/* ===== ALERT overlay/banner ===== */
@keyframes alertFlash {
  0%   { opacity: 0; }
  10%  { opacity: .55; }
  20%  { opacity: .10; }
  30%  { opacity: .50; }
  40%  { opacity: .12; }
  50%  { opacity: .45; }
  60%  { opacity: .15; }
  70%  { opacity: .40; }
  80%  { opacity: .12; }
  90%  { opacity: .35; }
  100% { opacity: 0; }
}

@keyframes alertPulse {
  0%, 100% { transform: translateY(0); opacity: .95; }
  50% { transform: translateY(-1px); opacity: 1; }
}

.alert-overlay{
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 9998;
  background:
    repeating-linear-gradient(180deg, rgba(255,40,80,.10) 0 2px, rgba(0,0,0,0) 2px 6px),
    radial-gradient(1200px 800px at 50% 40%, rgba(255,40,80,.18), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, rgba(255,40,80,.10), rgba(0,0,0,0));
  mix-blend-mode: screen;
}
.alert-overlay.on{
  animation: alertFlash .9s linear 1;
}

.alert-banner{
  position: fixed;
  left: 14px; right: 14px; top: 12px;
  z-index: 9999;
  display: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,70,110,.45);
  background: rgba(40,0,10,.72);
  color: rgba(255,210,220,.96);
  box-shadow: 0 0 0 1px rgba(255,70,110,.12), 0 18px 60px rgba(0,0,0,.65);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: 12px;
}
.alert-banner.on{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  animation: alertPulse .22s linear infinite;
}

.alert-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.alert-right{ opacity:.85; }
.alert-text{ opacity:.95; }

.alert-tag{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,70,110,.55);
  background: rgba(255,70,110,.12);
  color: rgba(255,220,230,.98);
}

/* ===== ALERT mode: global shift + subtle shake ===== */
body.alert{
  filter: hue-rotate(-35deg) saturate(1.15);
}

body.alert .card,
body.alert .topbar{
  border-color: rgba(255,70,110,.55);
  box-shadow:
    0 0 0 1px rgba(255,70,110,.18),
    0 18px 60px rgba(0,0,0,.65);
}

body.alert .pill{
  border-color: rgba(255,70,110,.55);
  background: rgba(255,70,110,.10);
}

@keyframes screenShake {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-0.5px, 0.5px); }
  40%  { transform: translate(0.5px, -0.5px); }
  60%  { transform: translate(-0.5px, -0.5px); }
  80%  { transform: translate(0.5px, 0.5px); }
  100% { transform: translate(0,0); }
}
body.alert .wrap{
  animation: screenShake .18s linear infinite;
}

/* ===== BOOT flash ===== */
@keyframes bootFlash {
  0%   { opacity: 0; transform: scale(1); }
  10%  { opacity: .55; }
  20%  { opacity: .18; }
  35%  { opacity: .42; }
  55%  { opacity: .10; }
  100% { opacity: 0; transform: scale(1.003); }
}

.boot-flash{
  position: fixed; inset: 0;
  z-index: 9997; /* below alert overlay */
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(1200px 800px at 50% 40%, rgba(0,255,140,.28), transparent 65%),
    linear-gradient(180deg, rgba(0,255,140,.10), rgba(0,0,0,0));
  mix-blend-mode: screen;
}
.boot-flash.on{
  animation: bootFlash .55s ease-out 1;
}

/* ===== Boot screen ===== */
.boot-screen{
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.92);
  border: 1px solid rgba(0,255,140,.22);
}

.boot-card{
  width: min(980px, 100%);
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,255,140,.04);
  border: 1px solid rgba(0,255,140,.20);
  box-shadow: 0 0 0 1px rgba(0,255,140,.08), 0 18px 70px rgba(0,0,0,.75);
}

.boot-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.boot-sub{ margin-top: 10px; }

.boot-log{
  margin-top: 10px;
  height: 260px;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,255,140,.03);
  border: 1px solid rgba(0,255,140,.18);
  line-height: 1.45;
  font-size: 12px;
  white-space: pre-wrap;
}

.boot-bottom{
  margin-top: 10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}