/* ── Alert giganti ────────────────────────────────────────── */
.alert-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.alert-scrim {
  position: absolute;
  inset: 0;
  background: rgb(5 6 10 / 0.7);
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
.alert-layer.is-active .alert-scrim { opacity: 1; }

.alert {
  --tone: var(--volt);
  --dur: 6s;
  position: relative;
  width: min(94vw, 1500px);
  padding: clamp(22px, 4.5vh, 60px) clamp(22px, 4vw, 72px) clamp(26px, 5vh, 66px);
  background: rgb(5 6 10 / 0.94);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), var(--lift);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
  pointer-events: auto;
  cursor: pointer;
  animation: alert-open 420ms var(--ease-out) both;
}
.alert.is-leaving { animation: alert-close 260ms var(--ease-in) both; }
.alert[data-type='follow'] { --tone: var(--neon); }
.alert[data-type='sub'] { --tone: var(--volt); }
.alert[data-type='gift'] { --tone: var(--pink); }
.alert[data-type='raid'] { --tone: var(--hood); }
.alert[data-type='bits'] { --tone: var(--ultra); }
.alert[data-type='redeem'] { --tone: var(--amber); }

.alert-row { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 40px); }
.alert-icon {
  display: grid;
  place-items: center;
  width: clamp(64px, 8vw, 140px);
  aspect-ratio: 1;
  flex: none;
  background: var(--tone);
  color: var(--ink);
  clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%);
  animation: alert-icon 520ms 120ms var(--ease-out) both;
}
.alert-icon .icon { width: 54%; height: 54%; stroke-width: 2.2; }
.alert-copy { min-width: 0; }
.alert-name {
  font: 900 clamp(54px, min(10.5vw, calc(150vw / var(--chars, 10))), 210px)/0.86 var(--font-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
  overflow-wrap: anywhere;
}
.alert-name .glyph { color: var(--tone); }
.alert-detail {
  margin-top: 0.4em;
  font: 700 clamp(24px, 3.4vw, 62px)/1.05 var(--font-ui);
  letter-spacing: 0.02em;
  color: var(--tone);
  animation: alert-detail 500ms 380ms var(--ease-out) both;
}
.alert-msg {
  max-width: 64ch;
  margin-top: clamp(14px, 2vh, 26px);
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1.35;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  animation: alert-detail 500ms 520ms var(--ease-out) both;
}
.alert-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--tone);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 30%, transparent);
  animation: alert-sweep 900ms 60ms var(--ease-out) both;
}
.alert-timer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: color-mix(in srgb, var(--tone) 70%, transparent);
  transform-origin: left;
  animation: alert-timer var(--dur) linear both;
}
.alert-skip {
  position: absolute;
  top: 14px;
  right: 18px;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.alert-queue {
  position: absolute;
  top: 14px;
  left: 40px;
  font: 600 11px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tone);
}

@keyframes alert-open {
  from { clip-path: polygon(28px 50%, 100% 50%, 100% 50%, 100% 50%, 0 50%, 0 50%); filter: brightness(2.4); }
  60% { filter: brightness(1.15); }
  to { filter: none; }
}
@keyframes alert-close {
  to { clip-path: polygon(28px 50%, 100% 50%, 100% 50%, 100% 50%, 0 50%, 0 50%); opacity: 0.4; }
}
@keyframes alert-icon {
  from { transform: scale(0.4) rotate(-90deg); opacity: 0; }
}
@keyframes alert-detail {
  from { transform: translateY(0.5em); opacity: 0; filter: blur(6px); }
}
@keyframes alert-sweep {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(var(--sweep-h, 300px)); opacity: 0; }
}
@keyframes alert-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ── Notifiche brevi ──────────────────────────────────────── */
.toasts {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 90;
  display: grid;
  justify-items: center;
  gap: 8px;
  translate: -50% 0;
  pointer-events: none;
}
.toast {
  --tone: var(--neon);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 92vw);
  padding: 10px 14px 10px 10px;
  background: var(--hull-3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, var(--line)), var(--lift);
  font-size: 13px;
  pointer-events: auto;
  animation: toast-in 280ms var(--ease-out) both;
}
.toast.is-leaving { animation: toast-out 200ms var(--ease-in) both; }
.toast[data-kind='warn'] { --tone: var(--amber); }
.toast[data-kind='err'] { --tone: var(--hood); }
.toast[data-kind='ok'] { --tone: var(--neon); }
.toast .icon { color: var(--tone); }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(8px); opacity: 0; } }

/* ── Configurazione guidata ───────────────────────────────── */
.setup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgb(5 6 10 / 0.62);
}
.setup-box {
  display: grid;
  gap: 16px;
  width: min(620px, 100%);
  padding: 26px 28px 24px;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px var(--line-hi), var(--lift);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.setup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.setup-title { font: 800 34px/1 var(--font-display); letter-spacing: 0.01em; text-transform: uppercase; }
.setup-head .icon-btn { color: var(--text-2); }
.setup-head .icon-btn:hover { background: var(--hull-3); color: var(--text); }
.setup-lead { color: var(--text-2); font-size: 15px; max-width: 58ch; }
.setup-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.setup-step {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setup-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--hull-3);
  color: var(--text-2);
  font: 700 14px/1 var(--font-ui);
}
.setup-step.is-done .setup-num { background: var(--neon); color: var(--ink); }
.setup-step.is-done .setup-num .icon { stroke-width: 2.4; }
.setup-step-body { display: grid; gap: 8px; min-width: 0; }
.setup-step-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 700 16px/1.3 var(--font-ui); }
.setup-step-title span { font: 400 13px/1.3 var(--font-body); color: var(--text-3); }
.setup-step.is-done .setup-step-title span { color: var(--neon); }
.setup-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.file-warning {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 32px;
  background: var(--void);
  color: var(--text-2);
  text-align: center;
  font-size: 15px;
}
.file-warning-title { font: 700 22px/1.2 var(--font-ui); color: var(--volt); }
.is-file .grid,
.is-file .statusbar { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .alert, .alert.is-leaving { animation: none; }
  .alert-sweep { display: none; }
}