/* extinction.meme · the lowercase law (pairs with lowercase.js). CSP-clean: no inline styles, no external requests, nothing but emoji for art.
   Everything is prefixed lc-. The base style of every element is its visible, finished, STILL state; the way in / out (slam, lift, flash,
   flying emoji, sirens, the draining clock) only exists inside the `no-preference` block at the bottom, and never in calm mode. */

/* ---------- the layer: shown in the browser's top layer (popover="manual"), so it paints above modal <dialog>s ---------- */
.lc-layer {
  position: fixed; inset: 0; z-index: 2147483000; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: inherit; overflow: hidden; pointer-events: none; font-family: var(--body, "Comic Sans MS", "Trebuchet MS", sans-serif);
}
.lc-layer > * { pointer-events: none; }
.lc-layer [hidden] { display: none !important; }

/* ---------- the explosion: flash, big boom, flying emoji (only ever shown when motion is allowed) ---------- */
.lc-flash, .lc-boom, .lc-bit { display: none; position: absolute; }
.lc-flash { inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #fff 0, #fff 16%, #ffc15a 42%, rgba(255, 98, 0, .6) 82%); }
.lc-flash.lc-red { background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 60, 70, .55), rgba(255, 0, 32, .85) 70%); }
.lc-boom { left: var(--x); top: var(--y); font-size: min(120px, 30vw); line-height: 1; }
.lc-boom.lc-big { font-size: min(210px, 52vw); }
.lc-bit { left: var(--x); top: var(--y); font-size: var(--s, 28px); line-height: 1; }

/* ---------- the warning cards ---------- */
.lc-card {
  position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: max-content;
  max-width: min(680px, calc(100vw - 24px)); padding: 12px 20px; text-wrap: balance; border: 3px solid #2b1020; border-radius: 20px; text-align: center;
  font: 700 18px/1.3 var(--body, "Comic Sans MS", "Trebuchet MS", sans-serif); pointer-events: auto; cursor: pointer; overflow-wrap: anywhere;
}
.lc-msg { margin: 0; text-wrap: balance; }
.lc-w1 { background: #fff27a; color: #2b1020; box-shadow: 5px 5px 0 #ff6a00; }
.lc-w2 { background: #ff2e45; color: #fff; border-color: #4a0010; box-shadow: 5px 5px 0 #2b1020, 0 0 0 5px rgba(255, 46, 69, .35); font-size: 19px; }
.lc-card.lc-out { opacity: 0; }

/* ---------- jail ---------- */
.lc-jail { position: absolute; inset: 0; pointer-events: auto; }
.lc-jail.lc-free { pointer-events: none; }
.lc-jail > * { pointer-events: none; }
.lc-veil { position: absolute; inset: 0; background: rgba(10, 6, 20, .74); }
.lc-veil::before, .lc-veil::after { content: ""; display: none; position: absolute; inset: 0; opacity: 0; }
.lc-veil::before { background: radial-gradient(ellipse at 0% 0%, rgba(255, 30, 60, .7), transparent 60%); }
.lc-veil::after { background: radial-gradient(ellipse at 100% 0%, rgba(40, 110, 255, .7), transparent 60%); }
.lc-bars {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 56px, #07070b 56px 60px, #aab3c5 60px 65px, #566074 65px 78px, #07070b 78px 82px, transparent 82px 88px);
}
.lc-bars::before, .lc-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30px; background: linear-gradient(#7d889d, #c3cbda 30%, #566074 65%, #2a2f3a); border: 4px solid #07070b; border-left: 0; border-right: 0;
}
.lc-bars::before { top: 0; }
.lc-bars::after { bottom: 0; }
.lc-jail.lc-free .lc-bars, .lc-jail.lc-free .lc-veil { display: none; } /* released: the bars are gone (the animated block below lifts them) */
.lc-box {
  position: absolute; inset: 0; margin: auto; width: min(92vw, 400px); height: max-content; max-height: calc(100vh - 24px); overflow: auto; padding: 20px 18px 18px;
  background: #17121f; color: #fff; border: 4px solid #fff; border-radius: 20px; box-shadow: 0 0 0 4px #000, 7px 7px 0 4px #ff3d9a; text-align: center; pointer-events: auto;
}
.lc-title { margin: 0 0 8px; font: 400 clamp(34px, 10vw, 54px)/1 var(--display, "Arial Black", "Trebuchet MS", sans-serif); letter-spacing: .03em; color: #ffe14a; text-shadow: 3px 3px 0 #ff3d9a; }
.lc-crime { margin: 0; font: 700 17px/1.35 var(--body, "Comic Sans MS", "Trebuchet MS", sans-serif); color: #f1e9ff; overflow-wrap: anywhere; text-wrap: balance; }
.lc-time { margin: 12px 0 8px; font: 400 clamp(24px, 7vw, 32px)/1.1 var(--display, "Arial Black", "Trebuchet MS", sans-serif); color: #ff8a8a; font-variant-numeric: tabular-nums; }
.lc-clock { display: none; height: 10px; margin: 0 auto 4px; border-radius: 999px; background: #2e2640; overflow: hidden; }
.lc-clock i { display: block; height: 100%; background: linear-gradient(90deg, #ff3d9a, #ffe14a); transform-origin: 0 50%; }
.lc-skip {
  margin-top: 12px; min-height: 44px; padding: 8px 20px; border: 3px solid #fff; border-radius: 999px; background: #fff27a; color: #2b1020; cursor: pointer; pointer-events: auto;
  font: 700 16px/1.2 var(--body, "Comic Sans MS", "Trebuchet MS", sans-serif); box-shadow: 3px 3px 0 #ff3d9a;
}
.lc-skip:hover { background: #fff7a8; }
.lc-skip:focus-visible { outline: 3px solid #5cd0ff; outline-offset: 3px; }
.lc-freemsg { margin: 0; padding: 4px 2px; font: 700 20px/1.35 var(--body, "Comic Sans MS", "Trebuchet MS", sans-serif); color: #1f5a1f; overflow-wrap: anywhere; text-wrap: balance; }
.lc-jail.lc-free .lc-box { background: #e9ffd6; color: #1f5a1f; border-color: #3cb46e; box-shadow: 0 0 0 4px #1f5a1f, 6px 6px 0 4px #3cb46e; pointer-events: none; }
.lc-jail.lc-bye .lc-box { opacity: 0; }

@media (max-width: 560px) {
  .lc-bars { background: repeating-linear-gradient(90deg, transparent 0 34px, #07070b 34px 37px, #aab3c5 37px 41px, #566074 41px 50px, #07070b 50px 53px, transparent 53px 58px); }
  .lc-bars::before, .lc-bars::after { height: 24px; }
  .lc-card { font-size: 16px; padding: 10px 16px; }
  .lc-w2 { font-size: 16px; }
  .lc-freemsg { font-size: 18px; }
}

/* ---------- the way in and out: only when motion is welcome (not prefers-reduced-motion, not calm mode) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-calm]) .lc-flash { display: block; animation: lc-flash .55s ease-out forwards; }
  :root:not([data-calm]) .lc-flash.lc-red { animation: lc-alarm 1.5s .3s ease-in-out both; }
  :root:not([data-calm]) .lc-boom { display: block; animation: lc-boom .8s cubic-bezier(.2, .8, .3, 1) forwards; }
  :root:not([data-calm]) .lc-bit { display: block; animation: lc-fly var(--t, 1s) cubic-bezier(.15, .7, .3, 1) forwards; }
  :root:not([data-calm]) .lc-card { animation: lc-card-in .45s cubic-bezier(.3, 1.6, .5, 1) backwards; transition: opacity .4s; }
  :root:not([data-calm]) .lc-w2 { animation: lc-card-in .45s cubic-bezier(.3, 1.6, .5, 1) backwards, lc-throb 1.4s .5s ease-in-out infinite; }
  :root:not([data-calm]) .lc-bars { animation: lc-slam .4s cubic-bezier(.2, .9, .3, 1.25) backwards; }
  :root:not([data-calm]) .lc-veil { animation: lc-fade-in .3s ease-out backwards; }
  :root:not([data-calm]) .lc-veil::before { display: block; animation: lc-siren 1.2s ease-in-out infinite; }
  :root:not([data-calm]) .lc-veil::after { display: block; animation: lc-siren 1.2s .6s ease-in-out infinite; }
  :root:not([data-calm]) .lc-box { animation: lc-box-in .45s .12s cubic-bezier(.3, 1.6, .5, 1) backwards; }
  :root:not([data-calm]) .lc-clock { display: block; }
  :root:not([data-calm]) .lc-clock i { animation: lc-drain var(--dur, 5s) linear forwards; }
  :root:not([data-calm]) .lc-jail.lc-free .lc-bars { display: block; animation: lc-lift .7s cubic-bezier(.5, 0, .9, .4) forwards; }
  :root:not([data-calm]) .lc-jail.lc-free .lc-veil { display: block; animation: lc-fade-out .8s ease-in forwards; }
  :root:not([data-calm]) .lc-jail.lc-free .lc-box { animation: lc-box-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards; }
  :root:not([data-calm]) .lc-jail.lc-bye .lc-box { transition: opacity .5s; }
}
@keyframes lc-flash { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-alarm { 0% { opacity: 0; } 20% { opacity: .75; } 45% { opacity: .05; } 70% { opacity: .6; } 100% { opacity: 0; } }
@keyframes lc-boom { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2) rotate(-10deg); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(6deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7) rotate(0); } }
@keyframes lc-fly {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1.15) rotate(var(--r, 0deg)); }
}
@keyframes lc-card-in { 0% { opacity: 0; transform: translate(-50%, -150%) scale(.8); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes lc-throb { 0%, 100% { box-shadow: 5px 5px 0 #2b1020, 0 0 0 5px rgba(255, 46, 69, .35); } 50% { box-shadow: 5px 5px 0 #2b1020, 0 0 0 11px rgba(255, 46, 69, .12); } }
@keyframes lc-slam { 0% { transform: translateY(-105%); } 68% { transform: translateY(1.5%); } 100% { transform: none; } }
@keyframes lc-lift { 0% { transform: none; } 100% { transform: translateY(-110%); } }
@keyframes lc-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lc-fade-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lc-siren { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@keyframes lc-box-in { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }
@keyframes lc-drain { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }