/* «Профиль соперника» — the screen behind a rival's name.

   Geometry and copy are the console mock's `opponent` screen, copied value for
   value where the block exists in this product: the header card, the personal
   tally leading the page at 34px while the ratings sit in an 11px row, the
   dashed «чего здесь нет» card. The mock writes its styles inline with exact
   pixels; a port that guesses is a port that drifts, so each block names the
   mock's declaration it mirrors.

   Written narrow-first (the mock's phone block), with the desktop's two
   columns — `minmax(0,1fr) 300px` — arriving under @container scene, never
   @media: at a 1280px window the scene is ~858px (see shell.css § WINDOW
   CLASSES), and the console's own budget says two columns need >= 900. */

.opp-view {
  display: flex;
  flex-direction: column;
  gap: 11px; /* mock (phone): gap:11px */
  min-width: 0;
}

/* ── Header card ──────────────────────────────────────────────────────────
   mock: padding:13px; border-radius:15px; border rgba(167,139,250,.24);
   background linear-gradient(115deg, rgba(34,22,60,.82), rgba(18,12,34,.6)) */
.opp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--t-violet), 0.24);
  background: linear-gradient(115deg, rgba(34, 22, 60, 0.82), rgba(18, 12, 34, 0.6));
}
/* mock (phone): 46px well, radius 14, font 22; desktop grows to 56/16/26. */
.opp-head-av {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: linear-gradient(135deg, #241638, #120c22);
  border: 1px solid rgba(var(--t-violet), 0.32);
}
.opp-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opp-head-name-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
/* mock (phone): Unbounded 15px 800; desktop 21px. */
.opp-head-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The nickname is a verdict, not a medal — quoted, lowercase, never metal. */
.opp-head-nick {
  font-size: 11px;
  font-weight: 600;
  color: var(--violet-300);
}
.opp-head-sub { font-size: 10px; color: var(--text-soft); }
.opp-head-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 2px;
}
/* mock chip: padding 6px 11px, radius 9, font 10/700, toned border+wash. */
.opp-chip {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(var(--t-gold), 0.34);
  background: rgba(var(--t-gold), 0.09);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
}
.opp-chip.is-clan {
  border-color: rgba(var(--t-violet), 0.34);
  background: rgba(var(--t-violet), 0.09);
  color: var(--violet-300);
}
/* mock back button: min-height 40, padding 11/15, radius 11, violet hairline. */
.opp-back {
  white-space: nowrap;
  min-height: 44px;
  padding: 11px 15px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-violet), 0.26);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  transition: 0.16s;
}
@media (hover: hover) {
  .opp-back:hover { border-color: rgba(var(--t-gold), 0.5); color: var(--gold); }
}

/* ── Cards ────────────────────────────────────────────────────────────────
   mock opp.card: flex column, gap 9, padding 14px 15px, radius 15,
   border rgba(167,139,250,.18), background rgba(20,13,38,.44). */
.opp-cols {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.opp-col {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
}
.opp-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 15px;
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  background: rgba(20, 13, 38, 0.44);
}
/* mock secStyle: Unbounded 10px 700, .1em tracking, uppercase, faded gold. */
.opp-sec {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-gold), 0.72);
}

/* ── «Личные встречи» ────────────────────────────────────────────────────
   mock h2hScoreStyle: Unbounded 34px 800, ok when leading, danger when not. */
.opp-score-line { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.opp-score {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}
.opp-score.is-up { color: var(--ok); }
.opp-score.is-down { color: var(--danger-soft); }
.opp-score-sub { font-size: 10px; color: var(--text-soft); text-wrap: pretty; }
.opp-h2h-list { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
/* mock h2h row: flex, gap 12, padding 11px 13px, radius 12, toned by outcome. */
.opp-h2h-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(var(--t-mute), 0.22);
  background: rgba(var(--t-mute), 0.05);
}
.opp-h2h-row.is-up { border-color: rgba(var(--t-ok), 0.22); background: rgba(var(--t-ok), 0.05); }
.opp-h2h-row.is-down { border-color: rgba(var(--t-danger), 0.22); background: rgba(var(--t-danger), 0.05); }
.opp-h2h-icon { font-size: 14px; line-height: 1; flex: 0 0 auto; }
.opp-h2h-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opp-h2h-game { font-size: 11px; font-weight: 700; color: rgba(var(--t-mute), 0.88); }
.opp-h2h-last { font-size: 9px; color: rgba(var(--t-mute), 0.42); }
/* mock scoreStyle: mono 15px 800 in the row's tone. */
.opp-h2h-score {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--text-dim);
}
.opp-h2h-row.is-up .opp-h2h-score { color: var(--ok); }
.opp-h2h-row.is-down .opp-h2h-score { color: var(--danger-soft); }
.opp-fresh {
  font-family: var(--font-mono);
  font-size: 17px; /* mock (fresh): 17px against the 34px real score */
  font-weight: 800;
  color: rgba(var(--t-mute), 0.6);
}
.opp-fresh-note { font-size: 10px; line-height: 1.55; color: var(--text-soft); text-wrap: pretty; }

/* ── «Видно только здесь» ── mock: 11px/1.55 lines at .72. */
.opp-truth-line { font-size: 11px; line-height: 1.55; color: rgba(var(--t-mute), 0.72); text-wrap: pretty; }

/* ── «Рейтинги по играм» ── mock row: flex gap 10; val mono 13px 800. */
.opp-rate-list { display: flex; flex-direction: column; gap: 8px; }
.opp-rate-row { display: flex; align-items: center; gap: 10px; }
.opp-rate-icon { font-size: 13px; line-height: 1; flex: 0 0 auto; }
.opp-rate-game { flex: 1; min-width: 0; font-size: 11px; color: rgba(var(--t-mute), 0.66); }
.opp-rate-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 800;
  color: rgba(var(--t-mute), 0.9);
}
/* mock: a calibrating value is dimmed, not printed as a number. */
.opp-rate-val.is-cal { color: rgba(var(--t-mute), 0.4); font-weight: 700; font-size: 11px; }
.opp-rate-delta { font-size: 10px; font-weight: 700; white-space: nowrap; }
.opp-rate-delta.is-danger { color: var(--danger-soft); }
.opp-rate-delta.is-ok { color: var(--ok); }
.opp-empty-line { font-size: 10px; line-height: 1.5; color: var(--text-soft); text-wrap: pretty; }

/* ── «На имени» ── the worn marks; well geometry from the mock's showcase. */
.opp-worn-list { display: flex; flex-direction: column; gap: 8px; }
.opp-worn-row { display: flex; align-items: center; gap: 10px; }
.opp-worn-glyph {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: 14px;
  background: rgba(var(--t-gold), 0.1);
  border: 1px solid rgba(var(--t-gold), 0.26);
}
.opp-worn-glyph.is-bare { color: var(--text-faint); }
.opp-worn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.opp-worn-label { font-size: 11px; font-weight: 700; color: rgba(var(--t-mute), 0.85); }
.opp-worn-kind { font-size: 9px; color: rgba(var(--t-mute), 0.4); }

/* ── «Общее с тобой» ── mock: 11px/1.5 at .66. */
.opp-common-line { font-size: 11px; line-height: 1.5; color: rgba(var(--t-mute), 0.66); text-wrap: pretty; }

/* ── «Сыграть ещё» ── mock challenge card: gold border, warm gradient wash. */
.opp-play {
  border-color: rgba(var(--t-gold), 0.3);
  background: linear-gradient(150deg, rgba(52, 36, 14, 0.5), rgba(20, 13, 38, 0.5));
}
.opp-play-games { display: flex; gap: 6px; flex-wrap: wrap; }
/* mock game chip: flex, gap 7, padding 9/12, radius 11, min-height 44. */
.opp-play-game {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid rgba(var(--t-gold), 0.16);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  transition: 0.16s;
}
@media (hover: hover) {
  .opp-play-game:hover {
    border-color: rgba(var(--t-gold), 0.5);
    background: rgba(var(--t-gold), 0.13);
    color: var(--gold);
  }
}
.opp-play-icon { font-size: 13px; line-height: 1; }
.opp-play-name { min-width: 0; }
.opp-play-note { font-size: 9px; line-height: 1.5; color: rgba(var(--t-mute), 0.44); text-wrap: pretty; }

/* ── «Чего здесь нет» ── mock: dashed danger hairline over a dark red wash. */
.opp-cant {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px dashed rgba(var(--t-danger), 0.24);
  background: rgba(30, 14, 22, 0.38);
}
.opp-cant-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 138, 148, 0.8);
}
.opp-cant-item { display: flex; flex-direction: column; gap: 3px; }
.opp-cant-label { font-size: 10px; font-weight: 800; color: rgba(var(--t-mute), 0.72); }
.opp-cant-why { font-size: 9px; line-height: 1.45; color: rgba(var(--t-mute), 0.42); text-wrap: pretty; }

/* ── The door drawn on OTHER screens ─────────────────────────────────────
   Rival rows («Счёты»), leaderboard rows and the archive's opponent line all
   keep their own row classes; this only makes the swapped-in <button> read as
   the text it replaced (base.css already strips button chrome) and gives the
   pointer an affordance. data-tight on the callers keeps the 44px floor from
   ballooning a 12px name inside a dense row. */
.opp-door { text-align: left; cursor: pointer; }
@media (hover: hover) {
  .opp-door:hover { color: var(--gold); text-decoration: underline dotted; text-underline-offset: 3px; }
}

/* ── Desktop ── mock: header 15px 17px, avatar 56/16/26, name 21px; body grid
   minmax(0,1fr) 300px with 12px gap. */
@container scene (min-width: 900px) {
  .opp-head { padding: 15px 17px; gap: 15px; border-radius: 17px; }
  .opp-head-av { width: 56px; height: 56px; border-radius: 16px; font-size: 26px; }
  .opp-head-name { font-size: 21px; }
  .opp-head-sub { font-size: 11px; }
  .opp-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 12px;
    align-items: start;
  }
}