@import url("../ui/t2b-index.css");

/* H2H screen only: business layout on top of shared t2b-* components. */
#s-h2h,
#s-h2h .content,
#s-h2h .h2h-page{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:linear-gradient(110deg,
    color-mix(in srgb,var(--t2b-brand) 5%,var(--t2b-bg-b)),
    color-mix(in srgb,var(--t2b-bg-b) 82%,var(--t2b-surface) 18%) 45%,
    color-mix(in srgb,var(--t2b-good) 6%,var(--t2b-bg-b)));
  background-attachment:local;
}

#s-h2h .content,
#s-h2h .h2h-page{
  min-height:100%;
}

#s-h2h .content{
  overscroll-behavior:contain;
}

#s-h2h .h2h-shell{
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:6px 6px calc(88px + env(safe-area-inset-bottom));
}

#s-h2h .h2h-shell *,
#s-h2h .h2h-shell *::before,
#s-h2h .h2h-shell *::after{
  box-sizing:border-box;
}

#s-h2h .h2h-hero{
  padding:12px;
  border-color:var(--t2b-line);
}

#s-h2h .h2h-hero-top{
  padding:0;
  border:0;
  background:transparent;
}

#s-h2h .h2h-hero-badge{
  width:42px;
  height:42px;
  flex-basis:42px;
  border-radius:14px;
  font-size:var(--t2b-font-control);
  box-shadow:0 7px 18px color-mix(in srgb,var(--t2b-brand) 16%,transparent);
}

#s-h2h .h2h-hero-title b{
  color:var(--t2b-text);
  font-size:var(--t2b-font-title);
  line-height:1.17;
  font-weight:760;
}

#s-h2h .h2h-hero-title span{
  color:var(--t2b-muted);
  font-size:var(--t2b-font-meta);
  line-height:1.2;
  font-weight:500;
}

#s-h2h .h2h-current{
  display:flex;
  flex-wrap:wrap;
  gap:3px 6px;
  margin:8px 2px 0;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .87);
  line-height:1.25;
  font-weight:650;
}

#s-h2h .h2h-current b{
  color:var(--t2b-brand-text-deep);
  font-size:inherit;
  line-height:inherit;
  font-weight:800;
}

#s-h2h .h2h-hero .t2b-segmented{
  margin-top:10px;
}

#s-h2h .h2h-select-body{
  display:grid;
  align-items:center;
  gap:8px;
  padding:10px 10px 0;
}

#s-h2h .h2h-select-body.solo,
#s-h2h .h2h-select-body.team-only{
  grid-template-columns:minmax(0,1fr);
}

#s-h2h .h2h-select-body.versus,
#s-h2h .h2h-select-body.pair-versus{
  grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
}

#s-h2h .h2h-team-pick{
  min-width:0;
  display:grid;
  gap:7px;
}

#s-h2h .h2h-team-label{
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .86);
  line-height:1;
  font-weight:700;
  text-transform:uppercase;
}

#s-h2h .h2h-player-pick{
  min-width:0;
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 24px;
  align-items:center;
  gap:7px;
  color:inherit;
  padding:8px;
  text-align:left;
}

#s-h2h .h2h-player-pick:not(.has-clear){
  grid-template-columns:34px minmax(0,1fr);
}

#s-h2h .h2h-player-pick.active{
  border-color:color-mix(in srgb,var(--t2b-brand) 36%,var(--t2b-surface));
  background:linear-gradient(180deg,var(--t2b-brand-soft),var(--t2b-surface));
}

#s-h2h .h2h-player-pick.warn{
  border-color:color-mix(in srgb,var(--t2b-warn) 34%,var(--t2b-surface));
  background:linear-gradient(180deg,var(--t2b-warn-soft),var(--t2b-surface));
}

#s-h2h .h2h-plus-avatar{
  width:34px;
  height:34px;
  flex-basis:34px;
}

#s-h2h .h2h-select-body.versus .h2h-player-pick:not(.active):not(.warn) .h2h-pick-title span,
#s-h2h .h2h-select-body.pair-versus .h2h-player-pick:not(.active):not(.warn) .h2h-pick-title span{
  display:none;
}

#s-h2h .h2h-player-clear,
#s-h2h .h2h-reset{
  width:24px;
  min-width:24px;
  height:24px;
  padding:0;
}

#s-h2h .h2h-rangebar{
  padding:0 10px 10px;
}

#s-h2h .h2h-range-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:9px 1px 7px;
}

#s-h2h .h2h-range-top b{
  color:var(--t2b-text);
  font-size:var(--t2b-font-control);
  line-height:1.1;
  font-weight:760;
}

#s-h2h .h2h-range-top span{
  color:var(--t2b-brand-text-deep);
  font-size:calc(var(--t2b-font-meta) * .94);
  line-height:1.1;
  font-weight:700;
  white-space:nowrap;
}

#s-h2h .h2h-range-chips{
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:1px;
}

#s-h2h .h2h-range-chips::-webkit-scrollbar{
  display:none;
}

#s-h2h .h2h-range-custom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  margin-top:8px;
}

#s-h2h .h2h-range-custom input{
  min-width:0;
  height:34px;
  border:1px solid var(--t2b-line);
  border-radius:12px;
  background:var(--t2b-surface);
  color:var(--t2b-text);
  padding:0 8px;
  font-size:calc(var(--t2b-font-control) * .92);
  font-weight:650;
}

#s-h2h .h2h-duel-card{
  border-top:3px solid var(--t2b-brand);
  border-color:var(--t2b-line);
}

#s-h2h .h2h-score-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  align-items:start;
  gap:8px;
  padding:10px 12px 9px;
  text-align:center;
}

#s-h2h .h2h-score-head.compact{
  grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);
  align-items:center;
  padding:11px 12px 10px;
}

#s-h2h .h2h-score-side{
  min-width:0;
  display:grid;
  gap:2px;
}

#s-h2h .h2h-score-side.left{
  justify-items:start;
  text-align:left;
}

#s-h2h .h2h-score-side.right{
  justify-items:end;
  text-align:right;
}

#s-h2h .h2h-score-side b{
  max-width:100%;
  color:var(--t2b-text);
  font-size:calc(var(--t2b-font-title) * .82);
  line-height:1.14;
  font-weight:690;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-h2h .h2h-score-side span{
  max-width:100%;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .86);
  line-height:1.12;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-h2h .h2h-duel-side{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:4px;
}

#s-h2h .h2h-duel-side > .av{
  width:44px;
  height:44px;
}

#s-h2h .h2h-pair-avs{
  min-height:44px;
  display:flex;
  justify-content:center;
  align-items:center;
}

#s-h2h .h2h-pair-avs .av{
  border:2px solid var(--t2b-surface);
  margin-left:-8px;
  box-shadow:0 4px 10px rgba(15,23,42,.08);
}

#s-h2h .h2h-pair-avs .av:first-child{
  margin-left:0;
}

#s-h2h .h2h-duel-side b{
  max-width:100%;
  color:var(--t2b-text);
  font-size:var(--t2b-font-body);
  line-height:1.12;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-h2h .h2h-duel-side span{
  display:block;
  max-width:100%;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .94);
  line-height:1.1;
  font-weight:520;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-h2h .h2h-bigscore{
  display:grid;
  gap:1px;
  padding-top:2px;
  text-align:center;
}

#s-h2h .h2h-bigscore b{
  color:var(--t2b-brand-text);
  font-size:calc(var(--t2b-font-score) * 2.21);
  line-height:1;
  font-weight:880;
  font-variant-numeric:tabular-nums;
}

#s-h2h .h2h-bigscore > span{
  color:var(--t2b-meta);
  font-size:calc(var(--t2b-font-meta) * .86);
  line-height:1.12;
  font-weight:620;
  text-transform:uppercase;
}

#s-h2h .h2h-bigscore b span{
  font-size:inherit;
  line-height:inherit;
  font-weight:inherit;
}

#s-h2h .h2h-bigscore .lead{color:var(--t2b-match-win);}
#s-h2h .h2h-bigscore .trail{color:var(--t2b-match-loss);}

#s-h2h .h2h-insight-lines{
  padding:0 10px 10px;
}

#s-h2h .h2h-insight-line{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
  padding:8px 0;
  border-top:1px solid var(--t2b-line-soft);
  color:var(--t2b-text-insight);
  font-size:calc(var(--t2b-font-body) * .9142857);
  line-height:1.35;
}

#s-h2h .h2h-insight-line:first-child{
  border-top:0;
}

#s-h2h .h2h-insight-line i{
  width:22px;
  height:22px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--t2b-surface-soft);
  color:var(--t2b-muted);
  font-style:normal;
  font-size:calc(var(--t2b-font-control) * .9166667);
  line-height:1;
}

#s-h2h .h2h-insight-line.brand-icon i{
  background:var(--t2b-brand-soft);
  color:var(--t2b-brand-text-deep);
}

#s-h2h .h2h-insight-line.good:not(.brand-icon) i{
  background:var(--t2b-good-soft);
  color:var(--t2b-good-text-deep);
}

#s-h2h .h2h-insight-line.warn:not(.brand-icon) i{
  background:var(--t2b-warn-soft);
  color:var(--t2b-warn-text-deep);
}

#s-h2h .h2h-insight-line > span{
  min-width:0;
}

#s-h2h .h2h-insight-line > span b{
  font-weight:720;
}

#s-h2h .h2h-insight-line em{
  max-width:54px;
  color:var(--t2b-muted-insight);
  font-size:calc(var(--t2b-font-meta) * .8982036);
  font-style:normal;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#s-h2h .h2h-insight-empty-state{
  min-height:122px;
  border-top:1px solid var(--t2b-line-soft);
}

#s-h2h .h2h-ratebar{
  height:3px;
  margin-top:4px;
  border-radius:999px;
  background:var(--t2b-line-soft);
  overflow:hidden;
}

#s-h2h .h2h-ratebar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--t2b-warn);
}

#s-h2h .h2h-ratebar i.good{background:var(--t2b-brand);}
#s-h2h .h2h-ratebar i.bad{background:var(--t2b-hot);}

#s-h2h .h2h-opponent-row{
  position:relative;
}

#s-h2h .h2h-opponent-row .t2b-player-main{
  gap:3px;
}

#s-h2h .h2h-row-record,
#s-h2h .h2h-row-ratios{
  max-width:100%;
}

#s-h2h .h2h-row-record .t2b-meta-chip,
#s-h2h .h2h-row-ratios .t2b-meta-chip{
  flex:0 1 auto;
  margin-top:0!important;
}

#s-h2h .h2h-opponent-row.selected,
#s-h2h .h2h-opponent-row:active{
  background:linear-gradient(90deg,var(--t2b-brand-soft),var(--t2b-surface));
}

#s-h2h .h2h-history-list{
  display:grid;
  overflow:hidden;
}

#s-h2h .h2h-history-row:not(.t2b-match-row){
  width:100%;
  min-width:0;
  min-height:82px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px;
  align-items:center;
  gap:8px;
  border:0;
  border-bottom:1px solid var(--t2b-line-soft);
  background:var(--t2b-surface);
  color:inherit;
  padding:10px 10px;
  text-align:left;
}

#s-h2h .h2h-history-row:not(.t2b-match-row):last-child{
  border-bottom:0;
}

#s-h2h .h2h-history-main{
  min-width:0;
  display:grid;
  gap:6px;
}

#s-h2h .h2h-history-main .h2h-mini-state{
  min-height:0;
  padding:0;
}

#s-h2h .h2h-history-main b{
  display:block;
  max-width:100%;
  color:var(--t2b-text);
  font-size:calc(var(--t2b-font-body) * .9571429);
  line-height:1.18;
  font-weight:730;
  white-space:normal;
  overflow-wrap:break-word;
}

#s-h2h .h2h-history-team{
  display:inline;
  border-radius:6px;
  padding:1px 4px;
  margin:0 -1px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

#s-h2h .h2h-history-vs{
  color:var(--t2b-text);
}

#s-h2h .h2h-history-main > span,
#s-h2h .h2h-history-main > em{
  min-width:0;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .906758);
  line-height:1.25;
  font-style:normal;
  font-weight:520;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-h2h .h2h-history-score{
  min-width:0;
  display:grid;
  justify-items:end;
  gap:4px;
  text-align:right;
}

#s-h2h .h2h-history-score i{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border:1px solid var(--t2b-line);
  border-radius:999px;
  background:linear-gradient(180deg,var(--t2b-surface),var(--t2b-surface-soft));
  color:var(--t2b-control-text);
  font-size:calc(var(--t2b-font-meta) * .8126604);
  line-height:1;
  font-style:normal;
  font-weight:820;
}

#s-h2h .h2h-history-score b{
  color:var(--t2b-brand-text);
  font-size:calc(var(--t2b-font-score) * 1.36);
  line-height:1;
  font-weight:820;
}

#s-h2h .h2h-history-score .h2h-score-pair{
  display:inline-flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:1px;
  font-variant-numeric:tabular-nums;
}

#s-h2h .h2h-history-score .h2h-score-pair span{
  font-size:calc(var(--t2b-font-score) * 1.5);
  line-height:1;
  font-weight:860;
}

#s-h2h .h2h-history-score .h2h-score-pair em{
  color:var(--t2b-meta);
  font-size:var(--t2b-font-score);
  line-height:1;
  font-style:normal;
  font-weight:760;
}

#s-h2h .h2h-history-score .h2h-score-pair .lead{color:var(--t2b-match-win);}
#s-h2h .h2h-history-score .h2h-score-pair .trail{color:var(--t2b-match-loss);}

#s-h2h .h2h-history-score span{
  max-width:100%;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .8982036);
  line-height:1.12;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-h2h .h2h-history-score .h2h-match-live{
  justify-self:end;
  min-height:16px;
  background:var(--t2b-match-live-bg);
  color:var(--t2b-match-live-text);
}

#s-h2h .h2h-insights{
  max-width:100%;
  overflow:hidden;
}

#s-h2h .h2h-mini-state{
  min-height:21px;
  padding:7px 28px 0 9px;
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--t2b-brand-text-deep);
  font-size:calc(var(--t2b-font-meta) * .855432);
  line-height:1;
  font-weight:680;
}

#s-h2h .h2h-mini-state.ok{color:var(--t2b-brand-text);}
#s-h2h .h2h-mini-state.wait{color:var(--t2b-good-text);}
#s-h2h .h2h-mini-state.bad,
#s-h2h .h2h-mini-state.info{color:var(--t2b-hot-text);}

#s-h2h .h2h-mini-state::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:999px;
  background:currentColor;
}

#s-h2h .h2h-match-live,
#s-h2h .h2h-match-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  border-radius:999px;
  padding:0 5px;
  min-height:17px;
  font-size:calc(var(--t2b-font-meta) * .74);
  line-height:1;
  font-weight:720;
}

#s-h2h .h2h-match-live{
  background:var(--t2b-match-live-bg);
  color:var(--t2b-match-live-text);
}

#s-h2h .h2h-match-live i{
  width:5px;
  height:5px;
  border-radius:999px;
  background:currentColor;
}

#s-h2h .h2h-match-badge.warn{
  background:var(--t2b-warn-soft);
  color:var(--t2b-warn-text-deep);
}

#s-h2h .h2h-match-badge.danger{
  background:var(--t2b-hot-soft);
  color:var(--t2b-hot-text-deep);
}

#s-h2h .h2h-empty-state{
  border-color:var(--t2b-line);
}

#s-h2h .t2b-player-index{
  background:linear-gradient(180deg,var(--t2b-surface),var(--t2b-surface-soft));
  color:var(--t2b-control-text);
  border-color:var(--t2b-line);
}

#s-h2h .t2b-player-index.brand-mark{
  background:var(--t2b-brand);
  color:var(--t2b-on-accent);
  border-color:var(--t2b-surface);
}

#s-h2h .h2h-modal-main{
  min-width:0;
}

#s-h2h .h2h-modal-main b{
  display:block;
  color:var(--t2b-text);
  font-size:var(--t2b-font-body);
  line-height:1.15;
  font-weight:720;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#s-h2h .h2h-modal-main span{
  display:block;
  margin-top:2px;
  color:var(--t2b-muted);
  font-size:calc(var(--t2b-font-meta) * .94);
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media(max-width:380px){
  #s-h2h .h2h-select-body.versus,
  #s-h2h .h2h-select-body.pair-versus{
    grid-template-columns:minmax(0,1fr);
  }

  #s-h2h .h2h-score-head{
    grid-template-columns:1fr;
  }

  #s-h2h .h2h-bigscore{
    order:-1;
  }

}

@media(min-width:768px){
  #s-h2h .h2h-shell{
    width:min(100%,760px);
    margin:0 auto;
    padding:7px;
  }

  #s-h2h .h2h-select-body{
    padding:8px 12px 0;
  }

}