/* Online PvP UI (js/pvp.js on the battle board, js/pvp-lobby.js in the lobby). Sizes in --u (1% of the 16:9 frame
   height, css/landscape.css); no raw vw / vh (the page may be rotated, see js/orient.js). */
:root { --pvp-blue: #2b6bff; --pvp-ink: #23314d; --pvp-ink2: #5b6785; --pvp-gold: #ffd25a; }

/* ---------- battle board overlay: searching / found / waiting ---------- */
.pvp-overlay { position: absolute; inset: 0; z-index: 46; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(61, 123, 255, 0.35), rgba(16, 26, 51, 0.82) 70%); backdrop-filter: blur(3px);
  font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; color: var(--pvp-ink); animation: pvpIn 0.28s ease-out; }
.pvp-overlay.out { animation: pvpOut 0.26s forwards; }
@keyframes pvpIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pvpOut { to { opacity: 0; } }
.pvp-card { width: calc(var(--u) * 64); max-width: 92%; padding: calc(var(--u) * 4) calc(var(--u) * 5); border-radius: calc(var(--u) * 4);
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(10, 20, 50, 0.35);
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); text-align: center; }
.pvp-overlay.slim .pvp-card { width: calc(var(--u) * 54); }
.pvp-eyebrow { font-size: max(10px, calc(var(--u) * 2.1)); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pvp-blue); }
.pvp-title { font-size: max(16px, calc(var(--u) * 3.6)); font-weight: 700; line-height: 1.15; }
.pvp-sub { margin: 0; font-size: max(12px, calc(var(--u) * 2.3)); line-height: 1.4; color: var(--pvp-ink2); }
.pvp-meta { display: flex; gap: calc(var(--u) * 3); font-size: max(11px, calc(var(--u) * 2.2)); font-weight: 600; color: var(--pvp-ink2); font-variant-numeric: tabular-nums; }

.pvp-radar { position: relative; width: calc(var(--u) * 22); height: calc(var(--u) * 22); display: grid; place-items: center; }
.pvp-radar i { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * 0.5) solid rgba(43, 107, 255, 0.55); animation: pvpPing 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.pvp-radar i:nth-child(2) { animation-delay: 0.8s; }
.pvp-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes pvpPing { from { transform: scale(0.45); opacity: 1; } to { transform: scale(1.05); opacity: 0; } }
.pvp-av { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #dfe7ff center 22% / 160% no-repeat;
  border: calc(var(--u) * 0.6) solid #fff; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgba(30, 50, 110, 0.3);
  display: inline-grid; place-items: center; font-weight: 700; font-size: calc(var(--u) * 4.5); color: var(--pvp-blue); position: relative; z-index: 1; flex: none; }
.pvp-av.wait { animation: pvpPulse 1.4s ease-in-out infinite; }
@keyframes pvpPulse { 50% { transform: scale(0.93); opacity: 0.6; } }
.pvp-pair { display: flex; align-items: center; gap: calc(var(--u) * 3); }
.pvp-pair.found .pvp-av:last-child { animation: pvpSlide 0.5s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pvpSlide { from { transform: translateX(calc(var(--u) * 10)) scale(0.6); opacity: 0; } }
.pvp-vs { font-size: calc(var(--u) * 4.4); font-weight: 800; font-style: italic; color: var(--pvp-gold); text-shadow: 0 2px 0 #c58a00; }

.pvp-range { width: 100%; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.8); font-size: max(12px, calc(var(--u) * 2.4)); font-weight: 700; }
.pvp-range small { font-size: max(10px, calc(var(--u) * 1.8)); font-weight: 500; color: var(--pvp-ink2); }
.pvp-bar { width: 78%; height: calc(var(--u) * 1.2); border-radius: 99px; background: #e7ecf8; overflow: hidden; }
.pvp-bar i { display: block; height: 100%; min-width: 6%; border-radius: inherit; background: linear-gradient(90deg, #3d7bff, #7aa2ff); transition: width 0.6s ease; }

.pvp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: calc(var(--u) * 1.2) calc(var(--u) * 4.5);
  border: 0; border-radius: 99px; background: linear-gradient(180deg, #3d7bff, #2a5ef0); color: #fff; font: inherit; font-weight: 700;
  font-size: max(13px, calc(var(--u) * 2.4)); text-decoration: none; cursor: pointer; box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(47, 107, 255, 0.3); }
.pvp-btn.pvp-ghost { background: #eef2fb; color: var(--pvp-ink); box-shadow: none; }
.pvp-btn.sm { min-height: 34px; padding: calc(var(--u) * 0.8) calc(var(--u) * 2.6); font-size: calc(var(--u) * 2.1); }
.pvp-spin { width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; border: calc(var(--u) * 0.8) solid #dfe7ff; border-top-color: var(--pvp-blue); animation: pvpSpin 0.9s linear infinite; }
@keyframes pvpSpin { to { transform: rotate(360deg); } }

/* ---------- in-match banner: reconnecting / opponent disconnected / syncing ---------- */
.pvp-banner { position: absolute; z-index: 30; left: 50%; top: calc(var(--u) * 2); transform: translate(-50%, -150%); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: calc(var(--u) * 1.2); padding: calc(var(--u) * 1) calc(var(--u) * 2.8); border-radius: 99px;
  background: rgba(255, 255, 255, 0.97); color: var(--pvp-ink); font: 700 max(12px, calc(var(--u) * 2.2)) 'Gilroy', 'M PLUS 1p', system-ui, sans-serif;
  box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2) rgba(20, 30, 70, 0.25); transition: transform 0.3s, opacity 0.3s; white-space: nowrap; }
.pvp-banner.show { transform: translate(-50%, 0); opacity: 1; }
.pvp-banner i { width: calc(var(--u) * 1.4); height: calc(var(--u) * 1.4); border-radius: 50%; background: var(--pvp-blue); animation: pvpPulse 1s infinite; }
.pvp-banner.warn i { background: #ff8a3d; }

/* ---------- deck modal note + results chip ---------- */
.pvp-note { margin: 0 0 calc(var(--u) * 1.2); padding: calc(var(--u) * 1) calc(var(--u) * 2); border-radius: calc(var(--u) * 1.6); font-size: max(11px, calc(var(--u) * 2)); line-height: 1.35; }
.pvp-note.on { background: #e9f0ff; color: #2347b8; }
.pvp-note.off { background: #fff4e5; color: #8a5300; }
.pvp-res-chip { margin-top: calc(var(--u) * 1); font-size: max(11px, calc(var(--u) * 1.9)); font-weight: 600; padding: calc(var(--u) * 0.7) calc(var(--u) * 2); border-radius: 99px; background: #fff; color: #59647d; align-self: center; }

/* ---------- lobby: friend picker sheet + invite card ---------- */
.pvp-sheet { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(16, 26, 51, 0.55);
  font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; color: var(--pvp-ink); }
.pvp-sheet.hidden { display: none; }
.pvp-panel { position: relative; width: calc(var(--u) * 78); max-width: 94%; max-height: 86%; overflow: auto; padding: calc(var(--u) * 3.5) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 3.5); background: #fff; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(10, 20, 50, 0.35);
  display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); }
.pvp-panel h3 { margin: 0; font-size: calc(var(--u) * 3.6); }
.pvp-panel .pvp-spin { align-self: center; }
.pvp-x { position: absolute; top: calc(var(--u) * 1.6); right: calc(var(--u) * 1.6); width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eef2fb; color: var(--pvp-ink2); font-size: 16px; cursor: pointer; }
.pvp-list { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.pvp-row { display: flex; align-items: center; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2); background: #f4f6fc; }
.pvp-row.hi { background: #e9f0ff; }
.pvp-row > span:not(.pvp-av), .pvp-invite > span:not(.pvp-av) { flex: 1; display: flex; flex-direction: column; min-width: 0; font-size: calc(var(--u) * 2.4); }
.pvp-row small, .pvp-invite small { font-size: calc(var(--u) * 1.9); color: var(--pvp-ink2); font-weight: 500; }
.pvp-av.sm { width: calc(var(--u) * 6.5); height: calc(var(--u) * 6.5); font-size: calc(var(--u) * 2.8); border-width: calc(var(--u) * 0.35); }
.pvp-invite { position: absolute; z-index: 59; right: calc(var(--u) * 3); bottom: calc(var(--u) * 3); display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  width: calc(var(--u) * 62); padding: calc(var(--u) * 1.6) calc(var(--u) * 2); border-radius: calc(var(--u) * 2.6); background: #fff; color: var(--pvp-ink);
  font-family: 'Gilroy', 'M PLUS 1p', system-ui, sans-serif; box-shadow: 0 calc(var(--u) * 1.4) calc(var(--u) * 4) rgba(20, 30, 70, 0.3);
  transform: translateY(calc(var(--u) * 30)); opacity: 0; transition: transform 0.35s cubic-bezier(.2, .9, .3, 1.15), opacity 0.3s; pointer-events: none; }
.pvp-invite.show { transform: none; opacity: 1; pointer-events: auto; }
.pvp-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ff4d5e; color: #fff;
  font: 700 12px/20px 'Gilroy', system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 2px 6px rgba(255, 77, 94, 0.45); }
[data-mode="friend"] { position: relative; }