/* A PvP duel on screen (public/js/ui/pvp.js, game/pvpfx.js): bold and readable like a fighting game, in the game's
   own colours (dark plum panels, gold edges, Mitr for the big words). */

:root {
  --pvp-ink: #1f1624;
  --pvp-gold: #f5c93a;
  --pvp-gold-dark: #9a6b14;
  --pvp-mine: #3bb8ff;
  --pvp-foe: #ff3b30;
  --pvp-word: 'Mitr', 'Mali', sans-serif;
}

/* ------------------------------------------------------------ in the arena: the farm's buttons make way */
body.in-arena #me-card,
body.in-arena #quest,
body.in-arena #place,
body.in-arena #clock,
body.in-arena #worldboss,
body.in-arena #raidbar,
body.in-arena #raidtop,
body.in-arena #dgbar,
body.in-arena #bossbar,
body.in-arena #target,
body.in-arena #menu,
body.in-arena #hotbar,
body.in-arena #minimap,
body.in-arena #minimap-open,
body.in-arena #party,
body.in-arena #yardbar,
body.in-arena #homebar,
body.in-arena #pull,
body.in-arena .pet-v2-controls {
  display: none !important;
}

/* the arena's edges in shadow, as a stage under torchlight: over the world, under its names and every screen */
.pvp-vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 55%, rgba(14, 6, 16, 0) 60%, rgba(14, 6, 16, 0.42) 100%);
}

.pvp-vignette[hidden] {
  display: none;
}

/* held still (before "สู้!", a pause, a stun): the stick greys out */
body.pvp-held .joystick {
  opacity: 0.45;
  filter: grayscale(1);
}

/* ------------------------------------------------------------ the bars across the top */
.pvp-hud {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: calc(6px + var(--safe-t)) calc(8px + var(--safe-r)) 18px calc(8px + var(--safe-l));
  background: linear-gradient(rgba(20, 12, 24, 0.82), rgba(20, 12, 24, 0.55) 60%, rgba(20, 12, 24, 0));
  pointer-events: none;
}

.pvp-side {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.pvp-side.theirs {
  flex-direction: row-reverse;
  text-align: right;
}

.pvp-face {
  flex: none;
  width: 44px;
  height: 52px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 3px solid var(--pvp-mine);
  border-radius: 10px;
  background: linear-gradient(#3d2c47, var(--pvp-ink));
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}

.pvp-side.theirs .pvp-face {
  border-color: var(--pvp-foe);
}

.pvp-face img {
  margin-bottom: -2px;
}

.pvp-who {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.pvp-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: #fff;
  text-shadow: 0 1px 0 #1f1624, 1px 0 0 #1f1624, -1px 0 0 #1f1624, 0 -1px 0 #1f1624, 0 2px 0 rgba(0, 0, 0, 0.4);
}

.pvp-side.theirs .pvp-name {
  flex-direction: row-reverse;
}

.pvp-name b {
  font: 600 16px/1.1 var(--pvp-word);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-name small {
  font-size: 12px;
  font-weight: 700;
  color: #ffd86e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the bar leans like a blade: mine to the right, the foe's to the left (it empties towards the middle) */
.pvp-bar {
  position: relative;
  height: 22px;
  border: 3px solid var(--pvp-ink);
  background: #4a2630;
  transform: skewX(-14deg);
  box-shadow: 0 0 0 2px var(--pvp-gold), 0 4px 0 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.pvp-side.theirs .pvp-bar {
  transform: skewX(14deg);
}

.pvp-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
}

.pvp-side.theirs .pvp-bar i {
  left: auto;
  right: 0;
}

.pvp-bar .ghost {
  background: #fff3c4;
  transition: width 0.5s ease-in;
}

.pvp-bar .fill {
  background: linear-gradient(#fff27a, #f5c93a 45%, #d99a1c);
  box-shadow: inset 0 -3px 0 rgba(120, 60, 0, 0.35);
}

.pvp-side.low .pvp-bar .fill {
  background: linear-gradient(#ff8a6e, #e3402c 50%, #a3231a);
  animation: pvp-low 0.6s ease-in-out infinite alternate;
}

@keyframes pvp-low {
  to {
    filter: brightness(1.35);
  }
}

.pvp-bar .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: skewX(14deg);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 #1f1624, 1px 0 0 #1f1624, -1px 0 0 #1f1624, 0 -1px 0 #1f1624;
}

.pvp-side.theirs .pvp-bar .num {
  transform: skewX(-14deg);
}

.pvp-pips {
  display: flex;
  gap: 5px;
  padding: 1px 4px;
}

.pvp-side.theirs .pvp-pips {
  justify-content: flex-end;
}

.pvp-pips i {
  width: 12px;
  height: 12px;
  border: 2px solid var(--pvp-ink);
  border-radius: 50%;
  background: #5a4660;
  box-shadow: 0 0 0 1px var(--pvp-gold-dark);
}

.pvp-pips i.won {
  background: radial-gradient(circle at 35% 30%, #fff6b8, var(--pvp-gold) 55%, #b7810f);
  box-shadow: 0 0 0 1px var(--pvp-gold), 0 0 8px rgba(255, 210, 60, 0.9);
}

/* what holds a fighter now (stun, slow, mark, with the seconds left), under their bar: mine too; by the clock (under my
   bar's outer end is "ยอมแพ้") */
.pvp-cc {
  justify-self: end;
  max-width: 100%;
  padding: 0 7px;
  border-radius: 8px;
  background: rgba(31, 22, 36, 0.88);
  color: #ffe36e;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pvp-side.theirs .pvp-cc {
  justify-self: start;
}

.pvp-cc[hidden] {
  display: none;
}

/* the clock between the bars */
.pvp-mid {
  display: grid;
  justify-items: center;
  min-width: 64px;
  padding: 2px 10px 4px;
  border: 3px solid var(--pvp-gold);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(#3d2c47, var(--pvp-ink));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

.pvp-time {
  font: 600 30px/1 var(--pvp-word);
  color: #fff6c8;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 #1f1624, 2px 0 0 #1f1624, -2px 0 0 #1f1624, 0 -2px 0 #1f1624;
}

.pvp-time.sudden {
  color: #ff7a5c;
}

.pvp-time.low {
  animation: pvp-tick 0.5s ease-in-out infinite alternate;
}

@keyframes pvp-tick {
  to {
    transform: scale(1.15);
  }
}

.pvp-round {
  color: var(--pvp-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* the arena potion (bottom middle, where the farm's hotbar was) and giving up (under my bar) */
.pvp-potion {
  position: fixed;
  left: 50%;
  bottom: calc(10px + var(--safe-b));
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 3px solid var(--pvp-gold);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b4a7a, var(--pvp-ink) 70%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}

.pvp-potion img {
  width: 36px;
  height: 36px;
}

.pvp-potion .n {
  position: absolute;
  right: -4px;
  bottom: -2px;
  min-width: 22px;
  padding: 0 4px;
  border: 2px solid var(--pvp-ink);
  border-radius: 10px;
  background: var(--pvp-gold);
  color: var(--pvp-ink);
  font-size: 13px;
  font-weight: 800;
}

.pvp-potion small {
  position: absolute;
  top: -10px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--pvp-ink);
  color: #fff6c8;
  font-size: 10px;
  font-weight: 700;
}

.pvp-potion .t {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 12, 18, 0.55);
  color: #fff;
  font: 600 22px/1 var(--pvp-word);
}

.pvp-potion.off img {
  filter: grayscale(1);
  opacity: 0.6;
}

/* a narrow phone: no room at the bottom between the skills and the stick: the potion sits over the stick (the chat
   button is over the skills) */
@media (max-width: 430px) {
  body.touch .pvp-potion {
    bottom: calc(176px + var(--safe-b));
    transform: none;
  }

  body.touch.stick-right .pvp-potion {
    left: auto;
    right: calc(18px + var(--safe-r));
  }

  body.touch:not(.stick-right) .pvp-potion {
    left: calc(18px + var(--safe-l));
  }
}

/* the result on screen: the fight's buttons step aside (nothing to strike or walk to until the next match) */
body.pvp-result-on #skills,
body.pvp-result-on #joystick,
body.pvp-result-on .pvp-potion,
body.pvp-result-on .pvp-quit {
  visibility: hidden;
}

.pvp-quit {
  position: fixed;
  top: calc(78px + var(--safe-t));
  left: calc(8px + var(--safe-l));
  z-index: 3;
  padding: 2px 10px;
  border: 2px solid #c8b8cc;
  border-radius: 10px;
  background: rgba(31, 22, 36, 0.78);
  color: #f3e7f5;
  font-size: 12px;
  font-weight: 700;
}

.pvp-quit-ask {
  position: fixed;
  top: calc(104px + var(--safe-t));
  left: calc(8px + var(--safe-l));
  z-index: 7;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 3px solid var(--red-dark, #8f2a24);
  border-radius: 12px;
  background: var(--paper, #fdf3d8);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.pvp-quit-ask div {
  display: flex;
  gap: 6px;
}

/* the game's cream buttons keep their dark words on the duel's plum panels (which write in white) */
.pvp-invite .btn:not(.green):not(.red),
.pvp-asked .btn,
.pvp-res .btn:not(.green):not(.red) {
  color: var(--ink);
}

/* a rematch that cannot be (or waits for the answer): a dark outline on the plum panel, plainly not a button to press */
.pvp-res .btn:not(.green):not(.red):disabled {
  opacity: 1;
  border-color: #8a7a92;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: #e6dcea;
}

/* a fighter's name inside a line of words: cut short, never the line off the screen */
.pvp-nm {
  display: inline-block;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-style: normal;
}

/* ------------------------------------------------------------ the big moments in the middle */
.pvp-stage {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

/* VS: a band across the screen, both fighters, "VS" slamming down between them */
.pvp-vs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: rgba(10, 6, 14, 0.55);
  animation: pvp-fade 3.2s both;
}

@keyframes pvp-fade {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

.vs-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 108%;
  padding: 12px 8%;
  background: linear-gradient(100deg, #1b3a66, #2a5d9a 30%, #3b1f3f 50%, #9a3029 70%, #6b1d18);
  border-top: 4px solid var(--pvp-gold);
  border-bottom: 4px solid var(--pvp-gold-dark);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.4);
  transform: skewY(-4deg);
}

.vs-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  color: #fff;
  transform: skewY(4deg);
  text-shadow: 0 2px 0 #1f1624, 2px 0 0 #1f1624, -2px 0 0 #1f1624, 0 -2px 0 #1f1624;
}

.vs-card.left {
  animation: pvp-in-left 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.vs-card.right {
  animation: pvp-in-right 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.vs-card .skill-avatar {
  width: 96px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}

.vs-card.right .skill-avatar {
  transform: scaleX(-1);
}

.vs-card b {
  font: 600 24px/1.1 var(--pvp-word);
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-card small {
  color: #ffe9a8;
  font-size: 13px;
  font-weight: 700;
}

.vs-word {
  font: 600 76px/1 var(--pvp-word);
  color: #ffe36e;
  background: linear-gradient(#fff4b0, #f5c93a 55%, #e0851c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #25152c) drop-shadow(0 0 12px rgba(255, 170, 40, 0.8));
  transform: skewY(4deg);
  animation: pvp-slam 0.5s 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.vs-sub {
  color: #fff6c8;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 2px 0 #1f1624;
}

@keyframes pvp-in-left {
  from { transform: translateX(-60vw) skewY(4deg); }
  to { transform: skewY(4deg); }
}

@keyframes pvp-in-right {
  from { transform: translateX(60vw) skewY(4deg); }
  to { transform: skewY(4deg); }
}

@keyframes pvp-slam {
  0% { opacity: 0; transform: skewY(4deg) scale(3.2); }
  60% { opacity: 1; transform: skewY(4deg) scale(0.9); }
  100% { opacity: 1; transform: skewY(4deg) scale(1); }
}

/* 3-2-1, สู้!, K.O.! */
.pvp-count,
.pvp-word {
  position: absolute;
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  font: 600 120px/1 var(--pvp-word);
  color: #fff;
  -webkit-text-stroke: 4px #25152c;
  paint-order: stroke fill;
  text-shadow: 0 6px 0 #25152c, 0 0 24px rgba(255, 200, 60, 0.8);
  white-space: nowrap;
}

.pvp-count {
  color: #fff6c8;
  animation: pvp-count 1s ease-out both;
}

@keyframes pvp-count {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(0.92); }
  30% { transform: translate(-50%, -50%) scale(1); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
}

.pvp-word.fight {
  color: #ffe36e;
  font-size: 132px;
  text-shadow: 0 6px 0 #25152c, 0 0 28px rgba(255, 90, 40, 0.95);
  animation: pvp-stamp 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

.pvp-word.ko {
  color: #ff4a2a;
  font-size: 150px;
  letter-spacing: 4px;
  text-shadow: 0 7px 0 #25152c, 0 0 30px rgba(255, 230, 120, 0.95);
  animation: pvp-ko 2s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}

@keyframes pvp-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  40% { transform: translate(-50%, -50%) scale(1.05); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.1); }
}

@keyframes pvp-ko {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(4) rotate(-12deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.85) rotate(4deg); }
  20% { transform: translate(-50%, -50%) scale(1.1) rotate(-2deg); }
  28% { transform: translate(-50%, -50%) scale(1) rotate(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.04); }
}

/* a banner: a new round, sudden death, the time, a point */
.pvp-banner {
  position: absolute;
  left: 50%;
  top: 27%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: min(84vw, 420px);
  padding: 10px 28px;
  border-top: 4px solid var(--pvp-gold);
  border-bottom: 4px solid var(--pvp-gold-dark);
  background: linear-gradient(90deg, rgba(31, 22, 36, 0), rgba(31, 22, 36, 0.92) 18%, rgba(31, 22, 36, 0.92) 82%, rgba(31, 22, 36, 0));
  animation: pvp-banner 2.2s ease-out both;
}

.pvp-banner b {
  max-width: 86vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 38px/1.1 var(--pvp-word);
  color: #ffe36e;
  text-shadow: 0 3px 0 #25152c;
}

.pvp-banner small {
  max-width: 86vw;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.pvp-banner.sudden b,
.pvp-banner.lost b {
  color: #ff7a5c;
}

.pvp-banner.won b {
  color: #b8ff7a;
}

@keyframes pvp-banner {
  0% { opacity: 0; transform: translate(-30%, -50%); }
  12% { opacity: 1; transform: translate(-50%, -50%); }
  80% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-70%, -50%); }
}

/* a foe's ultimate is coming: "ระวัง!", then who (cut short if long) over what */
.pvp-danger {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 17%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 6px 8vw;
  overflow: hidden;
  background: linear-gradient(100deg, #3a0a0a, #b3261e 40%, #ff5a36 60%, #3a0a0a);
  border-top: 3px solid #ffd27a;
  border-bottom: 3px solid #6b1d0c;
  transform: skewY(-3deg);
  animation: pvp-danger 1.1s ease-out both;
}

.pvp-danger b {
  flex: none;
  font: 600 34px/1 var(--pvp-word);
  color: #fff;
  text-shadow: 0 3px 0 #3a0a0a;
}

.pvp-danger span {
  display: grid;
  min-width: 0;
  color: #ffe9a8;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}

.pvp-danger span .pvp-nm {
  max-width: 100%;
  color: #fff;
}

.pvp-danger span small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

@keyframes pvp-danger {
  0% { opacity: 0; transform: skewY(-3deg) translateX(-100%); }
  15% { opacity: 1; transform: skewY(-3deg) translateX(0); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: skewY(-3deg) translateX(30%); }
}

/* my combo, at the left */
.pvp-combo {
  position: fixed;
  left: calc(14px + var(--safe-l));
  top: 34%;
  z-index: 4;
  display: grid;
  pointer-events: none;
  transform-origin: left center;
}

.pvp-combo b {
  font: 600 44px/1 var(--pvp-word);
  color: #fff6c8;
  text-shadow: 0 3px 0 #25152c, 2px 0 0 #25152c, -2px 0 0 #25152c, 0 -2px 0 #25152c;
}

.pvp-combo small {
  color: #ffcf3a;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 2px 0 #25152c;
}

.pvp-combo.big b {
  color: #ffcf3a;
  font-size: 54px;
}

.pvp-combo.bump {
  animation: pvp-bump 0.25s ease-out;
}

@keyframes pvp-bump {
  0% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

/* outside the closing ring: the screen's edge glows red */
.pvp-edge {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 60px 18px rgba(255, 40, 20, 0.7);
  animation: pvp-edge 0.7s ease-in-out infinite alternate;
}

.pvp-edge b {
  position: absolute;
  left: 50%;
  top: calc(92px + var(--safe-t));
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: 10px;
  background: rgba(58, 10, 10, 0.88);
  color: #ffe9a8;
  font-size: 14px;
  white-space: nowrap;
}

@keyframes pvp-edge {
  to { box-shadow: inset 0 0 90px 30px rgba(255, 40, 20, 0.85); }
}

/* a fighter away */
.pvp-pause {
  position: fixed;
  left: 50%;
  top: 40%;
  z-index: 4;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 22px;
  border: 3px solid var(--pvp-gold);
  border-radius: 14px;
  background: rgba(31, 22, 36, 0.92);
  color: #fff;
  pointer-events: none;
}

.pvp-pause b {
  font: 600 22px/1.2 var(--pvp-word);
}

.pvp-pause small {
  color: #ffe9a8;
  font-weight: 700;
}

/* ------------------------------------------------------------ the result */
.pvp-result {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 12px;
  background: rgba(10, 6, 14, 0.5);
  animation: fade-in 0.2s;
}

.pvp-res {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(94vw, 420px);
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 14px 16px 12px;
  border: 4px solid var(--pvp-gold);
  border-radius: 16px;
  background: linear-gradient(#3d2c47, var(--pvp-ink));
  color: #fff;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.45);
  animation: pvp-res-in 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes pvp-res-in {
  from { opacity: 0; transform: scale(0.7); }
}

.res-banner {
  font: 600 52px/1 var(--pvp-word);
  color: #ffe36e;
  background: linear-gradient(#fff4b0, #f5c93a 55%, #e0851c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(3px 3px 0 #25152c);
}

.pvp-res.lost .res-banner {
  background: linear-gradient(#e3eefa, #9bb2c9 60%, #6b7f96);
  background-clip: text;
  -webkit-background-clip: text;
}

.pvp-res.draw .res-banner {
  background: linear-gradient(#fff, #d8cbe0);
  background-clip: text;
  -webkit-background-clip: text;
}

.res-score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.res-score span {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.res-score span:first-child {
  text-align: right;
  color: #9fd6ff;
}

.res-score span:last-child {
  color: #ffb0a8;
}

.res-score b {
  font: 600 32px/1 var(--pvp-word);
  color: #fff6c8;
}

.res-why {
  color: #ffe9a8;
  font-weight: 700;
}

.res-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.res-stats td,
.res-stats th {
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.res-stats td {
  width: 32%;
  max-width: 0; /* (with the width: a long name is cut short instead of widening its column) */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.res-stats td:first-child {
  text-align: right;
  color: #9fd6ff;
}

.res-stats td:last-child {
  color: #ffb0a8;
}

.res-stats th {
  color: #fff6c8;
  font-weight: 700;
  white-space: nowrap;
}

.res-stats thead td,
.res-stats thead th {
  border-bottom: 2px solid rgba(245, 201, 58, 0.5);
  font-size: 12px;
}

.res-record {
  color: #d8cbe0;
}

.res-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}

/* who asked for a rematch, or has left: a line of its own above the two buttons */
.res-ask {
  flex-basis: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  color: #ffe9a8;
  font-weight: 700;
}

.res-ask .pvp-nm {
  max-width: 60%;
}

.btn.pvp-glow {
  animation: ult-ready 0.9s ease-in-out infinite;
}

/* "ท้าดวล" on someone's card */
.btn.duel {
  border-color: #8f2a24;
  background: linear-gradient(#ff8a6a, #d94a3d);
  color: #fff;
}

.res-clock {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.res-clock i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--pvp-gold);
}

/* ------------------------------------------------------------ challenges */
/* (over every window and sheet, the big map too: its buttons must be the ones a tap reaches; under the toasts of a
   window and the "turn the phone" screen) */
.pvp-invite {
  position: fixed;
  left: 50%;
  top: calc(10px + var(--safe-t));
  z-index: 65;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  width: min(94vw, 380px);
  padding: 10px 12px;
  border: 3px solid var(--pvp-gold);
  border-radius: 14px;
  background: linear-gradient(#3d2c47, var(--pvp-ink));
  color: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
}

.pvp-invite.pop {
  animation: pvp-invite 0.4s cubic-bezier(0.2, 1.5, 0.4, 1);
}

@keyframes pvp-invite {
  from { transform: translate(-50%, -30px) scale(0.85); opacity: 0; }
}

/* a window open (the shop, settings, the big map, a sheet): the card waits at the bottom, off the window's header and ✕ */
.pvp-invite.low {
  top: auto;
  bottom: calc(10px + var(--safe-b));
}

.pvp-invite.low.pop {
  animation-name: pvp-invite-low;
}

@keyframes pvp-invite-low {
  from { transform: translate(-50%, 30px) scale(0.85); opacity: 0; }
}

.pvp-invite-face {
  grid-row: span 2;
  display: grid;
  place-items: end center;
  width: 44px;
  height: 52px;
  overflow: hidden;
  border: 3px solid var(--pvp-foe);
  border-radius: 10px;
  background: #2a1d31;
}

.pvp-invite-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.pvp-invite-text b {
  font: 600 18px/1.2 var(--pvp-word);
  color: #ffe36e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pvp-invite-text > span {
  font-weight: 700;
}

.pvp-invite-text small {
  color: #d8cbe0;
  font-size: 12px;
}

.pvp-invite-bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

.pvp-invite-bar i {
  display: block;
  height: 100%;
  background: var(--pvp-gold);
  transition: width 0.2s linear;
}

.pvp-invite-acts {
  grid-column: 2;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pvp-asked {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--safe-b)); /* (over the hotbar: it waits up to 30 s, it must not cover the menu) */
  z-index: 6;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 94vw;
  padding: 6px 8px 6px 12px;
  border: 3px solid var(--pvp-gold);
  border-radius: 14px;
  background: rgba(31, 22, 36, 0.92);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

.pvp-asked b {
  color: #ffe36e;
}

/* a phone: the stick is at the bottom, so the pill waits at the left, clear of the thumbs, and may wrap; above the
   middle of the screen, where one's own character stands (the camera keeps it there), under the card and the task */
body.touch .pvp-asked {
  left: calc(10px + var(--safe-l));
  right: auto;
  top: 29%;
  bottom: auto;
  transform: none;
  flex-wrap: wrap;
  max-width: min(78vw, 320px);
  font-size: 13px;
  white-space: normal;
}

/* a phone turned sideways: the chat button is at the left; the pill waits in the middle, under the menu's row */
@media (orientation: landscape) {
  body.touch .pvp-asked {
    left: 50%;
    top: calc(74px + var(--safe-t));
    transform: translateX(-50%);
    max-width: min(56vw, 400px);
  }
}

/* ------------------------------------------------------------ in the world (game/pvpfx.js) */
/* the foe's name tag in red, their bar above it, and what holds them above that; no farming-level badge (the duel
   speaks of adventure levels: the bars and the VS say them) */
.nametag.foe {
  background: rgba(150, 20, 16, 0.88);
}

.nametag.foe .lv {
  display: none;
}

.nametag .pvpbar {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  width: 46px;
  height: 7px;
  margin-left: -23px;
  border: 1px solid #1f1624;
  border-radius: 3px;
  background: #4a2630;
  overflow: hidden;
}

.nametag .pvpbar i {
  display: block;
  height: 100%;
  background: linear-gradient(#ff8a6e, #e3402c);
  transition: width 0.15s;
}

.nametag .pvpcc {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 13px);
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(31, 22, 36, 0.85);
  color: #ffe36e;
  font-size: 10px;
  white-space: nowrap;
}

.nametag .pvpcc:empty {
  display: none;
}

/* what I take: red, as big as my own blows */
.float.pvphurt {
  font-size: max(13px, calc(20px * var(--wz, 1)));
  color: #ff6a5a;
  text-shadow: 2px 0 0 #3a0a0a, -2px 0 0 #3a0a0a, 0 2px 0 #3a0a0a, 0 -2px 0 #3a0a0a, 0 4px 0 rgba(0, 0, 0, 0.4);
  animation: hit-pop 0.9s both;
}

.float.pvphurt.crit {
  flex-direction: column;
  gap: 0;
  font-size: max(18px, calc(28px * var(--wz, 1)));
  color: #ff3b30;
}

.float.pvphurt.crit small {
  padding: 0 0.5em;
  border-radius: 0.5em;
  background: #ff3b30;
  color: #fff;
  font-size: max(9px, calc(12px * var(--wz, 1)));
  text-shadow: none;
}

.float.pvphurt.ring {
  color: #ff9a6a;
  font-size: max(11px, calc(15px * var(--wz, 1)));
}

/* หลบได้! ปัดป้อง! ต้านทาน! สตัน! */
.float.pvpword {
  padding: 1px 9px;
  border-radius: 10px;
  font: 600 max(13px, calc(19px * var(--wz, 1)))/1.3 var(--pvp-word);
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: pvp-word-pop 1.3s ease-out both;
}

.float.pvpword.dodge {
  background: #1f8a4c;
}

.float.pvpword.counter {
  background: #c27a0e;
}

.float.pvpword.immune,
.float.pvpword.shield {
  background: #3b6fa8;
}

.float.pvpword.stun {
  background: #8a5ad1;
}

@keyframes pvp-word-pop {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.5); }
  12% { opacity: 1; transform: translate(-50%, -4px) scale(1.25); }
  24% { transform: translate(-50%, -6px) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* my own name is on the bar at the top: over my head only the foe's (and their bar) */
body.in-arena .nametag.self {
  display: none;
}

/* a phone: the skills are at the bottom left (or right), so the combo counts under the bars and the ring's warning
   line, right of the chat button (at the left edge when the phone is held sideways) */
body.touch .pvp-combo {
  left: calc(64px + var(--safe-l));
  top: calc(118px + var(--safe-t));
}

/* a short screen (a phone turned sideways): the result in two columns, everything in view */
@media (max-height: 460px) {
  .pvp-res {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-areas: 'banner stats' 'score stats' 'why stats' 'record stats' 'acts stats' 'clock clock';
    align-items: center;
    column-gap: 14px;
    width: min(96vw, 680px);
    padding: 10px 14px;
  }

  .res-banner { grid-area: banner; font-size: 40px; }
  /* (the score on top, the two names under it: each name has half the column, not a third) */
  .res-score { grid-area: score; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 0; column-gap: 8px; }
  .res-score b { grid-column: 1 / -1; grid-row: 1; justify-self: center; font-size: 26px; }
  .res-score span { grid-row: 2; }
  .res-why { grid-area: why; }
  .res-stats { grid-area: stats; font-size: 12px; }
  .res-stats td, .res-stats th { padding: 2px 4px; }
  .res-record { grid-area: record; text-align: center; font-size: 11px; }
  .res-acts { grid-area: acts; }
  .res-clock { grid-area: clock; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 560px), (max-height: 420px) {
  .pvp-face {
    display: none;
  }

  .pvp-name b {
    font-size: 13px;
  }

  .pvp-name small {
    display: none;
  }

  .pvp-bar {
    height: 16px;
  }

  .pvp-bar .num {
    font-size: 10px;
  }

  .pvp-mid {
    min-width: 50px;
    padding: 0 6px 2px;
  }

  .pvp-time {
    font-size: 24px;
  }

  .pvp-quit {
    top: calc(58px + var(--safe-t));
  }

  .pvp-quit-ask {
    top: calc(84px + var(--safe-t));
  }

  .pvp-count,
  .pvp-word {
    font-size: 84px;
  }

  .pvp-word.fight {
    font-size: 96px;
  }

  .pvp-word.ko {
    font-size: 104px;
  }

  .vs-word {
    font-size: 52px;
  }

  .vs-card .skill-avatar {
    width: 72px;
  }

  .vs-card b {
    font-size: 17px;
  }

  .vs-card small {
    font-size: 11px;
  }

  .pvp-banner b {
    font-size: 28px;
  }

  .pvp-danger b {
    font-size: 26px;
  }

  .pvp-combo b {
    font-size: 34px;
  }

  .pvp-potion {
    width: 56px;
    height: 56px;
  }

  .res-banner {
    font-size: 40px;
  }

  /* (under "ยอมแพ้", which ends at 82 px) */
  .pvp-edge b {
    top: calc(88px + var(--safe-t));
  }
}

/* less motion asked for: the words just come and go, nothing slams or slides */
@media (prefers-reduced-motion: reduce) {
  .pvp-count,
  .pvp-word,
  .pvp-banner,
  .pvp-danger {
    animation-name: pvp-fade-only;
  }

  .vs-card,
  .vs-word,
  .pvp-combo.bump {
    animation: none;
  }

  .pvp-res {
    animation: fade-in 0.2s;
  }

  @keyframes pvp-fade-only {
    0% { opacity: 0; }
    15%, 85% { opacity: 1; }
    100% { opacity: 0; }
  }
}