:root{
  --bg: #ffffff;

  --text: #15132b;
  --muted: rgba(21,19,43,.70);

  /* button-only color */
  --btnBg: #ece8ff;

  --tap: rgba(21,19,43,.06);

  --r: 12px;
  --fs: 16px;

  --gapYears: 8px;
  --gapTiles: 8px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size: var(--fs);
  color: var(--text);
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* best-effort: disable double-tap zoom */
}

/* Normalize iOS button tinting + remove default button styling */
button{
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  touch-action: manipulation;
}

.app{
  max-width: 560px;
  margin: 0 auto;
  padding: 8px 14px 22px;
}

/* Compact topbar that is also a progress bar */
.topbar{
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  padding: 6px 0; /* minimal */
  border-radius: 14px;
  overflow: visible;
}
.topbarBase{
  position: absolute;
  inset: 0;
  background: var(--barSoft, rgba(200,200,200,.35));
  border-radius: 14px;
  z-index: 0;
  min-height: 42px;
}

.topbarFill{
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--barPct, 100%);
  background: var(--barStrong, rgba(200,200,200,1));
  border-radius: 14px;
  z-index: 0;
}

.topcenter{
  text-align: center;
  min-width: 0;
  padding: 0 0px;
  position: relative;
  z-index: 1;
}

.topActions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1;
  margin-right: 8px;
}
.topTitle{
  font-weight: 980;
  letter-spacing: .2px;
  font-size: 14px;
  line-height: 1.05;
  white-space: nowrap; /* always show full title */
}
.topSub{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.05;
  color: rgba(21,19,43,.78);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbtn{
  width: 40px;
  height: 30px;
  border-radius: 10px;
  background: var(--_topbtnbg, var(--btnBg));
  display: grid;
  place-items: center;
  font-weight: 950;
  line-height: 0;
  position: relative;
  z-index: 1;
}
.topbtn:active{ background: var(--_topbtnbg, var(--btnBg)); }

#btnBack{ --_topbtnbg: #ffffff; background: var(--_topbtnbg); margin-left: 8px; }

#btnAddTracker{ --_topbtnbg: var(--addSoft, var(--btnBg)); background: var(--_topbtnbg); }

#btnEpic{ --_topbtnbg: var(--epcSoft, var(--btnBg)); background: var(--_topbtnbg); text-transform: uppercase; font-size: 11px; letter-spacing: .6px; width: auto; min-width: 44px; padding: 0 10px; }
#btnEpic[aria-pressed="true"]{ --_topbtnbg: var(--epcStrong, var(--epcSoft, var(--btnBg))); }
#btnEpic:active{ background: var(--epcStrong, var(--epcSoft, var(--btnBg))); }
#btnEpic.moreEpic{ box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 10px 26px rgba(0,0,0,.10); animation: epic-epc-pulse 1100ms ease-in-out infinite; }
@keyframes epic-epc-pulse{ 0%,100%{ transform: translateZ(0) scale(1); } 50%{ transform: translateZ(0) scale(1.04); } }

.hidden{ display: none !important; }
.view{ padding-top: 8px; }

/* Shared "tile-as-progress" */
.tile{
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  touch-action: manipulation;
}
.tileFill{
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fillPct, 0%);
  background: var(--fillStrong, rgba(200,200,200,1));
  pointer-events: none;
}
.tileBase{
  position: absolute;
  inset: 0;
  background: var(--fillSoft, rgba(200,200,200,.35));
  pointer-events: none;
}
.tileContent{
  position: relative;
  z-index: 1;
}

/* YEARS */
.years{
  display: grid;
  gap: var(--gapYears);
}

.yearItem{
  width: 100%;
  padding: 12px 12px;
  text-align: left;
}
.yearTop{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.yearLabel{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 16px;
  color: var(--text);
}
.yearPct{
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: rgba(21,19,43,.78);
}

/* BOOK TILES */
.booksGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gapTiles);
  padding-bottom: 10px;
}
@media (min-width: 420px){
  .booksGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 520px){
  .booksGrid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.bookTile{
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  min-height: 54px;
}
.bookTile:active{ filter: none; }

.bookShort{
  font-weight: 980;
  font-size: 14px;
  letter-spacing: .12px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Actions row (Alle/Keine) */
.actionsRow{
  display: flex;
  gap: 10px;
  padding: 10px 2px 0;
}
.bottomActions{
  padding-top: 10px;
  padding-bottom: 0;
}

.pill{
  background: var(--btnYearSoft, var(--btnBg));
  border-radius: 10px;
  padding: 7px 10px; /* smaller, font-size stays */
  font-weight: 950;
}
.pill:active{ background: var(--btnYearStrong, var(--btnYearSoft, var(--btnBg))); }

/* Chapters */
.chapters{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding-bottom: 0;
}
@media (min-width: 420px){
  .chapters{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.chapterTile{
  border: 0;
  background: var(--chSoft, rgba(200,200,200,.35));
  border-radius: 12px;
  height: 44px;
  display: grid;
  place-items: center;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  user-select: none;
  touch-action: manipulation;
  position: relative;
  overflow: visible;
}
.chapterTile:active{ filter: none; }

.chapterTile.read{
  background: var(--chStrong, rgba(200,200,200,1));
}

/* Topbar buttons */
#btnEditTracker{ --_topbtnbg: #ffffff; background: var(--_topbtnbg); }
#btnMenu{ --_topbtnbg: var(--addSoft, var(--btnBg)); background: var(--_topbtnbg); }

/* Login */
.loginView{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px 14px;
}
.loginBox{
  width: 100%;
  max-width: 560px;
}
.loginBrand{
  font-weight: 980;
  letter-spacing: .2px;
  font-size: 18px;
  padding: 6px 2px 14px;
}
.loginForm{
  display: grid;
  gap: 10px;
}
.loginInput{
  width: 100%;
  border: 0;
  background: var(--authSuperSoft, rgba(236,232,255,.55));
  border-radius: 12px;
  padding: 12px 12px;
  font-weight: 650;
  color: var(--text);
  outline: none;
}
.loginInput::placeholder{ color: rgba(21,19,43,.55); }
.loginBtn{
  width: 100%;
  border: 0;
  background: var(--authSoft, var(--btnBg));
  border-radius: 12px;
  padding: 12px 12px;
  font-weight: 950;
}
.loginBtn:active{ background: var(--authStrong, var(--authSoft, var(--btnBg))); filter: none; }

/* Prevent Chrome autofill from overriding our themed background */
.loginInput:-webkit-autofill,
.loginInput:-webkit-autofill:hover,
.loginInput:-webkit-autofill:focus,
.loginInput:-webkit-autofill:active{
  -webkit-text-fill-color: var(--text);
  transition: background-color 99999s ease-out 0s;
  -webkit-box-shadow: 0 0 0 1000px var(--authSuperSoft, rgba(236,232,255,.55)) inset;
  box-shadow: 0 0 0 1000px var(--authSuperSoft, rgba(236,232,255,.55)) inset;
  caret-color: var(--text);
}

/* Burger menu */
.menuOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  z-index: 999;
}
.menuPanel{
  position: absolute;
  top: 12px;
  right: 12px;
  width: min(280px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.14);
}
.menuList{ display: grid; gap: 8px; }
.menuRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(21,19,43,.05);
}
.menuText{ font-weight: 900; }
.menuBtn{
  width: 100%;
  text-align: left;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--authSoft, rgba(236,232,255,.55));
  font-weight: 950;
}
.menuBtn:active{ filter: none; }

.menuBtn.moreEpic{
  box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 10px 26px rgba(0,0,0,.10);
  animation: epic-epc-pulse 1100ms ease-in-out infinite;
}

/* Switch */
.switch{ position: relative; width: 46px; height: 26px; display: inline-block; }
.switch input{ position: absolute; inset: 0; opacity: 0; }
.switchTrack{ position: absolute; inset: 0; border-radius: 999px; background: rgba(21,19,43,.18); }
.switchThumb{ position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #ffffff; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform 160ms ease, background 160ms ease; }
.switch input:checked ~ .switchTrack{ background: var(--epcSoft, rgba(236,232,255,.55)); }
.switch input:checked ~ .switchThumb{ transform: translateX(20px); }

/* Edit view checkbox */
.checkRow{ display: flex; align-items: center; gap: 10px; padding: 8px 4px; font-weight: 800; }
.checkRow input{ width: 18px; height: 18px; }

/* Danger button for delete */
.pill.danger{ background: rgba(235,132,132,.28); }
.pill.danger:active{ background: rgba(235,132,132,.40); }

/* Year progress bar (tracker view) */
.yearProgress{
  height: 10px;
  border-radius: 999px;
  background: var(--yearSoft, rgba(21,19,43,.08));
  overflow: hidden;
  margin: 0px 0px 8px;
}
.yearProgressFill{
  height: 100%;
  width: 0%;
  background: var(--yearStrong, rgba(200,200,200,1));
}
.loginError{
  min-height: 18px;
  font-size: 12px;
  color: rgba(21,19,43,.78);
  padding: 2px 2px 0;
}

/* Empty state on home */
.emptyHint{
  padding: 10px 4px 0;
  font-size: 12px;
  color: rgba(21,19,43,.70);
}

/* Add tracker form */
.addForm{
  display: grid;
  gap: 12px;
  padding: 6px 2px 0;
}

.field{
  display: grid;
  gap: 8px;
}

.fieldLabel{
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 12px;
  color: rgba(21,19,43,.80);
}

.textInput{
  width: 100%;
  border: 0;
  background: var(--draftSuperSoft, rgba(236,232,255,.35));
  border-radius: 12px;
  padding: 12px 12px;
  font-weight: 650;
  color: var(--text);
  outline: none;
}

/* Add view: input tinted with selected tracker color (SOFT_A) */
#viewAddTracker .textInput{
  background: var(--draftSuperSoft, rgba(236,232,255,.35));
}

/* Add view: hide scope-selection hints (requested) */
#booksSummary{ display: none; }

.mutedLine{
  font-size: 12px;
  color: rgba(21,19,43,.70);
}

.scopeRow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chipBtn{
  background: var(--draftSoft, var(--btnBg));
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 950;
  font-size: 12px;
}

.chipBtn[aria-checked="true"]{
  background: var(--draftStrong, var(--btnYearSoft, var(--btnBg)));
}

.chipBtn:active{ filter: none; }

.swatches{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 420px){
  .swatches{ grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

.swatchBtn{
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: var(--swatch, #ece8ff);
  position: relative;
}

.swatchBtn.selected{
  outline: 2px solid rgba(21,19,43,.85);
  outline-offset: 2px;
}

.bookPicker{
  padding: 10px 10px;
  border-radius: 14px;
  background: var(--draftSuperSoft, rgba(236,232,255,.35));
}

.bookPickerHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
}

.pickerActions{
  display: flex;
  gap: 8px;
}

.miniBtn{
  background: var(--draftSoft, rgba(21,19,43,.08));
  border-radius: 10px;
  padding: 7px 10px;
  font-weight: 950;
  font-size: 12px;
}

.miniBtn:active{ background: var(--draftStrong, var(--draftSoft, rgba(21,19,43,.08))); }

.bookPickSection{
  padding-top: 8px;
}

.sectionTitle{
  font-size: 12px;
  font-weight: 950;
  color: rgba(21,19,43,.75);
  padding: 0 0 8px;
}

.pickGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 420px){
  .pickGrid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pickBtn{
  background: var(--bookSoft, rgba(21,19,43,.08));
  border-radius: 10px;
  padding: 8px 8px;
  font-weight: 950;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pickBtn.selected{
  background: var(--bookStrong, var(--draftStrong, var(--btnYearSoft, var(--btnBg))));
}

.pickBtn:active{ filter: none; }

.formError{
  min-height: 18px;
  font-size: 12px;
  color: rgba(21,19,43,.78);
  padding: 2px 2px 0;
}


/* Epic Mode */
.fxCanvas{
  contain: paint;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
}

/* Laser grid overlay (Mission-Impossible vibe) */
.laserGrid{
  contain: paint;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.72) 14px 16px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.0) 0 14px, rgba(255,255,255,.72) 14px 16px);
  filter: blur(.2px) saturate(1.4);
}
.laserGrid.on{
  animation: laser-grid var(--gridDur, 520ms) ease-out forwards;
}
@keyframes laser-grid{
  0%{ opacity: 0; transform: scale(1.06) rotate(-2deg); }
  16%{ opacity: var(--gridA, .75); }
  55%{ opacity: calc(var(--gridA, .75) * .55); transform: scale(1.02) rotate(4deg); }
  100%{ opacity: 0; transform: scale(1) rotate(8deg); }
}

/* Big satirical "EPIC" slams with fake motion blur */
.epic-slam-layer{
  contain: paint;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}
.epic-slam{
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--slamRot, 0deg)) scale(0.9);
  transform-origin: 50% 50%;
  font-weight: 1000;
  letter-spacing: 2px;
  font-size: 44px;
  color: rgba(21,19,43,.94);
  text-shadow:
    0 10px 30px rgba(0,0,0,.18),
    0 0 18px rgba(255,255,255,.55);
  opacity: 0;
  filter: blur(10px);
  animation: epic-slam var(--slamDur, 780ms) cubic-bezier(.08, 1.25, .18, 1) forwards;
}
@keyframes epic-slam{
  0%{
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate(0px, -140px)
      rotate(var(--slamRot, 0deg))
      scale(calc(var(--slamScale, 1) * 1.35));
    filter: blur(12px);
  }
  18%{
    opacity: 1;
    filter: blur(2px);
  }
  46%{
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--slamRot, 0deg))
      scale(var(--slamScale, 1));
    filter: blur(0px);
  }
  92%{ opacity: 1; }
  100%{
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--slamRot, 0deg))
      scale(var(--slamScale, 1));
    filter: blur(2px);
  }
}

/* "Camera" zoom to the EPIC button when switching into MORE EPIC */
.app.epic-camera-zoom{
  transform-origin: var(--camOx, 50%) var(--camOy, 0%);
  animation: epic-camera-zoom 520ms cubic-bezier(.10, 1.45, .18, 1);
}
@keyframes epic-camera-zoom{
  0%{ transform: scale(1); filter: blur(0px); }
  42%{ transform: scale(1.06); filter: blur(.8px); }
  100%{ transform: scale(1); filter: blur(0px); }
}

.epic-pressing{
  transform: scale(0.94);
  transition: transform 70ms ease-out;
}

/* While holding a chapter tile: the whole app subtly compresses too */
.app.epic-app-pressing{
  transform: scale(0.995);
  transition: transform 70ms ease-out;
}

/* Combined press->pop + shake (single transform animation; avoids transform overrides) */
.epic-burst{
  animation: epic-burst 520ms cubic-bezier(.12, 1.35, .2, 1);
}
.epic-burst-soft{
  animation: epic-burst-soft 480ms cubic-bezier(.12, 1.35, .2, 1);
}

@keyframes epic-burst{
  0%{ transform: translate(0,0) scale(0.94); }
  18%{ transform: translate(-1px, 1px) scale(1.12); }
  32%{ transform: translate(2px, -1px) scale(1.08); }
  46%{ transform: translate(-3px, -1px) scale(1.04); }
  60%{ transform: translate(3px, 1px) scale(1.02); }
  74%{ transform: translate(-2px, 0px) scale(1.01); }
  100%{ transform: translate(0,0) scale(1); }
}

@keyframes epic-burst-soft{
  0%{ transform: translate(0,0) scale(0.97); }
  22%{ transform: translate(-1px, 1px) scale(1.06); }
  44%{ transform: translate(1px, -1px) scale(1.03); }
  66%{ transform: translate(-1px, 0px) scale(1.01); }
  100%{ transform: translate(0,0) scale(1); }
}


/* MORE EPIC variants: bigger shake + a little blur */
.epic-burst-more{
  animation: epic-burst-more 560ms cubic-bezier(.10, 1.45, .18, 1);
}
.epic-burst-soft-more{
  animation: epic-burst-soft-more 520ms cubic-bezier(.10, 1.45, .18, 1);
}

@keyframes epic-burst-more{
  0%{ transform: translate(0,0) scale(0.92); filter: blur(0px); }
  16%{ transform: translate(-2px, 2px) scale(1.18); filter: blur(.6px); }
  28%{ transform: translate(4px, -2px) scale(1.13); }
  40%{ transform: translate(-6px, -2px) scale(1.07); filter: blur(.3px); }
  54%{ transform: translate(6px, 2px) scale(1.04); }
  68%{ transform: translate(-4px, 0px) scale(1.02); }
  100%{ transform: translate(0,0) scale(1); filter: blur(0px); }
}

@keyframes epic-burst-soft-more{
  0%{ transform: translate(0,0) scale(0.96); filter: blur(0px); }
  22%{ transform: translate(-2px, 2px) scale(1.09); filter: blur(.4px); }
  44%{ transform: translate(2px, -2px) scale(1.05); }
  66%{ transform: translate(-2px, 0px) scale(1.02); }
  100%{ transform: translate(0,0) scale(1); filter: blur(0px); }
}

/* Halo ring in screen space (survives DOM re-renders during wave) */
.epic-halo-screen{
  position: fixed;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border-style: solid;
  border-width: var(--haloStroke, 3px);
  border-color: rgba(255,255,255,.8);
  transform: translate(-50%, -50%) scale(0.18);
  opacity: .95;
  pointer-events: none;
  animation: epic-halo 620ms ease-out forwards;
  z-index: 9999;
  box-shadow: 0 0 18px rgba(255,255,255,.28);
}
@keyframes epic-halo{
  to{
    transform: translate(-50%, -50%) scale(var(--haloScale, 8));
    opacity: 0;
  }
}

.epic-halo-more{
  box-shadow: 0 0 26px rgba(255,255,255,.35), 0 0 60px rgba(255,255,255,.18);
  filter: saturate(1.2);
}

/* Global app punch */
.app.epic-app-hit{
  animation: epic-app-hit 520ms cubic-bezier(.14, 1.3, .2, 1);
}
.app.epic-app-mega{
  animation: epic-app-mega 650ms cubic-bezier(.12, 1.35, .2, 1);
}
.app.epic-app-hit-more{
  animation: epic-app-hit-more 600ms cubic-bezier(.10, 1.45, .18, 1);
}
.app.epic-app-mega-more{
  animation: epic-app-mega-more 720ms cubic-bezier(.10, 1.5, .18, 1);
}

@keyframes epic-app-hit{
  0%{ transform: scale(0.986); }
  26%{ transform: scale(1.014); }
  42%{ transform: translate(-1px, 1px) scale(1.012); }
  58%{ transform: translate(1px, -1px) scale(1.008); }
  74%{ transform: translate(-1px, 0px) scale(1.004); }
  100%{ transform: translate(0,0) scale(1); }
}

@keyframes epic-app-mega{
  0%{ transform: scale(0.975); }
  26%{ transform: scale(1.04); }
  38%{ transform: translate(-4px, 3px) scale(1.04); }
  52%{ transform: translate(4px, -3px) scale(1.03); }
  66%{ transform: translate(-3px, -1px) scale(1.02); }
  78%{ transform: translate(2px, -1px) scale(1.01); }
  100%{ transform: translate(0,0) scale(1); }
}


@keyframes epic-app-hit-more{
  0%{ transform: scale(0.972); filter: blur(0px); }
  24%{ transform: scale(1.028); filter: blur(.5px); }
  40%{ transform: translate(-2px, 2px) scale(1.026); }
  56%{ transform: translate(2px, -2px) scale(1.02); }
  72%{ transform: translate(-2px, 0px) scale(1.012); }
  100%{ transform: translate(0,0) scale(1); filter: blur(0px); }
}

@keyframes epic-app-mega-more{
  0%{ transform: scale(0.955); filter: blur(0px); }
  24%{ transform: scale(1.065); filter: blur(.8px); }
  38%{ transform: translate(-6px, 5px) scale(1.06); }
  52%{ transform: translate(6px, -5px) scale(1.05); }
  66%{ transform: translate(-5px, -2px) scale(1.035); }
  78%{ transform: translate(3px, -2px) scale(1.02); }
  100%{ transform: translate(0,0) scale(1); filter: blur(0px); }
}

/* Escalation FX */
.epic-flash{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  pointer-events: none;
  z-index: 9999;
  animation: epic-flash 520ms ease-out forwards;
}
@keyframes epic-flash{
  0%{ opacity: 0; }
  18%{ opacity: 1; }
  100%{ opacity: 0; }
}

.epic-banner{
  position: fixed;
  left: 50%;
  top: 18%;
  transform: translate(-50%, -50%);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(21,19,43,.92);
  color: #fff;
  font-weight: 1000;
  letter-spacing: 1.6px;
  font-size: 16px;
  z-index: 10000;
  pointer-events: none;
  animation: epic-banner var(--bannerDur, 5400ms) ease-out forwards;
  box-shadow: 0 12px 34px rgba(0,0,0,.18);
  text-transform: uppercase;
}
.epic-banner--mega{
  font-size: 24px;
  padding: 14px 18px;
  letter-spacing: 2.6px;
}
.epic-banner--more{
  font-size: 30px;
  padding: 16px 20px;
  letter-spacing: 3.2px;
  text-shadow: 0 0 22px rgba(255,255,255,.35);
}

@keyframes epic-banner{
  0%{ opacity: 0; transform: translate(-50%, -62%) scale(.92) rotate(-2deg); filter: blur(10px); }
  18%{ opacity: 1; transform: translate(-50%, -50%) scale(1.10) rotate(1deg); filter: blur(2px); }
  32%{ transform: translate(-50%, -50%) scale(1.06) rotate(-1deg); filter: blur(0px); }
  46%{ transform: translate(-50%, -50%) scale(1.04) rotate(1deg); }
  90%{ opacity: 1; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.02) rotate(0deg); filter: blur(2px); }


  18%{ opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  90%{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.epic-screen-confetti{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  overflow: visible;
}
.screenPiece{
  position: absolute;
  border-radius: 2px;
  transform: translate(-50%, -50%) translate(0px, 0px) rotate(0deg);
  animation: epic-screen-piece var(--dur, 1400ms) cubic-bezier(.1,.9,.2,1) forwards;
  filter: saturate(1.2);
}
@keyframes epic-screen-piece{
  to{
    transform:
      translate(-50%, -50%)
      translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px))
      rotate(calc(var(--rot, 0) * 1deg));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce){
  .epic-burst,
  .epic-burst-soft,
  .epic-burst-more,
  .epic-burst-soft-more,
  .app.epic-app-hit,
  .app.epic-app-mega,
  .app.epic-app-hit-more,
  .app.epic-app-mega-more,
  .app.epic-camera-zoom,
  .epic-halo-screen,
  .epic-flash,
  .epic-banner,
  .laserGrid,
  .epic-slam,
  .fxCanvas{
  contain: paint;
    animation: none !important;
    transition: none !important;
  }
  #btnEpic.moreEpic{ animation: none !important; }
}