/* FRAG WATCH / Crosshair Library
   Same charcoal, warm-orange, muted-border visual system as Guess The Pro
   and the feature studio. Player portraits are the hero of each card. */
body.ch-page {
  --ch-bg:#101217;
  --ch-panel:#20242b;
  --ch-panel-deep:#1b1f26;
  --ch-panel-soft:#292d35;
  --ch-border:#3b414a;
  --ch-border-soft:#303641;
  --ch-text:#f4f4f6;
  --ch-muted:#a5aeba;
  --ch-faint:#8894a3;
  --ch-accent:#ff985f;
  --ch-accent-deep:#e77b40;
  --ch-input:#15191f;
  --ch-preview:#101318;
  background:radial-gradient(ellipse 760px 440px at 26% 160px,#8f3e1d19,transparent 78%),var(--ch-bg);
  color:var(--ch-text);
  min-height:100vh;
}
.ch-page .ch-main {max-width:1210px;padding-top:0;padding-bottom:30px}
.ch-page button,.ch-page input,.ch-page select{font:inherit}
.ch-page :is(a,button,input,select):focus-visible{outline:2px solid var(--ch-accent);outline-offset:3px}
.ch-page button:disabled{cursor:not-allowed}

/* Title treatment matches Guess The Pro. */
.ch-hero {
  display:flex;align-items:end;justify-content:space-between;gap:34px;
  border-bottom:1px solid #343a43;padding:55px 0 32px;margin:0 0 20px;
}
.ch-hero>div:first-child{max-width:820px;min-width:0}
.ch-overline,.ch-section-index{display:inline-flex;align-items:center;gap:9px;color:#f2a470;font-size:10px;font-weight:950;letter-spacing:1.7px}
.ch-overline:before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#ff8f50;box-shadow:0 0 0 4px #ff91451e}
.ch-hero h1{
  font-size:clamp(48px,6.4vw,77px);font-weight:950;letter-spacing:-.073em;
  line-height:1.02;margin:17px 0 15px;color:var(--ch-text);
}
.ch-hero h1 em,.ch-page main h2 em{font-style:normal;color:var(--ch-accent)}
.ch-intro{font-size:13px;line-height:1.85;max-width:640px;color:var(--ch-muted);margin:0}
.ch-hero-mark{
  flex:0 0 207px;min-height:128px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:4px;padding:16px 20px 17px;
  border:1px solid #654b3c;border-radius:11px;
  background:linear-gradient(147deg,#3b302e,#202329);box-shadow:0 10px 24px #0002;
}
.ch-hero-plus{font-size:25px;line-height:1;color:#ffa872;font-weight:400;margin-bottom:5px}
.ch-aside-kicker{color:#f1ac7e;font-size:9px;font-weight:950;letter-spacing:1.4px}
.ch-hero-mark strong{color:#fff4eb;font-size:17px;line-height:1.25;letter-spacing:-.025em}
.ch-hero-mark small{color:#bdaca4;font-size:9px;font-weight:850;letter-spacing:.35px;margin-top:3px}

/* Slim count modules reference the existing site statistics panels. */
.ch-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:19px 0 26px;padding:0;border:0}
.ch-metric{
  display:flex;align-items:center;gap:17px;min-width:0;padding:15px 20px;
  background:var(--ch-panel);border:1px solid var(--ch-border);border-radius:10px;
}
.ch-metric strong{font-size:29px;font-weight:950;line-height:1;color:var(--ch-text);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.ch-metric:first-child strong{color:var(--ch-accent)}
.ch-metric span{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--ch-faint)}

/* Search module / feature-studio form language. */
.ch-finder{
  padding:23px 26px 19px;background:var(--ch-panel);
  border:1px solid var(--ch-border);border-radius:13px;margin:0 0 43px;
}
.ch-finder-header,.ch-results-head{display:flex;align-items:end;justify-content:space-between;gap:18px}
.ch-finder-header{margin-bottom:19px}
.ch-finder-header h2,.ch-results-head h2,.ch-how h2{
  margin:8px 0 0;font-size:clamp(25px,3vw,33px);font-weight:900;line-height:1.15;letter-spacing:-.045em;color:var(--ch-text)
}
.ch-finder-hint{font-size:9px;letter-spacing:1px;font-weight:900;color:var(--ch-faint);white-space:nowrap}
.ch-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.ch-search,.ch-select{
  min-height:49px;padding:0 15px;border:1px solid #505965;border-radius:8px;
  outline:none;background:var(--ch-input);color:var(--ch-text);font-size:13px;
}
.ch-search{flex:1 1 330px;min-width:180px}
.ch-search::placeholder{color:var(--ch-faint)}
.ch-select{flex:0 1 230px;max-width:100%;cursor:pointer}
.ch-search:focus,.ch-select:focus{border-color:var(--ch-accent);box-shadow:0 0 0 3px #ff9b661c}
.ch-toggle{
  display:flex;align-items:center;gap:8px;padding:10px 3px;
  font-size:11px;color:var(--ch-muted);font-weight:800;white-space:nowrap;cursor:pointer
}
.ch-toggle input{width:16px;height:16px;accent-color:var(--ch-accent)}
.ch-note{font-size:10px;line-height:1.7;color:var(--ch-faint);margin:13px 0 0}
.ch-results-head{margin:0 0 17px}
.ch-results-head p{
  color:var(--ch-muted);font-size:10px;letter-spacing:1px;font-weight:900;white-space:nowrap;margin:0 0 3px
}

/* One prominent player per row. At 1200px the portrait is ~430px wide
   versus ~200px in the previous two-column layout. */
.ch-teams{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ch-pro-card{
  position:relative;min-width:0;display:grid;
  grid-template-columns:minmax(0,39%) minmax(0,61%);
  min-height:415px;overflow:hidden;border-radius:13px;
  border:1px solid var(--ch-border);background:var(--ch-panel);
  box-shadow:0 12px 34px #0002;isolation:isolate;
  transition:border-color .2s ease,transform .2s ease;
}
.ch-pro-card:before{
  content:"";position:absolute;z-index:5;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#ff9657,#b96440 48%,transparent 88%);
}
.ch-pro-card:hover{border-color:#836048;transform:translateY(-2px)}
.ch-player-portrait{
  position:relative;min-height:414px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 53% 43%,#76513f84,transparent 65%),linear-gradient(148deg,#353039,#1b2028 80%);
}
.ch-player-portrait:before{
  content:"";position:absolute;z-index:-1;inset:0;opacity:.52;pointer-events:none;
  background-image:linear-gradient(#e6b18d13 1px,transparent 1px),linear-gradient(90deg,#e6b18d13 1px,transparent 1px);
  background-size:35px 35px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 70%,transparent);
}
.ch-player-portrait:after{
  content:"";position:absolute;z-index:-1;top:16%;left:50%;transform:translateX(-50%);
  width:265px;height:265px;border:1px solid #f9b07923;border-radius:50%;
  box-shadow:0 0 0 42px #db955a09,0 0 0 88px #db955a06;
}
.ch-portrait-img{
  display:block;position:absolute;bottom:0;left:0;width:100%;height:100%;
  object-fit:contain;object-position:center bottom;transform:none;
  transform-origin:bottom center;opacity:0;z-index:2;transition:opacity .23s ease;
}
.ch-portrait-img.loaded{opacity:1}
.ch-photo-fallback{
  position:absolute;z-index:1;inset:0;display:grid;place-items:center;
  color:#ffc08a77;font-size:clamp(92px,13vw,175px);
  font-weight:950;letter-spacing:-.09em;text-transform:uppercase
}
.ch-portrait-gradient{
  position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 82%,#20242b55),linear-gradient(0deg,#171c23ba,transparent 23%);
}
.ch-pro-content{
  min-width:0;display:flex;flex-direction:column;gap:0;
  background:var(--ch-panel);padding:30px 32px 28px;
}
.ch-pro-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.ch-pro-title-group{min-width:0;max-width:100%}
.ch-pro-eyebrow{display:block;color:var(--ch-accent);font-size:10px;letter-spacing:1.6px;font-weight:950}
.ch-pro-name{
  font-size:clamp(35px,4.1vw,52px);font-weight:950;letter-spacing:-.07em;
  line-height:1.07;margin:7px 0 0;color:var(--ch-text);overflow-wrap:anywhere
}
.ch-pro-team{
  display:inline-flex;align-items:center;max-width:100%;white-space:nowrap;
  padding:8px 12px;font-size:11px;font-weight:850;
  color:#ffd0af;background:#40312c;border:1px solid #71513d;border-radius:7px;
}
.ch-pro-team:before{content:"◆";font-size:7px;margin-right:7px;color:#ff9f6b}

/* Preview is intentionally a visual illustration, never a decoded representation
   of the imported crosshair's shape. */
.ch-cross-stage{
  display:grid;place-items:center;position:relative;flex:1;overflow:hidden;
  min-height:157px;max-height:183px;margin:22px 0 0;
  background:var(--ch-preview);border:1px solid var(--ch-border-soft);border-radius:9px;
}
.ch-cross-stage:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;
  background-image:linear-gradient(#aab3c11e 1px,transparent 1px),linear-gradient(90deg,#aab3c11e 1px,transparent 1px);
  background-size:27px 27px;mask-image:radial-gradient(circle at center,black,transparent 72%);
}
.ch-cross-stage:after{
  content:"LIVE PREVIEW / ILLUSTRATIVE";position:absolute;top:13px;left:14px;
  color:#727b88;font-size:9px;font-weight:850;letter-spacing:1px;
}
.ch-cross-target{
  width:100%;height:100%;position:relative;
  --ch-zoom:1;--ch-color:#00ff4c;
  --ch-space:calc(4px * var(--ch-zoom));--ch-length:calc(5px * var(--ch-zoom));--ch-thick:calc(2px * var(--ch-zoom))
}
.ch-cross-line{position:absolute;display:block;background:var(--ch-color);box-shadow:0 0 4px #00ff2266}
.ch-cross-line.up{bottom:calc(50% + var(--ch-space));left:50%;transform:translateX(-50%);width:var(--ch-thick);height:var(--ch-length)}
.ch-cross-line.down{top:calc(50% + var(--ch-space));left:50%;transform:translateX(-50%);width:var(--ch-thick);height:var(--ch-length)}
.ch-cross-line.left{right:calc(50% + var(--ch-space));top:50%;transform:translateY(-50%);height:var(--ch-thick);width:var(--ch-length)}
.ch-cross-line.right{left:calc(50% + var(--ch-space));top:50%;transform:translateY(-50%);height:var(--ch-thick);width:var(--ch-length)}
.ch-no-code{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);color:#8d98a6;font-size:10px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.ch-preview-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:13px 0 17px}
.ch-zoom-group,.ch-colors{
  display:inline-flex;align-items:center;gap:3px;padding:4px;
  background:var(--ch-panel-deep);border:1px solid var(--ch-border);border-radius:7px
}
.ch-zoom,.ch-color-button{
  display:inline-grid;place-items:center;border:0;border-radius:5px;
  min-width:36px;height:29px;padding:0 7px;background:transparent;
  color:var(--ch-muted);font-size:11px;font-weight:950;cursor:pointer
}
.ch-zoom.is-active,.ch-color-button.is-active{background:var(--ch-panel-soft);color:var(--ch-text)}
.ch-zoom:hover,.ch-color-button:hover{color:var(--ch-text)}
.ch-color-button{min-width:28px}
.ch-color-dot{width:11px;height:11px;border-radius:50%;background:var(--dot-color);display:block}
.ch-code-row{
  display:flex;align-items:center;gap:14px;padding:11px 11px 11px 15px;
  border:1px solid var(--ch-border);border-radius:8px;background:var(--ch-panel-deep);min-width:0;
}
.ch-code-value{
  display:block;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ch-muted);
}
.ch-card-copy{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-height:41px;padding:0 17px;border:1px solid #e38d5b;border-radius:6px;
  background:var(--ch-accent);color:#201a17;font-size:11px;font-weight:950;
  letter-spacing:.35px;cursor:pointer;transition:background .15s
}
.ch-card-copy:hover:not(:disabled){background:#ffb57e}
.ch-card-copy:disabled{
  background:var(--ch-panel-soft);border-color:var(--ch-border);
  color:var(--ch-faint);cursor:not-allowed
}

.ch-empty{
  border:1px dashed var(--ch-border);border-radius:13px;
  padding:65px 25px;text-align:center;background:var(--ch-panel);color:var(--ch-muted)
}
.ch-more-wrapper{display:flex;justify-content:center;margin:30px 0 0}
.ch-load-more{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:49px;padding:13px 28px;background:#352b29;border:1px solid #81553d;
  color:#ffbd95;border-radius:8px;font-size:11px;font-weight:950;letter-spacing:.7px
}
.ch-load-more:hover{background:#46352b}
.ch-more-wrapper button[hidden]{display:none}
.ch-how{
  margin:60px 0 0;padding:27px 30px;background:var(--ch-panel);
  border:1px solid var(--ch-border);border-radius:13px
}
.ch-how h2{margin:10px 0 16px}
.ch-how p{font-size:13px;line-height:1.8;color:var(--ch-muted);margin:8px 0}
.ch-how strong{color:var(--ch-text)}
.ch-how code{color:var(--ch-accent)}

/* Consistent Day theme when the FRAG WATCH settings control changes modes. */
html[data-fw-theme="day"] body.ch-page{
  --ch-bg:#f5f7fa;--ch-panel:#fff;--ch-panel-deep:#f1f4f8;--ch-panel-soft:#e6ebf2;
  --ch-border:#d8dfe8;--ch-border-soft:#d6dde5;--ch-text:#1c2939;
  --ch-muted:#596778;--ch-faint:#718092;--ch-accent:#dd642c;
  --ch-accent-deep:#c6582b;--ch-input:#f6f8fb;--ch-preview:#101318;
  background:radial-gradient(ellipse 760px 440px at 26% 160px,#ff965914,transparent 78%),var(--ch-bg)
}
html[data-fw-theme="day"] .ch-hero{border-color:#d7dfe8}
html[data-fw-theme="day"] .ch-hero-mark{
  background:linear-gradient(147deg,#fff5ed,#fff);border-color:#efceb9;box-shadow:none
}
html[data-fw-theme="day"] .ch-hero-mark strong{color:#7b421f}
html[data-fw-theme="day"] .ch-hero-mark small{color:#8b735f}
html[data-fw-theme="day"] .ch-pro-card{box-shadow:none}
html[data-fw-theme="day"] .ch-player-portrait{
  background:radial-gradient(ellipse at 52% 44%,#d7a58490,transparent 65%),linear-gradient(145deg,#e9d5c7,#c8c6c5)
}
html[data-fw-theme="day"] .ch-portrait-gradient{background:linear-gradient(90deg,transparent 82%,#fff6),linear-gradient(0deg,#392b2666,transparent 23%)}
html[data-fw-theme="day"] .ch-pro-team{background:#fff0e4;border-color:#e3bc9e;color:#9a522a}
html[data-fw-theme="day"] .ch-cross-stage{background:#101318;border-color:#4b535e}
html[data-fw-theme="day"] .ch-preview-controls .ch-color-button.is-active,
html[data-fw-theme="day"] .ch-preview-controls .ch-zoom.is-active{color:#283647}
html[data-fw-theme="day"] .ch-load-more{background:#fff2e7;border-color:#edb78e;color:#a34e25}
html[data-fw-theme="day"] .ch-card-copy{color:#fff;border-color:#cd572a}
html[data-fw-theme="day"] .ch-card-copy:disabled{color:#718092;border-color:#d8dfe8}
html[data-fw-theme="day"] .ch-metric:first-child strong{color:var(--ch-accent)}
html[data-fw-theme="day"] .ch-aside-kicker{color:#b4612b}

@media(max-width:940px){
  .ch-hero-mark{flex-basis:185px}
  .ch-hero h1{font-size:clamp(47px,6vw,68px)}
  .ch-pro-card{grid-template-columns:minmax(0,38%) minmax(0,62%)}
  .ch-player-portrait{min-height:402px}
  .ch-pro-content{padding:26px}
  .ch-pro-name{font-size:clamp(32px,4.5vw,43px)}
  .ch-cross-stage{min-height:140px}
}
@media(max-width:700px){
  .ch-hero{padding:42px 0 24px}
  .ch-hero-mark{display:none}
  .ch-metrics{gap:8px;margin:17px 0 20px}
  .ch-metric{padding:13px 11px;gap:8px}
  .ch-metric strong{font-size:25px}
  .ch-metric span{font-size:9px;letter-spacing:.35px}
  .ch-finder{padding:19px;margin-bottom:33px}
  .ch-finder-hint{display:none}
  .ch-search{flex-basis:100%}
  .ch-select{flex:1 1 170px}
  .ch-results-head{align-items:end}
  .ch-pro-card{grid-template-columns:1fr;min-height:0}
  .ch-player-portrait{min-height:355px;height:355px}
  .ch-portrait-img{transform:none}
  .ch-portrait-gradient{background:linear-gradient(0deg,#20242b77,transparent 32%)}
  .ch-pro-content{padding:23px 22px 22px}
  .ch-pro-name{font-size:39px}
  .ch-cross-stage{height:161px;min-height:161px;max-height:161px}
  .ch-how{margin-top:43px;padding:24px 21px}
}
@media(max-width:420px){
  .ch-hero h1{font-size:46px}
  .ch-hero h1 em{display:block}
  .ch-results-head h2{font-size:25px}
  .ch-metric{display:block;text-align:center}
  .ch-metric strong{font-size:24px}
  .ch-metric span{display:block;margin-top:7px;font-size:8px}
  .ch-finder{padding:17px 15px}
  .ch-player-portrait{height:332px;min-height:332px}
  .ch-pro-content{padding:20px 16px}
  .ch-pro-name{font-size:36px}
  .ch-pro-team{font-size:10px;padding:6px 9px}
  .ch-cross-stage{min-height:145px;height:145px}
  .ch-code-row{gap:6px;padding:9px}
  .ch-card-copy{font-size:10px;padding:0 11px;min-height:39px}
}
@media(prefers-reduced-motion:reduce){.ch-pro-card,.ch-portrait-img{transition:none}}


/* Player directory — 3 across on desktop, 4 only on extra-wide screens. */
.ch-page .ch-main{max-width:1260px}
.ch-teams{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.ch-pro-card{
  display:flex;flex-direction:column;height:100%;min-height:0;
  border-radius:12px;
}
.ch-player-portrait{
  flex:0 0 auto;height:228px;min-height:0;width:100%;
}
.ch-player-portrait:after{width:200px;height:200px;top:11%}
.ch-portrait-img{width:100%;height:100%;object-fit:contain;object-position:center bottom;transform:none}
.ch-photo-fallback{font-size:100px}
.ch-portrait-gradient{background:linear-gradient(to bottom,transparent 69%,#161b226b)}
.ch-pro-content{flex:1 1 auto;display:flex;flex-direction:column;padding:16px 17px 17px;min-width:0}
.ch-pro-heading{align-items:flex-start;flex-direction:column;justify-content:flex-start;gap:8px;min-height:88px}
.ch-pro-eyebrow{font-size:9px;letter-spacing:1.1px}
.ch-pro-name{font-size:clamp(25px,2.2vw,31px);line-height:1.1;margin:5px 0 0}
.ch-pro-team{font-size:10px;padding:5px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-cross-stage{flex:0 0 auto;margin:12px 0 0;height:112px;min-height:112px;max-height:112px}
.ch-cross-stage:after{font-size:8px;top:9px;left:10px;content:"CROSSHAIR / ILLUSTRATIVE"}
.ch-preview-controls{margin:9px 0 12px;gap:6px}
.ch-zoom-group,.ch-colors{gap:1px;padding:3px}
.ch-zoom,.ch-color-button{min-width:29px;height:27px;font-size:10px;padding:0 5px}
.ch-color-button{min-width:24px}
.ch-code-row{margin-top:auto;gap:7px;padding:7px}
.ch-code-value{font-size:10px;padding-left:3px}
.ch-card-copy{padding:0 10px;min-height:36px;font-size:10px}
@media(min-width:1700px){
  .ch-page .ch-main{max-width:1530px}
  .ch-teams{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:740px) and (max-width:1080px){
  .ch-teams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-player-portrait{height:245px;min-height:0}
}
@media(max-width:739px){
  .ch-teams{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .ch-player-portrait{height:200px;min-height:0}
  .ch-pro-content{padding:13px 11px}
  .ch-pro-heading{min-height:95px}
  .ch-pro-name{font-size:24px}
  .ch-cross-stage{height:94px;min-height:94px;max-height:94px}
  .ch-preview-controls{gap:4px}
  .ch-zoom,.ch-color-button{min-width:23px;height:25px;font-size:10px;padding:0 3px}
  .ch-color-button{min-width:20px}
  .ch-code-row{flex-direction:column;align-items:stretch}
  .ch-code-value{width:100%;line-height:1.4}
  .ch-card-copy{width:100%;min-height:34px}
}
@media(max-width:480px){
  .ch-teams{grid-template-columns:minmax(0,1fr);gap:13px}
  .ch-player-portrait{height:245px;min-height:0}
  .ch-pro-content{padding:16px 17px}
  .ch-pro-heading{min-height:75px}
  .ch-pro-name{font-size:29px}
  .ch-cross-stage{height:110px;min-height:110px;max-height:110px}
  .ch-code-row{flex-direction:row;align-items:center}
  .ch-card-copy{width:auto}
}


/* Compact directory identity: player nickname left, real team emblem right.
   The badge is intentionally icon-only; logo alt text is available to AT. */
.ch-pro-heading{flex-direction:row;align-items:center;justify-content:space-between;gap:8px;min-height:0}
.ch-pro-title-group{flex:1 1 auto;min-width:0}
.ch-pro-name{overflow-wrap:anywhere}
.ch-pro-team{
  flex:0 0 49px;display:grid;place-items:center;width:49px;height:49px;
  padding:6px;min-width:0;min-height:0;max-width:49px;
  background:#2c2c32;border:1px solid #52443d;border-radius:9px;
  color:#f7a477;box-shadow:inset 0 0 18px #fe84430a;
}
.ch-pro-team::before{content:none}
.ch-team-logo{display:block;width:100%;height:100%;max-width:37px;max-height:37px;object-fit:contain;object-position:center}
.ch-no-logo{font-size:16px;color:#9fa6b0}
html[data-fw-theme="day"] .ch-pro-team{background:#f3f5f8;border:1px solid #d4dde6}
@media(max-width:739px){
  .ch-pro-heading{min-height:0;flex-direction:row;align-items:center;gap:6px}
  .ch-pro-team{width:39px;height:39px;flex-basis:39px;max-width:39px;padding:5px}
  .ch-team-logo{max-width:29px;max-height:29px}
}
@media(max-width:480px){
  .ch-pro-heading{min-height:0;flex-direction:row;align-items:center}
  .ch-pro-team{width:45px;height:45px;flex-basis:45px;max-width:45px}
  .ch-team-logo{max-width:34px;max-height:34px}
}


/* CS2 share-code accurate preview: color, thickness, gap, length, dot and outline
   are decoded from each player's unique CS2 code instead of illustrated presets. */
.ch-cross-target{
  --ch-length:5px;--ch-thick:2px;--ch-space:5px;
  --ch-color:rgb(0,255,0);--ch-outline-shadow:none;
  --ch-outline-color:transparent;
}
.ch-cross-line,.ch-cross-dot,.ch-cross-shape{
  background:var(--ch-color);box-shadow:var(--ch-outline-shadow);
  border-radius:0;
}
.ch-cross-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--ch-thick);height:var(--ch-thick);
}
.ch-cross-shape{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:var(--ch-ring-size,14px);height:var(--ch-ring-size,14px);
  background:transparent;border:var(--ch-thick) solid var(--ch-color);
  box-shadow:var(--ch-outline-shadow);
}
.ch-cross-shape.is-circle{border-radius:50%}
.ch-cross-shape.is-square{border-radius:0}
.ch-cross-measures{
  font-size:9px;font-weight:850;letter-spacing:.15px;color:var(--ch-muted);
  display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  text-align:right;min-width:0;max-width:63%;
}
.ch-muted-measures{max-width:100%}
.ch-cross-stage:after{
  content:"PLAYER CROSSHAIR / CS2 CODE";
  font-size:8px;top:9px;left:10px;color:#838a97;
}
.ch-cross-stage.is-empty:after{content:"CROSSHAIR / NOT AVAILABLE"}
.ch-cross-stage.is-empty .ch-no-code{color:#a0a8b6}
.ch-preview-controls{gap:6px}
@media(max-width:739px){
  .ch-cross-measures{font-size:8px;letter-spacing:0;max-width:58%}
}


/* ProSettings-inspired in-game crosshair panel (only the preview surface).
   Shared FRAG WATCH card style, team logos, and copy controls are unchanged. */
.ch-page .ch-cross-stage{
  box-sizing:border-box;
  flex:0 0 auto;
  width:min(100%, 198px);
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  max-height:none;
  margin:14px auto 17px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid #aaa9a6;
  border-radius:10px;
  overflow:hidden;
  background-color:#939391;
  background-image:url("/crosshair/concrete-wall.svg");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 4px #4445;
}
.ch-page .ch-cross-stage::before,
.ch-page .ch-cross-stage::after{
  content:none;
  display:none;
}
.ch-page .ch-cross-target{
  position:relative;
  width:100%;
  height:100%;
  --ch-length:2px;
  --ch-thick:1px;
  --ch-space:2px;
}
.ch-page .ch-cross-line,
.ch-page .ch-cross-dot,
.ch-page .ch-cross-shape{
  box-shadow:var(--ch-outline-shadow, none);
  background:var(--ch-color, #00ff4c);
  filter:none;
}
.ch-page .ch-cross-shape.is-square{
  width:var(--ch-thick);
  height:var(--ch-thick);
  border:0;
  background:var(--ch-color);
}
.ch-page .ch-cross-shape.is-circle{
  background:transparent;
  border:var(--ch-thick) solid var(--ch-color);
}
.ch-page .ch-cross-stage.is-empty{
  border-color:var(--ch-border);
  background:#30323a;
}
.ch-page .ch-cross-stage.is-empty .ch-no-code{
  color:#aeb5c0;
  text-shadow:0 1px 2px #0009;
  font-size:10px;
}
html[data-fw-theme="day"] .ch-page .ch-cross-stage:not(.is-empty){
  background-color:#939391;
  background-image:url("/crosshair/concrete-wall.svg");
  border-color:#aaa9a6;
}
html[data-fw-theme="day"] .ch-page .ch-cross-stage.is-empty{
  background:#e4e8ee;
  border-color:#d2dbe6;
}
html[data-fw-theme="day"] .ch-page .ch-cross-stage.is-empty .ch-no-code{
  color:#5c6777;text-shadow:none;
}
@media(max-width:739px){
  .ch-page .ch-cross-stage{
    width:min(100%, 178px);
    margin:11px auto 13px;
  }
}
@media(max-width:480px){
  .ch-page .ch-cross-stage{
    width:min(100%, 198px);
    margin:12px auto 15px;
  }
}