/* ============================================================
   PVP screen (Ranked + Attack / Defence) — "Forged Lantern". Loaded after
   ui-pve.css: it reuses .pveHead / .pveTabs / .pveTab (the .active class the
   PVP handlers toggle is styled there too) and the shared team bar (.teamBar /
   .teamFaces / .tf, built by ui/team-bar.js's drawTeamBar).
   Cursors: never a bare value (CLAUDE.md §4). No backdrop-filter (scroll
   performance, CLAUDE.md §7).
   ============================================================ */

/* ---------- head: tabs | Attack-Defence switch | stat chip ---------- */
.pveHead.pvpHead{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 24px; }
.pvpStats{ margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.pvpStats .stat{
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--c-line); background: hsl(var(--h) 16% 8% / .8); color: var(--c-dim); font: 600 .85rem var(--f-body);
}
.pvpStats .stat b{ color: var(--accent-hi); font: 700 1rem var(--f-display); }
.pvpStats .stat.hidden{ display: none; }

/* ---------- labelled field ---------- */
.fld{ display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld label{ font: 600 .75rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--c-dim); }
.fld .dd{ width: 100%; flex: none; }
.fld input[type="number"]{
  min-height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-text); font: 500 1rem var(--f-body); width: 100%;
}
.fld input[type="number"]:focus{ outline: none; border-color: var(--accent-hi); }

/* ---------- Ranked / Defence: team bar left, launch card right ---------- */
.pvpRank{ display: grid; grid-template-columns: auto minmax(300px, 420px); justify-content: start; gap: clamp(40px, 7vw, 140px); align-items: start; }
.pvpRank .teamBar{ min-width: 0; }
.queueCard{
  display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 28px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82);
}
.queueCard button{ width: 100%; min-height: 48px; }
.queueCard .hint{ margin: 0; }
.qTimer{ display: flex; align-items: center; gap: 12px; font: 700 1.15rem var(--f-display); color: var(--accent-hi); }
.qTimer:empty{ display: none; }
.qTimer::before{
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid hsl(var(--h) 40% 60% / .3); border-top-color: var(--accent-hi); animation: pvpSpin 1s linear infinite;
}
.qMax:empty{ display: none; }
@keyframes pvpSpin{ to{ transform: rotate(360deg); } }
.pvpUpd{ margin-bottom: 26px; }

/* ---------- Attack: team + filters, then the opponents ---------- */
.pvpAtk{ display: grid; grid-template-columns: auto minmax(0, 720px); justify-content: start; gap: clamp(30px, 5vw, 90px); align-items: start; margin-bottom: 6px; }
.pvpFilters{ display: flex; align-items: flex-end; gap: 12px 14px; flex-wrap: wrap; padding-top: 6px; }
.pvpFilters .fld{ width: min(150px, 100%); }
.pvpFilters .pveTabs{ margin: 0; }
.pvpAtk .pveHint{ margin: 10px 0 6px; }
#pvpAttackHint{ margin: 10px 0 14px; }
.oGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(230px, 19vw, 290px), 1fr)); gap: 16px; }
.oCard{
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 24px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82);
}
.oCard header{ display: flex; align-items: center; justify-content: flex-start; gap: 12px; border: 0; margin: 0; padding: 0; }
.oCard header b{ display: block; font: 700 1.2rem/1.15 var(--f-display); color: var(--c-text); }
.oCard header small{ color: var(--c-dim); font: 500 .85rem var(--f-body); }
.gmIc{
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; font-size: 1.2rem;
  border: 1px solid var(--c-line); background: hsl(var(--h) 20% 12%);
}
.oChips{ display: flex; gap: 8px; flex-wrap: wrap; }
.oChips .chip{
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font: 600 .8rem var(--f-body); color: var(--c-dim);
  background: hsl(var(--h) 20% 14% / .9); border: 1px solid var(--c-line);
}
.oFaces{ display: flex; gap: 6px; }
.oFaces .face{ display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid hsl(var(--h) 42% 56%); background: #111; flex: none; }
.oFaces .face .heroPortrait{ width: 100%; height: 100%; border-radius: 0; box-shadow: none; object-fit: cover; display: block; }
.oFaces .face.empty{ border: 2px dashed var(--c-line); background: none; }
.oFaces.big .face{ width: clamp(56px, 6vw, 84px); height: clamp(56px, 6vw, 84px); border-width: 3px; }
.oRec{ display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.oRec span{ display: flex; flex-direction: column; }
.oRec small{ color: var(--c-dim); font: 500 .75rem var(--f-body); }
.oRec b{ font: 700 .95rem var(--f-display); color: var(--c-text); }
.oRec .bar{ grid-column: 1 / -1; height: 6px; border-radius: 99px; background: hsl(var(--h) 16% 14%); overflow: hidden; }
.oRec .bar u{ display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.oCard .hint{ margin: 0; }
.oCard button{ width: 100%; min-height: 48px; margin-top: auto; }
.oCard.done{ opacity: .72; }
.oCard.done .hint{ color: var(--accent-hi); }

/* ---------- Defence: the standing team ---------- */
.myDef{
  display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: 28px; border: 1px solid var(--c-line); box-shadow: var(--sh-1);
  background-image: var(--grain), var(--glass-bg); background-color: hsl(var(--h) 16% 8% / .82); margin-bottom: 22px; max-width: 980px;
}
.mdHead{ display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.mdHead small, .mdStats small{ display: block; color: var(--c-dim); font: 600 .75rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.mdHead b{ font: 700 1.4rem var(--f-display); color: var(--c-text); }
.mdStats{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mdStats span{ padding: 12px 14px; border-radius: 18px; background: hsl(var(--h) 18% 12% / .8); border: 1px solid var(--c-line); }
.mdStats b{ font: 700 1.05rem var(--f-display); color: var(--c-text); }
.myDef .hint{ margin: 0; }

/* ---------- phone / tablet portrait ---------- */
@media (max-width: 900px){
  .pveHead.pvpHead{ flex-direction: row; align-items: center; }
  .pvpHead .pveTabs{ align-self: auto; }
  .pvpStats{ margin-left: 0; }
  .pvpStats .stat{ height: 36px; padding: 0 12px; }
  .pvpRank{ grid-template-columns: 1fr; gap: 14px; }
  .pvpAtk{ grid-template-columns: 1fr; gap: 10px; }
  .pvpFilters .fld{ width: calc(50% - 7px); }
  .queueCard{ padding: 14px; border-radius: 24px; background: hsl(var(--h) 14% 8% / .94); }
  .pvpRank > .queueCard{ position: sticky; bottom: 10px; z-index: 5; box-shadow: var(--sh-2); }
  .pvpUpd .queueCard{ position: static; }
  .oGrid{ grid-template-columns: 1fr; }
  .mdStats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){ .qTimer::before{ animation: none; } }