/* Walk-off: a VS screen on the yellow rays. Two loop stickers, the situation in a speech bubble,
   ten duels a round, then a summary */
.wo {
  position: relative; width: 100%; min-height: 900px; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  padding: 34px 20px 130px; background: var(--yellow);
}
.wo .ts-rays { top: 470px; }
.wo-title { position: relative; z-index: 2; font-size: 76px; line-height: 1; color: #fff; filter: drop-shadow(0 6px 0 #000); }
.wo-title span { display: block; -webkit-text-stroke: 8px #000; paint-order: stroke fill; rotate: -2deg; }
.wo-play, .wo-end { position: relative; z-index: 2; width: min(920px, 100%); display: flex; flex-direction: column; align-items: center; }
.wo-play[hidden], .wo-end[hidden] { display: none; }

/* the situation */
.wo-prompt {
  position: relative; margin-top: 26px; padding: 12px 30px 10px; max-width: 100%; text-align: center;
  background: #fff; border: 3px solid #000; border-radius: 24px; box-shadow: 0 6px 0 #000;
}
.wo-prompt::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; width: 22px; height: 22px; margin-left: -11px; transform: rotate(45deg);
  background: #fff; border-right: 3px solid #000; border-bottom: 3px solid #000; border-radius: 0 0 5px 0;
}
.wo-who { display: block; font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
/* the duel everyone gets today: a black tag on the bubble's top edge */
.wo-daily {
  position: absolute; left: 50%; top: -17px; translate: -50% 0; rotate: -3deg; padding: 8px 16px 5px; border-radius: 999px;
  background: #000; color: var(--yellow); font: 800 13px/1 "Baloo 2", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  animation: wo-daily .5s var(--bounce) .15s both;
}
.wo-daily[hidden] { display: none; }
.wo-prompt.is-tagged { padding-top: 22px; }
@keyframes wo-daily { from { scale: .3; opacity: 0; } }
.wo-what { margin-top: 6px; font: 400 44px/1.05 Lalezar, sans-serif; }

/* progress: one dot per duel */
.wo-dots { display: flex; gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; }
.wo-dots li { width: 13px; height: 13px; border: 3px solid #000; border-radius: 50%; background: #fff; transition: transform .42s var(--bounce), background-color .2s; }
.wo-dots li.done { background: #000; }
.wo-dots li.now { background: #fff; transform: scale(1.25); box-shadow: 0 0 0 2.5px var(--yellow), 0 0 0 5px #000; }

/* the two loops and the VS */
.wo-arena { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 22px; margin-top: 48px; }
.wo-side {
  position: relative; display: grid; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; outline: none;
  font: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
.wo-side .st { width: min(300px, 100%); --r: -2.5deg; }
.wo-side[data-side="1"] .st { --r: 2.5deg; }
.wo-side:focus-visible .st { outline: 3px solid #000; outline-offset: 6px; }
@media (hover: hover) { .wo-arena:not(.voted) .wo-side:hover .st { transform: translateY(-8px) scale(1.04); } }
.wo-arena:not(.voted) .wo-side:active .st { transform: scale(1.05, .94); transition-duration: 80ms; }
.wo-side.won .st { transform: translateY(-10px) scale(1.06); box-shadow: 0 0 0 5px var(--yellow), 0 0 0 8px #000, 4px 12px 0 rgba(0, 0, 0, .2); }
.wo-side.lost .st { transform: rotate(calc(var(--r) * 3)) translateY(14px) scale(.92); opacity: .55; }
/* after the vote each sticker gets its share on the corner where the album has the heart */
.wo-pct { padding: 7px 12px 2px; border: var(--line) solid #000; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #000; font: 400 26px/1 Lalezar, sans-serif; opacity: 0; transition: opacity .2s; }
.wo-pct:empty { display: none; }
.wo-arena.voted .wo-pct { opacity: 1; }
.wo-crown { position: absolute; z-index: 3; left: 50%; top: -4px; width: 62px; height: 44px; margin-left: -31px; pointer-events: none; animation: wo-crown .5s var(--bounce) both; }
@keyframes wo-crown { from { transform: translateY(-30px) scale(.3) rotate(-30deg); opacity: 0; } }
.wo-vs { font: 400 104px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 9px #000; paint-order: stroke fill; filter: drop-shadow(0 7px 0 #000); rotate: -6deg; }
.wo-vs.slam { animation: wo-slam .5s cubic-bezier(.3, 0, .2, 1); }
@keyframes wo-slam { 0% { transform: scale(2.6); opacity: 0; } 35% { transform: scale(.82, 1.2); opacity: 1; } 60% { transform: scale(1.12, .9); } 100% { transform: none; } }

/* after a vote: a stamp with the reaction and a plate with the numbers */
.wo-verdict { display: grid; justify-items: center; gap: 12px; min-height: 100px; margin-top: 34px; text-align: center; }
.wo-stamp { font: 400 40px/1 Lalezar, sans-serif; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-shadow: 0 4px 0 #000; rotate: -3deg; }
.wo-stat { max-width: 100%; padding: 10px 20px 8px; border: var(--line) solid #000; border-radius: 999px; background: #fff; box-shadow: 0 4px 0 #000; font: 700 17px/1.3 "Baloo 2", sans-serif; }
/* the way on: big, white, nudging */
.wo-next {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 17px 38px 14px; border: var(--line) solid #000; border-radius: 999px;
  background: #fff; color: #000; cursor: pointer; font: 800 21px/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 0 #000; -webkit-tap-highlight-color: transparent; transition: transform .42s var(--bounce); animation: wo-nudge 1.4s ease-in-out .6s infinite;
}
.wo-next::after { content: ""; width: 11px; height: 11px; margin: -2px 2px 0 0; border-top: 4px solid #000; border-right: 4px solid #000; rotate: 45deg; }
@keyframes wo-nudge { 50% { translate: 0 -4px; } }
.wo-btn {
  margin-top: 10px; padding: 14px 30px 11px; border: 3px solid #000; border-radius: 999px; background: #000; color: var(--yellow); cursor: pointer;
  font: 800 18px/1 "Baloo 2", sans-serif; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 5px 0 #000;
  -webkit-tap-highlight-color: transparent; transition: transform .42s var(--bounce);
}
.wo-next[hidden] { display: none; }
@media (hover: hover) { .wo-next:hover { transform: scale(1.06); } .wo-btn:hover { transform: translateY(-3px); } }
.wo-next:active, .wo-btn:active { transform: scale(1.08, .88); transition-duration: 80ms; }
.wo-ghost { background: #fff; color: #000; }

/* end of a round */
.wo-end { margin-top: 22px; padding: 26px 30px 30px; background: #fff; border: 3px solid #000; border-radius: 28px; box-shadow: 0 8px 0 #000; gap: 18px; }
.wo-end-title { font-size: 54px; line-height: 1; }
.wo-end-grid { width: 100%; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 30px; align-items: start; }
.wo-label { display: block; font: 800 12px/1.2 "Baloo 2", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.wo-mine { display: grid; gap: 12px; justify-items: start; }
.wo-mine-st { width: 100%; --r: -2deg; }
.wo-open { padding: 10px 14px 7px; border: var(--line) solid #000; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #000; font: 800 14px/1 "Baloo 2", sans-serif; color: #000; text-decoration: none; white-space: nowrap; }
.wo-agree { font: 400 64px/1 Lalezar, sans-serif; margin: 6px 0 0; }
.wo-agree b { font-weight: 400; }
.wo-rank { font: 800 20px/1.2 "Baloo 2", sans-serif; margin: 2px 0 16px; }
.wo-champs { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.wo-champs li { display: flex; align-items: center; gap: 10px; font: 700 16px/1.25 "Baloo 2", sans-serif; }
.wo-champs .st-no { position: static; flex: none; rotate: -6deg; padding: 4px 7px 0; border-width: 2.5px; border-radius: 9px; box-shadow: 0 2px 0 #000; font-size: 17px; -webkit-text-stroke-width: 4px; }
.wo-champs small { opacity: .6; font-weight: 700; }
.wo-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wo-btn:disabled { cursor: progress; opacity: .7; }
.wo-friend { display: inline-block; margin: -6px 0 16px; padding: 7px 14px 5px; border-radius: 999px; background: #000; color: var(--yellow); font: 800 15px/1.2 "Baloo 2", sans-serif; }
.wo-friend[hidden] { display: none; }
.wo-stat-friend { background: #000; color: var(--yellow); box-shadow: 0 4px 0 rgba(0, 0, 0, .25); }

/* the round as a card: preview, save, copy the link */
.wo-share { width: 100%; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 18px 20px; border: 3px dashed #000; border-radius: 22px; }
.wo-share[hidden] { display: none; }
.wo-share-img { width: 100%; height: auto; border: 3px solid #000; border-radius: 16px; rotate: -2deg; box-shadow: 4px 7px 0 rgba(0, 0, 0, .2); }
.wo-share-img[hidden] { display: none; }
.wo-share-side { display: grid; gap: 14px; justify-items: start; }
.wo-share-lead { font: 700 17px/1.35 "Baloo 2", sans-serif; }
.wo-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wo-share-actions .wo-btn { margin: 0; }
.wo-save[hidden] { display: none; }
.wo-copied { font: 800 14px/1 "Baloo 2", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.wo-copied[hidden] { display: none; }

.wo-road { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 70px; background: var(--paper); border-top: 4.7px solid #000; }
.page-walkoff .tk-wrap { padding-top: 30px; }

@media (max-width: 809.98px) {
  .wo { min-height: 0; padding: 24px 14px 100px; }
  .wo .ts-rays { top: 330px; }
  .wo-title { font-size: 52px; margin-top: 8px; }
  .wo-title span { -webkit-text-stroke: 6px #000; }
  .wo-prompt { margin-top: 16px; padding: 10px 18px 8px; }
  .wo-prompt.is-tagged { margin-top: 30px; padding-top: 20px; }
  .wo-daily { top: -15px; padding: 7px 14px 4px; font-size: 12px; }
  .wo-what { font-size: 30px; }
  .wo-dots { gap: 12px; margin-top: 30px; }
  .wo-side.won .st { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 5px #000, 3px 8px 0 rgba(0, 0, 0, .2); }
  .wo-dots li { width: 11px; height: 11px; }
  .wo-arena { gap: 6px; margin-top: 34px; }
  .wo-side .st { padding: 5px; border-radius: 18px; }
  .wo-side .st-face { border-radius: 13px; }
  .wo-side .st-no { left: -7px; top: -9px; padding: 5px 7px 1px; font-size: 19px; -webkit-text-stroke-width: 4px; }
  .wo-side .st-foot { right: -5px; bottom: -8px; }
  .wo-pct { padding: 6px 9px 1px; font-size: 20px; }
  .wo-vs { font-size: 52px; -webkit-text-stroke: 5px #000; filter: drop-shadow(0 4px 0 #000); }
  .wo-crown { width: 44px; height: 32px; margin-left: -22px; top: -3px; }
  .wo-verdict { margin-top: 26px; min-height: 0; }
  .wo-stamp { font-size: 30px; -webkit-text-stroke: 5px #000; }
  .wo-stat { font-size: 14px; padding: 8px 14px 6px; }
  .wo-next { font-size: 18px; padding: 14px 30px 11px; }
  .wo-btn { font-size: 15px; padding: 12px 22px 9px; }
  .wo-end { padding: 20px 16px 22px; }
  .wo-end-title { font-size: 40px; }
  .wo-end-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wo-mine-st { width: 200px; }
  .wo-agree { font-size: 52px; }
  .wo-share { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; padding: 16px 14px; }
  .wo-share-img { width: 180px; }
  .wo-share-side { justify-items: center; text-align: center; }
  .wo-share-actions { justify-content: center; }
  .wo-share-lead { font-size: 15px; }
  .wo-road { height: 56px; border-top-width: 3px; }
}