/* 50vs50 — ARCADE V3: living floor, duel theatre, tactile clicks */
html.av2 #av2bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #05060c;
}
html.av2 #av2bg .blob {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .42;
  will-change: transform;
}
html.av2 #av2bg .b1 { background: #1e6bff; left: -18vmax; top: -24vmax; animation: av3drift1 22s ease-in-out infinite alternate; }
html.av2 #av2bg .b2 { background: #ff2e88; right: -22vmax; top: -16vmax; animation: av3drift2 27s ease-in-out infinite alternate; opacity: .3; }
html.av2 #av2bg .b3 { background: #8b5cff; left: 18vmax; bottom: -32vmax; animation: av3drift3 31s ease-in-out infinite alternate; opacity: .32; }
html.av2 #av2bg .b4 { background: #17e0b4; right: -12vmax; bottom: -26vmax; animation: av3drift4 25s ease-in-out infinite alternate; opacity: .2; }
html.av2 #av2bg .grain {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000, transparent 78%);
  animation: av3grid 18s linear infinite;
}
html.av2 #av2bg .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(2,3,7,.72) 100%);
}
@keyframes av3drift1 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(12vmax,8vmax,0) scale(1.16); } }
@keyframes av3drift2 { 0% { transform: translate3d(0,0,0) scale(1.1); } 100% { transform: translate3d(-10vmax,12vmax,0) scale(.95); } }
@keyframes av3drift3 { 0% { transform: translate3d(0,0,0) scale(.95); } 100% { transform: translate3d(8vmax,-10vmax,0) scale(1.12); } }
@keyframes av3drift4 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-12vmax,-6vmax,0) scale(1.2); } }
@keyframes av3grid { to { background-position: 44px 44px, 44px 44px; } }

html.av2 #top { background: rgba(7,8,14,.64) !important; backdrop-filter: blur(26px) saturate(150%) !important; }
html.av2 #av2music {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid var(--av2-line2);
  background: rgba(255,255,255,.045);
  color: var(--av2-muted);
  font-family: var(--av2-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}
html.av2 #av2music .eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
html.av2 #av2music .eq i { width: 2px; background: currentColor; height: 4px; border-radius: 2px; animation: av3eq 1s ease-in-out infinite; }
html.av2 #av2music .eq i:nth-child(2) { animation-delay: .18s; height: 8px; }
html.av2 #av2music .eq i:nth-child(3) { animation-delay: .36s; height: 6px; }
html.av2 #av2music .eq i:nth-child(4) { animation-delay: .54s; height: 10px; }
html.av2 #av2music.on { color: var(--av2-lime); border-color: rgba(198,255,74,.3); background: rgba(198,255,74,.07); }
@keyframes av3eq { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
html.av2 #av2music:not(.on) .eq i { animation-play-state: paused; opacity: .45; }

/* ---------- duel theatre ---------- */
html.av2 #av2stage {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(2,3,8,.74);
  backdrop-filter: blur(18px) saturate(120%);
}
html.av2 #av2stage.on { display: flex; animation: av3fade .3s ease both; }
@keyframes av3fade { from { opacity: 0; } to { opacity: 1; } }
html.av2 .av3-stage-card {
  width: min(100%, 640px);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(500px 260px at 50% -20%, rgba(67,231,255,.14), transparent 65%),
    radial-gradient(420px 240px at 100% 100%, rgba(255,61,139,.14), transparent 65%),
    linear-gradient(155deg, #111525, #07090f 68%);
  box-shadow: 0 40px 120px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 18px;
  overflow: hidden;
  position: relative;
}
html.av2 .av3-stage-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent);
  transform: translateX(-100%);
  animation: av3sweep 4.5s linear infinite;
}
@keyframes av3sweep { to { transform: translateX(100%); } }
html.av2 .av3-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  z-index: 2;
}
html.av2 .av3-stage-head .k {
  font-family: var(--av2-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--av2-pink);
}
html.av2 .av3-stage-head .pot {
  font-family: var(--av2-num);
  font-size: 25px;
  color: var(--av2-gold);
  letter-spacing: .02em;
}
html.av2 .av3-fighters {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
  align-items: center;
  margin: 18px 0 12px;
  position: relative;
  z-index: 2;
}
html.av2 .av3-fighter { text-align: center; min-width: 0; }
html.av2 .av3-avatar {
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--av2-display);
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
html.av2 .av3-fighter.a .av3-avatar { border-color: rgba(67,231,255,.4); color: var(--av2-cyan); }
html.av2 .av3-fighter.b .av3-avatar { border-color: rgba(255,61,139,.4); color: var(--av2-pink); }
html.av2 .av3-fighter .n {
  font-family: var(--av2-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.av2 .av3-fighter .s { font-family: var(--av2-ui); font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--av2-dim); margin-top: 2px; }
html.av2 .av3-fighter.win .av3-avatar {
  border-color: var(--av2-lime);
  box-shadow: 0 0 0 3px rgba(198,255,74,.12), 0 0 28px rgba(198,255,74,.45);
  transform: translateY(-3px) scale(1.06);
}
html.av2 .av3-fighter.lose { opacity: .45; filter: saturate(.4); }
html.av2 .av3-center {
  position: relative;
  height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
html.av2 .av3-vs {
  font-family: var(--av2-num);
  font-size: 16px;
  color: var(--av2-dim);
  letter-spacing: .1em;
}
html.av2 .av3-status {
  font-family: var(--av2-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--av2-muted);
  text-align: center;
  position: relative;
  z-index: 2;
  min-height: 16px;
}
html.av2 .av3-progress {
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  z-index: 2;
}
html.av2 .av3-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--av2-cyan), var(--av2-lime));
  border-radius: inherit;
  transition: width .4s linear;
}
html.av2 .av3-result {
  display: none;
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 14px 10px 2px;
}
html.av2 .av3-stage-card.done .av3-result { display: block; animation: av3pop .4s cubic-bezier(.2,1.4,.3,1) both; }
html.av2 .av3-result .label { font-family: var(--av2-ui); font-size: 8px; font-weight: 800; letter-spacing: .24em; color: var(--av2-muted); }
html.av2 .av3-result .winner {
  font-family: var(--av2-display);
  font-size: clamp(24px, 6vw, 36px);
  font-weight: 700;
  color: var(--av2-lime);
  margin: 6px 0 3px;
  text-shadow: 0 0 28px rgba(198,255,74,.4);
}
html.av2 .av3-result .amount { font-family: var(--av2-num); font-size: 30px; color: var(--av2-gold); }
html.av2 .av3-result button {
  margin-top: 12px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 0;
  font-family: var(--av2-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  background: linear-gradient(135deg, var(--av2-lime), #8ee62e);
  color: #0b1003;
  box-shadow: 0 8px 24px rgba(198,255,74,.2);
}
@keyframes av3pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }

/* coin */
html.av2 .av3-coin {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 5px solid #c99411;
  background:
    radial-gradient(circle at 34% 28%, #fff9cf, #ffd358 40%, #e1a400 70%, #8d6100 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.65);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--av2-num); font-size: 44px; color: #785100;
  transform-style: preserve-3d;
  animation: av3coin 1.3s cubic-bezier(.2,.8,.3,1) infinite;
  position: relative;
}
html.av2 .av3-coin::after { content: "◎"; font-size: 30px; opacity: .45; position: absolute; }
@keyframes av3coin {
  0%, 100% { transform: translateY(0) rotateY(0) rotateZ(-4deg); }
  25% { transform: translateY(-24px) rotateY(540deg) rotateZ(3deg); }
  50% { transform: translateY(0) rotateY(1080deg) rotateZ(-2deg); }
  75% { transform: translateY(-14px) rotateY(1620deg) rotateZ(2deg); }
}
html.av2 .av3-stage-card.done .av3-coin { animation: none; transform: rotateY(0) scale(1.04); }
/* dice */
html.av2 .av3-dice { display: flex; gap: 14px; }
html.av2 .av3-die {
  width: 66px; height: 66px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8f4e8, #cfd7df);
  border: 1px solid rgba(0,0,0,.3);
  box-shadow: 0 12px 28px rgba(0,0,0,.4), inset 0 2px 0 #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--av2-display); font-size: 34px; font-weight: 700; color: #131a24;
  animation: av3dice 1s ease-in-out infinite;
}
html.av2 .av3-die:nth-child(2) { animation-delay: .16s; animation-duration: .82s; }
@keyframes av3dice {
  0%,100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-18px) rotate(11deg); }
}
/* wheel */
html.av2 .av3-wheel {
  width: 138px; height: 138px; border-radius: 50%;
  border: 6px solid #b88d19;
  background: conic-gradient(#ff3d8b 0 45deg, #8b6bff 45deg 90deg, #43e7ff 90deg 135deg, #c6ff4a 135deg 180deg, #ff3d8b 180deg 225deg, #8b6bff 225deg 270deg, #43e7ff 270deg 315deg, #c6ff4a 315deg 360deg);
  box-shadow: 0 0 0 3px rgba(255,255,255,.15), 0 18px 40px rgba(0,0,0,.5), inset 0 0 30px rgba(0,0,0,.35);
  position: relative;
  animation: av3wheel 1.8s linear infinite;
}
html.av2 .av3-wheel::after {
  content: ""; position: absolute; inset: 36%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff9cf, #ffd358 55%, #9a6b00);
  border: 2px solid #6f4d00;
}
html.av2 .av3-wheel::before {
  content: ""; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid var(--av2-lime);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
@keyframes av3wheel { to { transform: rotate(360deg); } }
html.av2 .av3-stage-card.done .av3-wheel { animation-duration: 4s; }
/* team */
html.av2 .av3-teams { display: flex; align-items: center; gap: 14px; }
html.av2 .av3-team { display: flex; flex-direction: column; gap: 4px; align-items: center; }
html.av2 .av3-team .chip { width: 34px; height: 22px; border-radius: 6px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; font-family: var(--av2-ui); font-size: 7px; color: var(--av2-muted); }
html.av2 .av3-team.red .chip { border-color: rgba(255,61,139,.35); background: rgba(255,61,139,.12); color: #ff9bc4; }
html.av2 .av3-team.blue .chip { border-color: rgba(67,231,255,.35); background: rgba(67,231,255,.10); color: #8ef2ff; }
html.av2 .av3-team .score { font-family: var(--av2-num); font-size: 28px; color: #fff; }
html.av2 .av3-team.red .score { color: var(--av2-pink); }
html.av2 .av3-team.blue .score { color: var(--av2-cyan); }
html.av2 .av3-team .vsline { font-family: var(--av2-num); color: var(--av2-dim); font-size: 18px; }

/* tactile clicks */
html.av2 button, html.av2 .tile, html.av2 .av2-game-card, html.av2 .av2-arena-card, html.av2 .duel-card {
  position: relative;
  overflow: hidden;
}
html.av2 .av3-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 65%);
  animation: av3ripple .55s ease-out forwards;
  z-index: 5;
}
@keyframes av3ripple { to { transform: scale(2.6); opacity: 0; } }
html.av2 button:active, html.av2 .tile:active, html.av2 .av2-game-card:active, html.av2 .av2-arena-card:active, html.av2 .duel-card:active {
  transform: scale(.975);
  transition: transform .08s ease;
}
html.av2 .av2-game-card:hover, html.av2 .tile:hover { border-color: rgba(198,255,74,.28) !important; }

@media (prefers-reduced-motion: reduce) {
  html.av2 #av2bg .blob,
  html.av2 #av2bg .grain,
  html.av2 .av3-coin,
  html.av2 .av3-die,
  html.av2 .av3-wheel { animation: none !important; }
}
@media (max-width: 480px) {
  html.av2 #av2music { padding: 0 8px; }
  html.av2 #av2music .lbl { display: none; }
  html.av2 .av3-stage-card { padding: 14px; border-radius: 20px; }
  html.av2 .av3-fighters { grid-template-columns: 1fr 1.15fr 1fr; gap: 4px; }
  html.av2 .av3-avatar { width: 44px; height: 44px; font-size: 14px; }
  html.av2 .av3-center { height: 148px; }
  html.av2 .av3-coin { width: 78px; height: 78px; font-size: 34px; }
  html.av2 .av3-die { width: 54px; height: 54px; font-size: 28px; }
  html.av2 .av3-wheel { width: 112px; height: 112px; }
  html.av2 .av3-fighter .n { font-size: 10px; }
}

/* ---------- layering + final stage polish ---------- */
html.av2 #magicbg { z-index: 1 !important; opacity: .22 !important; }
html.av2 #av2bg { z-index: 0; }
html.av2 #win { z-index: 2; }
html.av2 #av2stage .av3-stage-card { max-height: 88dvh; overflow-y: auto; }
html.av2 #av2stage .av3-result button { cursor: pointer; }
html.av2 #av2stage .av3-result button:active { transform: scale(.97); }
html.av2 .av3-stage-card.done .av3-center { opacity: .35; transform: scale(.94); transition: all .5s ease; }
html.av2 .av3-stage-card.done .av3-fighter { opacity: .55; }
html.av2 .av3-stage-card.done .av3-fighter.win { opacity: 1; }

/* stage close + preview polish */
html.av2 .av3-stage-head { align-items: center; }
html.av2 .av3-close {
  width: 30px;
  height: 30px;
  margin-left: 8px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--av2-muted);
  font-family: var(--av2-ui);
  font-size: 16px;
  line-height: 1;
}
html.av2 .av3-close:active { transform: scale(.94); }

/* desktop shell width fix + final spacing */
@media (min-width: 760px) {
  html.av2 #win {
    width: 100% !important;
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html.av2 #main { max-width: 1120px !important; margin: 0 auto !important; }
  html.av2 .av2-arena-card { padding: 24px !important; }
  html.av2 .av2-arena-card h3 { font-size: 32px !important; }
  html.av2 .av2-game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.av2 #view-home .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* build tag */
html.av2 .av3-build {
  font-family: var(--av2-display);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--av2-lime);
  border: 1px solid rgba(198,255,74,.3);
  background: rgba(198,255,74,.07);
  border-radius: 6px;
  padding: 2px 5px;
  margin-left: 8px;
  transform: translateY(-8px);
}