/* X Protocol W2 — Focus completion layer: finish screens and PR flash.
   Loaded after design-w2-focus.css. */

/* S6 — finish and record cards. */
.focus-v2 .s6-col {
  position: absolute; top: 8%; bottom: 2.5%; left: 50%; z-index: 2; display: flex; align-items: center; flex-direction: column; width: 72%; padding-top: var(--w2-s6); transform: translateX(-50%);
}
.focus-v2 .s6-check {
  margin-bottom: var(--w2-s4);
}
.focus-v2 .s6-check svg {
  width: 55%; height: 55%; color: var(--w2-lime);
}
.focus-v2 .s6-title {
  margin-bottom: var(--w2-s2); color: var(--w2-text); font: 700 clamp(24px, 2vw, 40px)/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center;
}
.focus-v2 .s6-title-sub {
  margin-bottom: var(--w2-s5); color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s6-time-wrap {
  display: flex; align-items: center; flex-direction: column; gap: var(--w2-s2); margin-bottom: var(--w2-s6); padding: var(--w2-s3) var(--w2-s6); border: 1px solid rgba(200, 241, 53, .22); border-radius: var(--w2-s3); background: rgba(200, 241, 53, .035);
}
.focus-v2 .s6-time-lbl, .focus-v2 .s6-records-label, .focus-v2 .s6-duo-label {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s6-time-val {
  color: var(--w2-lime); font: 700 clamp(40px, 3.2vw, 64px)/1 'Orbitron', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 0 20px rgba(200, 241, 53, .3);
}
.focus-v2 .s6-records {
  display: flex; align-items: stretch; gap: var(--w2-s3); margin-top: var(--w2-s3);
}
.focus-v2 .s6-record, .focus-v2 .mini-rec {
  position: relative; display: flex; align-items: center; border: 1px solid rgba(255, 215, 64, .3); border-radius: var(--w2-s3); background: rgba(255, 215, 64, .045); box-shadow: 0 0 18px rgba(255, 215, 64, .08);
}
.focus-v2 .s6-record {
  flex-direction: column; min-width: 176px; gap: var(--w2-s2); padding: var(--w2-s5);
}
.focus-v2 .s6-record .rec-ex, .focus-v2 .mini-rec .mini-name {
  color: var(--w2-text-muted); font: 700 12px/1.25 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-transform: uppercase;
}
.focus-v2 .s6-record .rec-val, .focus-v2 .mini-rec .mini-val {
  display: flex; align-items: center; gap: var(--w2-s1); color: var(--w2-text); font: 800 17px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s6-record .rec-delta, .focus-v2 .mini-rec .mini-delta {
  padding: var(--w2-s1) var(--w2-s2); border-radius: var(--w2-s1); color: var(--w2-gold); background: rgba(255, 215, 64, .08); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
}
.focus-v2 .s6-action {
  flex-direction: column;
}
.focus-v2 .s6-action .btn-primary {
  display: flex; align-items: center; gap: var(--w2-s3); padding: var(--w2-s4) var(--w2-s6); border: 1px solid var(--w2-lime); border-radius: var(--w2-s3); color: #101204; background: var(--w2-lime); font: 800 17px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .s6-action .history-link {
  color: var(--w2-text-quiet); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-decoration: underline; text-underline-offset: var(--w2-s1); text-transform: uppercase; cursor: pointer;
}
.focus-v2 .s6-col.s6-duo {
  width: 76%; padding-top: var(--w2-s4);
}
.focus-v2 .s6-duo-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--w2-s4);
}
.focus-v2 .s6-duo-label {
  grid-column: 1 / -1; text-align: center;
}
.focus-v2 .s6-player-col {
  display: flex; flex-direction: column; min-width: 0; gap: var(--w2-s2); padding: var(--w2-s4); border: 1px solid var(--w2-line); border-radius: var(--w2-s4); background: var(--w2-surface);
}
.focus-v2 .s6-player-head {
  display: flex; align-items: center; gap: var(--w2-s2);
}
.focus-v2 .s6-player-head .avatar {
  position: relative; display: grid; place-items: center; width: var(--w2-s8); height: var(--w2-s8); flex-shrink: 0; overflow: hidden; border: 1px solid var(--w2-line); border-radius: 50%; color: var(--w2-text); background: var(--w2-bg);
}
.focus-v2 .focus-v2 .focus-v2 .s6-player-col.roman .avatar {
  border-color: var(--w2-lime); color: var(--w2-lime);
}
.focus-v2 .focus-v2 .s6-player-col.vlad .avatar {
  border-color: var(--w2-text);
}
.focus-v2 .focus-v2 .s6-player-head .name {
  color: var(--w2-text); font: 600 17px/1.2 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .s6-player-records {
  display: flex; flex-direction: column; gap: var(--w2-s2);
}
.focus-v2 .mini-rec {
  gap: var(--w2-s2); padding: var(--w2-s2) var(--w2-s3);
}
.focus-v2 .mini-rec .star {
  width: var(--w2-s4); height: var(--w2-s4); flex-shrink: 0; color: var(--w2-gold); fill: currentColor;
}
.focus-v2 .mini-rec .mini-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Аватар в дуо-финише показывает реальное фото (состав 1:1); идентичность — имя рядом */
.s6-player-head .avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}


/* PR flash — gold is reserved for the win. */
.focus-v2 .spr::before {
  content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 42%, rgba(255, 215, 64, .13), transparent 58%); pointer-events: none;
}
.focus-v2 .spr-col {
  position: absolute; top: 9%; bottom: 3.5%; left: 50%; z-index: 3; display: flex; align-items: center; justify-content: space-between; flex-direction: column; width: 82%; transform: translateX(-50%);
}
.focus-v2 .spr-header {
  display: flex; align-items: center; flex-direction: column; gap: var(--w2-s2);
}
.focus-v2 .spr-eyebrow, .focus-v2 .spr-player {
  display: inline-flex; align-items: center; gap: var(--w2-s2); padding: var(--w2-s2) var(--w2-s4); border: 1px solid rgba(255, 215, 64, .32); border-radius: 999px; color: var(--w2-gold); background: rgba(255, 215, 64, .05);
}
.focus-v2 .spr-eyebrow {
  font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .spr-eyebrow .blink {
  width: var(--w2-s2); height: var(--w2-s2); border-radius: 50%; background: var(--w2-gold); box-shadow: 0 0 8px rgba(255, 215, 64, .45); animation: w2FocusPulse 1.3s ease-in-out infinite;
}
.focus-v2 .spr-title-wrap {
  display: flex; align-items: center; justify-content: center; gap: var(--w2-s5);
}
.focus-v2 .spr-title {
  color: var(--w2-gold); font: 800 clamp(48px, 4.8vw, 92px)/.95 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-align: center; text-shadow: 0 0 28px rgba(255, 215, 64, .3); text-transform: uppercase;
}
.focus-v2 .spr-bolt {
  width: var(--w2-s9); height: var(--w2-s9); color: var(--w2-gold); filter: drop-shadow(0 0 10px rgba(255, 215, 64, .42));
}
.focus-v2 .spr-bolt svg {
  display: block; width: 100%; height: 100%; fill: currentColor;
}
.focus-v2 .spr-player {
  color: var(--w2-text); border-color: var(--w2-line); background: var(--w2-surface);
}
.focus-v2 .spr-player .avatar {
  width: var(--w2-s7); height: var(--w2-s7); overflow: hidden; border: 1px solid var(--w2-line); border-radius: 50%;
}
.focus-v2 .spr-player.roman .avatar {
  border-color: var(--w2-lime);
}
.focus-v2 .spr-player.vlad .avatar {
  border-color: var(--w2-text);
}
.focus-v2 .spr-player .name {
  font: 600 15px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .spr-card {
  position: relative; display: grid; grid-template-columns: 26vw 1fr; align-items: center; width: 62vw; gap: var(--w2-s6); padding: var(--w2-s6); border: 1px solid rgba(255, 215, 64, .36); border-radius: var(--w2-s5); background: rgba(255, 215, 64, .045); box-shadow: 0 0 36px rgba(255, 215, 64, .12);
}
.focus-v2 .spr-gif {
  border-color: rgba(255, 215, 64, .28); background: var(--w2-surface);
}
.focus-v2 .spr-info {
  display: flex; flex-direction: column; min-width: 0; gap: var(--w2-s3);
}
.focus-v2 .spr-info-lbl, .focus-v2 .spr-val-col .v-lbl, .focus-v2 .spr-loader-txt {
  color: rgba(255, 215, 64, .72); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .spr-ex-name {
  color: var(--w2-text); font: 700 clamp(20px, 1.9vw, 36px)/1.1 'Inter', sans-serif; font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.focus-v2 .spr-values {
  display: flex; align-items: center; gap: var(--w2-s4);
}
.focus-v2 .spr-val-col {
  display: flex; flex-direction: column; min-width: 0; gap: var(--w2-s1);
}
.focus-v2 .spr-val-col .v-val {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
}
.focus-v2 .spr-val-col.prev .v-val {
  color: var(--w2-text-muted); font-size: 17px; text-decoration: line-through;
}
.focus-v2 .spr-val-col.new .v-val {
  display: flex; align-items: baseline; gap: var(--w2-s1); color: var(--w2-gold); font-size: clamp(24px, 2.1vw, 40px); text-shadow: 0 0 18px rgba(255, 215, 64, .32);
}
.focus-v2 .spr-val-col.new .unit {
  color: rgba(255, 215, 64, .72); font-size: .55em;
}
.focus-v2 .spr-val-arrow {
  color: var(--w2-gold); font: 800 20px/1 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.focus-v2 .spr-delta {
  width: fit-content; padding: var(--w2-s1) var(--w2-s2); border: 1px solid rgba(255, 215, 64, .32); border-radius: var(--w2-s1); color: var(--w2-gold); background: rgba(255, 215, 64, .08); font: 700 12px/1 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .08em; text-transform: uppercase;
}
.focus-v2 .spr-loader {
  display: flex; align-items: center; flex-direction: column; width: 100%; gap: var(--w2-s2);
}
.focus-v2 .spr-bar {
  width: 28vw;
}
.focus-v2 .spr-bar-fill {
  position: absolute; inset: 0; width: 0; border-radius: inherit; background: var(--w2-gold); box-shadow: 0 0 10px rgba(255, 215, 64, .4);
}
.focus-v2 .spr-loader-txt .dots {
  display: inline-flex; gap: var(--w2-s1); margin-left: var(--w2-s1);
}
.focus-v2 .spr-loader-txt .dots i {
  width: var(--w2-s1); height: var(--w2-s1); border-radius: 50%; background: var(--w2-gold); animation: w2FocusDots 1.1s infinite;
}
.focus-v2 .spr-loader-txt .dots i:nth-child(2) {
  animation-delay: 160ms;
}
.focus-v2 .spr-loader-txt .dots i:nth-child(3) {
  animation-delay: 320ms;
}

/* Desktop distance scale for completion and PR surfaces. */
@media (min-width: 901px) and (min-height: 501px) {
  .focus-v2 .s6-col {
    top: 7.5%; bottom: 2.5%; width: 78%;
    padding-top: clamp(20px, min(1.5vw, 2.667vh), 32px);
  }
  .focus-v2 .s6-check {
    width: clamp(56px, min(4.8vw, 8.533vh), 96px);
    height: clamp(56px, min(4.8vw, 8.533vh), 96px);
    margin-bottom: clamp(16px, min(1.1vw, 1.956vh), 22px);
  }
  .focus-v2 .s6-title {
    margin-bottom: clamp(8px, min(.55vw, .978vh), 12px);
    font-size: clamp(32px, min(2.8vw, 4.978vh), 56px);
  }
  .focus-v2 .s6-title-sub {
    margin-bottom: clamp(18px, min(1.35vw, 2.4vh), 28px);
    font-size: clamp(12px, min(.75vw, 1.333vh), 15px);
  }
  .focus-v2 .s6-time-wrap {
    gap: clamp(8px, min(.55vw, .978vh), 12px);
    margin-bottom: clamp(24px, min(1.8vw, 3.2vh), 36px);
    padding: clamp(14px, min(1vw, 1.778vh), 20px) clamp(28px, min(2.2vw, 3.911vh), 44px);
  }
  .focus-v2 :is(.s6-time-lbl, .s6-records-label, .s6-duo-label) {
    font-size: clamp(12px, min(.75vw, 1.333vh), 15px);
  }
  .focus-v2 .s6-time-val {
    font-size: clamp(44px, min(3.2vw, 5.689vh), 72px);
  }
  .focus-v2 .s6-records {
    gap: clamp(12px, min(.9vw, 1.6vh), 18px);
    margin-top: clamp(12px, min(.9vw, 1.6vh), 18px);
  }
  .focus-v2 .s6-record {
    min-width: clamp(190px, min(13vw, 23.111vh), 260px);
    gap: clamp(8px, min(.55vw, .978vh), 12px);
    padding: clamp(18px, min(1.4vw, 2.489vh), 28px);
  }
  .focus-v2 :is(.s6-record .rec-ex, .mini-rec .mini-name) {
    font-size: clamp(12px, min(.72vw, 1.28vh), 15px);
  }
  .focus-v2 :is(.s6-record .rec-val, .mini-rec .mini-val) {
    font-size: clamp(17px, min(1.15vw, 2.044vh), 23px);
  }
  .focus-v2 :is(.s6-record .rec-delta, .mini-rec .mini-delta) {
    padding: clamp(4px, min(.3vw, .533vh), 6px) clamp(8px, min(.55vw, .978vh), 12px);
    font-size: clamp(12px, min(.7vw, 1.244vh), 14px);
  }
  .focus-v2 .s6-action {
    gap: clamp(12px, min(.8vw, 1.422vh), 16px);
  }
  .focus-v2 .s6-action .btn-primary {
    min-width: clamp(300px, min(24vw, 42.667vh), 440px);
    min-height: clamp(60px, min(4.2vw, 7.467vh), 82px);
    justify-content: center;
    gap: clamp(12px, min(.85vw, 1.511vh), 18px);
    padding-inline: clamp(24px, min(2vw, 3.556vh), 40px);
    font-size: clamp(17px, min(1.15vw, 2.044vh), 23px);
  }
  .focus-v2 .s6-action .history-link {
    font-size: clamp(12px, min(.72vw, 1.28vh), 15px);
  }
  .focus-v2 .s6-col.s6-duo {
    width: 82%; padding-top: clamp(16px, min(1.1vw, 1.956vh), 22px);
  }
  .focus-v2 .s6-duo-grid {
    gap: clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .s6-player-col {
    gap: clamp(8px, min(.6vw, 1.067vh), 12px);
    padding: clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .s6-player-head .avatar {
    width: clamp(40px, min(2.6vw, 4.622vh), 54px);
    height: clamp(40px, min(2.6vw, 4.622vh), 54px);
  }
  .focus-v2 .s6-player-head .name {
    font-size: clamp(17px, min(1.1vw, 1.956vh), 22px);
  }
  .focus-v2 .mini-rec {
    gap: clamp(8px, min(.6vw, 1.067vh), 12px);
    padding: clamp(10px, min(.7vw, 1.244vh), 14px) clamp(12px, min(.9vw, 1.6vh), 18px);
  }
  .focus-v2 .mini-rec .star {
    width: clamp(16px, min(1.1vw, 1.956vh), 22px);
    height: clamp(16px, min(1.1vw, 1.956vh), 22px);
  }
  .focus-v2 .spr-col {
    top: 8%; bottom: 3%; width: 88%;
  }
  .focus-v2 .spr-header {
    gap: clamp(8px, min(.6vw, 1.067vh), 12px);
  }
  .focus-v2 .spr-eyebrow, .focus-v2 .spr-player {
    gap: clamp(8px, min(.6vw, 1.067vh), 12px);
    padding: clamp(8px, min(.55vw, .978vh), 12px) clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .spr-eyebrow {
    font-size: clamp(12px, min(.75vw, 1.333vh), 15px);
  }
  .focus-v2 .spr-title-wrap {
    gap: clamp(20px, min(1.5vw, 2.667vh), 32px);
  }
  .focus-v2 .spr-title {
    font-size: clamp(56px, min(5.2vw, 9.244vh), 104px);
  }
  .focus-v2 .spr-bolt {
    width: clamp(48px, min(4vw, 7.111vh), 80px);
    height: clamp(48px, min(4vw, 7.111vh), 80px);
  }
  .focus-v2 .spr-player .avatar {
    width: clamp(40px, min(2.6vw, 4.622vh), 54px);
    height: clamp(40px, min(2.6vw, 4.622vh), 54px);
  }
  .focus-v2 .spr-player .name {
    font-size: clamp(15px, min(1.05vw, 1.867vh), 21px);
  }
  .focus-v2 .spr-card {
    grid-template-columns: clamp(360px, min(28vw, 49.778vh), 560px) 1fr;
    width: clamp(760px, min(68vw, 120.889vh), 1320px); max-width: 100%;
    gap: clamp(24px, min(2vw, 3.556vh), 40px);
    padding: clamp(24px, min(2vw, 3.556vh), 40px);
  }
  .focus-v2 .spr-info {
    gap: clamp(12px, min(.9vw, 1.6vh), 18px);
  }
  .focus-v2 :is(.spr-info-lbl, .spr-val-col .v-lbl, .spr-loader-txt) {
    font-size: clamp(12px, min(.72vw, 1.28vh), 15px);
  }
  .focus-v2 .spr-ex-name {
    font-size: clamp(26px, min(2.4vw, 4.267vh), 48px);
  }
  .focus-v2 .spr-values {
    gap: clamp(16px, min(1.2vw, 2.133vh), 24px);
  }
  .focus-v2 .spr-val-col.prev .v-val {
    font-size: clamp(17px, min(1.15vw, 2.044vh), 23px);
  }
  .focus-v2 .spr-val-col.new .v-val {
    font-size: clamp(30px, min(2.4vw, 4.267vh), 48px);
  }
  .focus-v2 .spr-val-arrow {
    font-size: clamp(20px, min(1.4vw, 2.489vh), 28px);
  }
  .focus-v2 .spr-delta {
    padding: clamp(6px, min(.42vw, .747vh), 9px) clamp(10px, min(.75vw, 1.333vh), 15px);
    font-size: clamp(12px, min(.85vw, 1.511vh), 17px);
  }
  .focus-v2 .spr-loader {
    gap: clamp(8px, min(.6vw, 1.067vh), 12px);
  }
  .focus-v2 .spr-bar {
    width: clamp(360px, min(30vw, 53.333vh), 600px);
    height: clamp(4px, min(.3vw, .533vh), 6px);
  }
}