/* Undead Forever, the game page only: the Dead Road film, the wall of holders and the outbreak board.
   Everything here sits on top of undead-forever.css and is safe without JavaScript. */

/* ---------- The Dead Road: five paintings in a row, or one pinned film ---------- */
.uf-road { position: relative; width: 100%; padding: clamp(64px, 9vw, 112px) 0 0; --road-top: var(--bz-header-h, 66px); --road-under: 100px; }
@media (min-width: 801px) { .uf-road { --road-top: calc(var(--bz-header-h, 76px) + 57px); --road-under: 0px; } }
.uf-road-head { width: var(--uf-wide); max-width: none; margin: 0 auto 34px; }
.uf-road-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.05; margin: 0 0 18px; }
.uf-road-head .uf-lede { margin: 0; }
.uf-road-stops {
  list-style: none;
  margin: 0;
  padding: 6px max(16px, calc((100% - 1200px) / 2)) 26px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(236px, 25vw, 290px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(16px, calc((100% - 1200px) / 2));
  scrollbar-color: #7a2a1c transparent;
}
.uf-road-stops li { scroll-snap-align: start; }
.uf-road-stops figure { margin: 0; }
.uf-road-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: var(--uf-radius);
  border: 1px solid var(--uf-line-strong);
  background: #120606;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.uf-road-art:not([src]) { color: transparent; }
.uf-road-stops figcaption { padding: 16px 4px 0; }
.uf-road-num { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; color: var(--uf-gold); font: 800 .72rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.uf-road-num b { flex: none; white-space: nowrap; font: 700 1.5rem/1 var(--uf-serif); letter-spacing: 0; color: transparent; background: linear-gradient(180deg, #fff3dc 0%, #f3d27a 55%, #c58a2c 100%); -webkit-background-clip: text; background-clip: text; }
.uf-road-stops h3 { margin: 0 0 8px; font-size: 1.5rem; line-height: 1.1; }
.uf-road-line { margin: 0 0 14px; color: var(--uf-muted); font-size: .95rem; line-height: 1.55; }
.uf-road-cmd { display: flex; align-items: center; gap: 12px; margin: 0; }
.uf-road-cmd img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(243, 210, 122, .55); box-shadow: 0 0 0 3px rgba(0, 0, 0, .4), 0 0 18px rgba(226, 58, 47, .35); }
.uf-road-cmd span { display: grid; color: var(--uf-dim); font: 800 .64rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.uf-road-cmd strong { color: var(--uf-heading); font: 700 1.02rem/1.2 var(--uf-serif); letter-spacing: 0; text-transform: none; }
.uf-road-end, .uf-road-hint, .uf-road-rail, .uf-road-skip { display: none; }

/* the film: the row becomes a stage that holds still while the page scrolls under it */
.uf-road.is-film { padding-top: 0; }
.uf-road.is-film .uf-road-track { height: calc((100vh - var(--road-top)) * (1 + var(--road-units, 5))); background: #070303; }
.uf-road.is-film .uf-road-stage {
  position: sticky;
  top: var(--road-top);
  height: calc(100vh - var(--road-top));
  overflow: hidden;
  background: #070303;
  contain: layout paint;
}
/* phones: some browsers show the page on under their floating bar, so the stage runs --road-under past the
   viewport's foot and never ends short; everything that must be read keeps clear of that strip */
.uf-road.is-film .uf-road-stage { height: calc(100vh - var(--road-top) + var(--road-under)); }
.uf-road-canvas { z-index: 0; }
.uf-road.is-film .uf-road-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 3, 3, .94) 0%, rgba(7, 3, 3, .62) 22%, rgba(7, 3, 3, 0) 48%), linear-gradient(180deg, rgba(7, 3, 3, .5) 0%, rgba(7, 3, 3, 0) 16%);
  opacity: calc(.3 + .7 * var(--road-shade, 1));
}
.uf-road.is-film .uf-road-head,
.uf-road.is-film .uf-road-stops li,
.uf-road.is-film .uf-road-end,
.uf-road-plate { position: absolute; z-index: 2; visibility: hidden; }
/* the film's script sets these as the page scrolls: the title card arrives in three beats and leaves as one */
.uf-road.is-film .uf-road-head { opacity: var(--ha, 0); }
.uf-road.is-film .uf-road-end { opacity: var(--ea, 0); }
.uf-road.is-film .uf-road-stops li { transform: translate3d(0, var(--lift, 0px), 0); }
.uf-road.is-film .uf-road-num { opacity: var(--a1, 0); }
.uf-road.is-film .uf-road-stops h3 { opacity: var(--a2, 0); clip-path: inset(-14% var(--wipe, 0%) -14% -4%); }
.uf-road.is-film .uf-road-line { opacity: var(--a3, 0); }
.uf-road.is-film .uf-road-cmd { display: none; }
/* the commander's name, under the face that rises at the door */
.uf-road-plate { left: var(--px, 50%); top: var(--py, 60%); margin: 0; transform: translate(-50%, 0); opacity: var(--pa, 0); text-align: center; white-space: nowrap; pointer-events: none; text-shadow: 0 2px 18px rgba(0, 0, 0, .95), 0 0 44px rgba(0, 0, 0, .8); }
.uf-road-plate span { display: block; margin-right: -.34em; color: var(--uf-gold); font: 800 .66rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .34em; text-transform: uppercase; }
.uf-road-plate strong { --sp: calc(var(--trk, 0) * var(--trk-max, 0px)); display: block; margin: 7px calc(var(--sp) * -1) 5px 0; color: #fff6e8; font: 700 clamp(2.3rem, 10vw, 4.6rem)/1 var(--uf-serif); letter-spacing: var(--sp); }
.uf-road-plate em { display: block; color: #e6d6c2; font: italic 500 1.02rem/1.3 var(--uf-serif); }
@media (min-width: 900px) { .uf-road-plate strong { font-size: clamp(2.6rem, 3.6vw, 3.6rem); } }
.uf-road-end.is-hit { animation: uf-road-hit .36s cubic-bezier(.3, .6, .4, 1); }
@keyframes uf-road-hit { 0% { translate: 0 0; } 18% { translate: -5px 4px; } 42% { translate: 4px -3px; } 68% { translate: -2px 2px; } 100% { translate: 0 0; } }
.uf-road.is-film .uf-road-head {
  left: 16px; right: 16px; bottom: calc(var(--road-under) + max(60px, 8vh));
  width: auto; margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .8);
}
.uf-road.is-film .uf-road-head h2 { font-size: clamp(2.7rem, 12.4vw, 5.6rem); line-height: .94; margin: 0 0 14px; }
.uf-road.is-film .uf-road-head .uf-lede { font-size: 1rem; line-height: 1.55; max-width: 44ch; color: #e6d6c2; }
.uf-road.is-film .uf-road-hint { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; color: var(--uf-gold); font: 800 .7rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.uf-road-hint span { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, var(--uf-gold)); animation: uf-road-drop 1.9s ease-in-out infinite; transform-origin: top; }
@keyframes uf-road-drop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(12px); opacity: 0; } }
.uf-road.is-film .uf-road-stops { position: static; display: block; margin: 0; padding: 0; overflow: visible; }
.uf-road.is-film .uf-road-stops li { left: 16px; right: 16px; bottom: calc(var(--road-under) + max(56px, 7.5vh)); }
.uf-road.is-film .uf-road-art { display: none; }
.uf-road.is-film .uf-road-stops figcaption { padding: 0; text-shadow: 0 2px 16px rgba(0, 0, 0, .85); }
.uf-road.is-film .uf-road-num { margin-bottom: 10px; font-size: .72rem; }
.uf-road.is-film .uf-road-num b { font-size: 2.6rem; }
.uf-road.is-film .uf-road-stops h3 { font-size: clamp(2.3rem, 10.4vw, 4.6rem); line-height: .96; margin: 0 0 12px; }
.uf-road.is-film .uf-road-line { font-size: 1.02rem; line-height: 1.5; max-width: 40ch; color: #eadccb; margin-bottom: 16px; }
.uf-road.is-film .uf-road-cmd img { width: 52px; height: 52px; }
.uf-road.is-film .uf-road-end { display: block; left: 16px; right: 16px; top: calc(50% - var(--road-under) / 2); transform: translateY(-50%); text-align: center; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
.uf-road-end .uf-display { margin: 0; font-size: clamp(2.5rem, 11vw, 5.2rem); line-height: .98; }
.uf-road.is-film .uf-road-rail {
  display: flex; gap: 6px; position: absolute; z-index: 2; left: 16px; top: 16px; margin: 0;
  font: 700 .78rem/1 var(--uf-serif); color: rgba(234, 220, 203, .46);
}
.uf-road-rail span { min-width: 30px; padding: 7px 6px; text-align: center; border: 1px solid rgba(243, 210, 122, .16); border-radius: 6px; background: rgba(10, 4, 4, .42); transition: color .4s ease, border-color .4s ease, background-color .4s ease; }
.uf-road[data-road-scene="0"] .uf-road-rail span:nth-child(1),
.uf-road[data-road-scene="1"] .uf-road-rail span:nth-child(2),
.uf-road[data-road-scene="2"] .uf-road-rail span:nth-child(3),
.uf-road[data-road-scene="3"] .uf-road-rail span:nth-child(4),
.uf-road[data-road-scene="4"] .uf-road-rail span:nth-child(5) { color: #1f1305; border-color: #f9e3a0; background: linear-gradient(180deg, #f6dc8c, #c9962f); }
.uf-road.is-film .uf-road-skip {
  display: block; position: absolute; z-index: 2; right: 16px; top: 16px; padding: 8px 12px;
  border: 1px solid rgba(243, 210, 122, .28); border-radius: 8px; background: rgba(10, 4, 4, .5);
  color: #e7cf98; font: 700 .76rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; text-decoration: none;
}
.uf-road.is-film .uf-road-skip:hover { border-color: var(--uf-gold); color: #fff; }

@media (min-width: 900px) {
  .uf-road.is-film .uf-road-stage::after {
    background:
      linear-gradient(90deg, rgba(7, 3, 3, .9) 0%, rgba(7, 3, 3, .55) 24%, rgba(7, 3, 3, 0) 44%),
      linear-gradient(270deg, rgba(7, 3, 3, .72) 0%, rgba(7, 3, 3, 0) 30%),
      linear-gradient(0deg, rgba(7, 3, 3, .7) 0%, rgba(7, 3, 3, 0) 26%);
  }
  .uf-road.is-film .uf-road-head,
  .uf-road.is-film .uf-road-stops li { left: max(24px, calc((100% - 1200px) / 2)); right: auto; bottom: auto; top: 50%; width: min(430px, 33vw); margin-top: -8px; translate: 0 -50%; }
  .uf-road.is-film .uf-road-head { width: min(560px, 40vw); }
  .uf-road.is-film .uf-road-head h2 { font-size: clamp(3.4rem, 5.6vw, 5.6rem); }
  .uf-road.is-film .uf-road-stops h3 { font-size: clamp(3rem, 4.6vw, 4.8rem); }
  .uf-road.is-film .uf-road-num b { font-size: 3.2rem; }
  .uf-road.is-film .uf-road-line { font-size: 1.1rem; }
  .uf-road.is-film .uf-road-cmd { position: absolute; left: calc(100vw - max(24px, calc((100vw - 1200px) / 2)) * 2 - 200px); top: 50%; translate: 0 -50%; flex-direction: column; text-align: center; gap: 16px; width: 200px; }
  .uf-road.is-film .uf-road-cmd img { width: 168px; height: 168px; border-width: 2px; box-shadow: 0 0 0 6px rgba(0, 0, 0, .4), 0 0 60px rgba(226, 58, 47, .4), 0 30px 60px rgba(0, 0, 0, .6); }
  .uf-road.is-film .uf-road-cmd strong { font-size: 1.5rem; margin-top: 4px; }
  .uf-road.is-film .uf-road-cmd span { font-size: .7rem; justify-items: center; }
  .uf-road.is-film .uf-road-rail { left: max(24px, calc((100% - 1200px) / 2)); top: 24px; }
  .uf-road.is-film .uf-road-skip { right: max(24px, calc((100% - 1200px) / 2)); top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .uf-road-hint span { animation: none; } }
.uf-road.is-film { margin-top: clamp(56px, 8vw, 96px); }

/* ---------- Break Their Walls: the ten holders, the parts as built, the keepsakes ---------- */
.bw-holders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; margin: 30px 0 clamp(40px, 6vw, 64px); padding: 0; list-style: none; }
.bw-holders li { min-width: 0; }
.bw-tile { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 14px; border: 1px solid rgba(232, 73, 63, .35); background: #120504; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
.bw-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.05); transition: transform .5s ease; }
.bw-tile:hover img { transform: scale(1.06); }
.bw-tile > span { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 8px 10px; background: linear-gradient(180deg, transparent, rgba(10, 2, 2, .94)); color: #f3e9dd; font: 700 1rem/1.2 var(--uf-serif); text-align: center; }
.bw-rule { margin: 11px 2px 0; color: var(--uf-muted); font-size: .88rem; line-height: 1.45; }
.bw-rule b { display: block; margin-bottom: 3px; color: var(--uf-gold); font: 800 .64rem/1.3 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.bw-tile.bw-living img { filter: grayscale(0) brightness(1) saturate(1.05) contrast(1.05); transition: transform .5s ease, filter 1.3s cubic-bezier(.2, .7, .2, 1); }
.bw-tile.bw-living.is-live img { animation: bw-breathe 7s ease-in-out var(--bw-delay, 0s) infinite; }
.bw-tile.bw-living.is-dormant img { filter: grayscale(1) brightness(.32) saturate(1.05) contrast(1.15); transition-duration: 0s; }
.bw-motes { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.bw-glint { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.bw-glint::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 236, 220, .08) 30%, rgba(255, 240, 228, .42) 50%, rgba(255, 236, 220, .08) 70%, transparent); opacity: 0; }
.bw-living.is-live:not(.is-dormant) .bw-glint::before { animation: bw-glint 8s ease-in-out var(--bw-glint, 2s) infinite; }
@keyframes bw-breathe { 50% { scale: 1.05; } }
@keyframes bw-glint { 0%, 80% { transform: translateX(0) skewX(-16deg); opacity: 0; } 83%, 93% { opacity: 1; } 96%, 100% { transform: translateX(440%) skewX(-16deg); opacity: 0; } }
.uf-walls-parts-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.uf-walls-parts-head h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.uf-walls-parts-head .uf-gallery-nav { margin: 0; flex: none; }
.uf-walls-parts .uf-gallery-track { grid-auto-columns: clamp(220px, 24vw, 270px); }
.bw-keeps { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 48px); align-items: center; margin-top: clamp(28px, 4vw, 44px); padding: clamp(22px, 4vw, 40px); }
.bw-keeps-art { display: flex; justify-content: center; align-items: center; }
.bw-keeps-art img { width: 36%; max-width: 180px; height: auto; margin: 0 -3%; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(243, 210, 122, .16)); }
.bw-keeps-art img:nth-child(2) { width: 30%; transform: translateY(-6%) rotate(8deg); z-index: 1; }
.bw-keeps-art img:nth-child(1) { transform: rotate(-6deg); }
.bw-keeps-art img:nth-child(3) { transform: translateY(4%) rotate(5deg); }
.bw-keeps h3 { margin: 0 0 10px; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.bw-keeps p:last-child { margin: 0; color: var(--uf-muted); }
@media (max-width: 700px) {
  .bw-holders { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .bw-keeps { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bw-tile img { transition: none; } }

/* ---------- What's out, what's rising ---------- */
.uf-rise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.uf-rise-col { padding: 26px 22px 24px; border-top: 3px solid var(--rise, var(--uf-gold-2)); }
.uf-rise-stamp { margin: 0 0 16px; }
.uf-rise-col .uf-stamp { border-color: var(--rise, var(--uf-gold-2)); color: var(--rise-ink, var(--uf-gold)); }
.uf-rise-col h3 { margin: 0 0 6px; font: 700 1.4rem/1.15 var(--uf-serif); }
.uf-rise-note { margin: 0 0 16px; color: var(--uf-dim); font-size: .88rem; line-height: 1.45; }
.uf-rise-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.uf-rise-col li { position: relative; padding-left: 20px; color: var(--uf-ink); font-size: .94rem; line-height: 1.4; }
.uf-rise-col li::before { content: ""; position: absolute; left: 2px; top: .48em; width: 8px; height: 8px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--rise, var(--uf-gold-2)); box-shadow: 0 0 10px color-mix(in srgb, var(--rise, #e2b94f) 50%, transparent); }
.uf-rise-col.is-out { --rise: #5ee08a; --rise-ink: #a9f5c2; }
.uf-rise-col.is-next { --rise: #f3d27a; --rise-ink: #f3d27a; }
.uf-rise-col.is-built { --rise: #e23a2f; --rise-ink: #ff9b8c; }
.uf-rise-col.is-todo { --rise: #9a8774; --rise-ink: #cdbba6; border-style: dashed; border-top-style: solid; background: rgba(16, 6, 6, .6); }
.uf-rise.is-armed .uf-rise-col { opacity: 0; transform: translateY(26px); }
.uf-rise.is-armed .uf-stamp { opacity: 0; }
.uf-rise.is-in .uf-rise-col { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--rise-i, 0) * 140ms); }
.uf-rise.is-in .uf-stamp { animation: uf-stamp-in .5s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--rise-i, 0) * 140ms + 380ms); }
.uf-rise-col:nth-child(2) { --rise-i: 1; } .uf-rise-col:nth-child(3) { --rise-i: 2; } .uf-rise-col:nth-child(4) { --rise-i: 3; }
@keyframes uf-stamp-in { 0% { transform: rotate(-4deg) scale(2.4); opacity: 0; } 55% { transform: rotate(-4deg) scale(.94); opacity: 1; } 100% { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (max-width: 1000px) { .uf-rise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .uf-rise { grid-template-columns: minmax(0, 1fr); } }

/* the wall of holders behind its pane of glass (showpiece-wall.js draws and breaks the pane) */
.uf-walls { overflow-x: clip; }
.bw-wall { position: relative; margin: 30px 0 clamp(40px, 6vw, 64px); }
.bw-wall .bw-holders { margin: 0; }
.bw-glass { z-index: 3; }
.bw-wall.is-glass { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bw-wall.is-hit { animation: bw-hit .28s cubic-bezier(.3, .6, .4, 1); }
/* the invitation to strike: it rides the middle of the screen while the pane scrolls through */
.bw-hint { position: sticky; top: 46vh; z-index: 4; height: 0; margin: 0; display: flex; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.bw-hint b { flex: none; align-self: flex-start; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 14px; border: 1px solid rgba(255, 232, 214, .38); border-radius: 999px; background: rgba(18, 3, 3, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: #ffeede; font: 800 .72rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); white-space: nowrap; }
.bw-hint span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #ffd9c2; animation: bw-ping 1.6s ease-out infinite; }
.bw-wall.is-watched .bw-hint { opacity: 1; }
.bw-wall.is-struck .bw-hint { opacity: 0; transition-duration: .15s; }
@keyframes bw-ping { 0% { box-shadow: 0 0 0 0 rgba(255, 120, 90, .75); } 100% { box-shadow: 0 0 0 16px rgba(255, 120, 90, 0); } }
/* the burst of the holders' light as the pane goes */
.bw-wall::after { content: ""; position: absolute; inset: -8% -4%; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(62% 62% at var(--bx, 50%) var(--by, 50%), rgba(255, 120, 74, .6), rgba(226, 58, 47, .2) 46%, transparent 72%); }
.bw-wall.is-broke::after { animation: bw-burst .85s ease-out; }
@keyframes bw-burst { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
.bw-again { display: flex; align-items: center; gap: 8px; margin: calc(clamp(40px, 6vw, 64px) * -1 + 14px) auto clamp(30px, 4.6vw, 48px); padding: 9px 16px; border: 1px solid var(--uf-line-strong); border-radius: 999px; background: rgba(20, 6, 6, .7); color: var(--uf-gold); font: 700 .78rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .06em; cursor: pointer; animation: bw-again-in .6s ease both; }
.bw-again:hover { border-color: var(--uf-gold); color: #fff; }
.bw-again span { font-size: 1rem; line-height: .8; }
@keyframes bw-again-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes bw-hit { 0% { transform: translate(0, 0); } 20% { transform: translate(-5px, 3px); } 45% { transform: translate(4px, -3px); } 70% { transform: translate(-2px, 2px); } 100% { transform: translate(0, 0); } }