/* Short visual explanations inside the original four How it works cards. */
#how-it-works .cp-auction-card { --how-ink:#062817; --how-muted:#657d6b; --how-line:rgb(36 77 54 / .16); --how-panel:#fffef8; color:var(--how-ink); }
#how-it-works .cp-auction-card:nth-child(even) { --how-ink:#fff7ef; --how-muted:#d9e3d2; --how-line:rgb(255 240 223 / .24); --how-panel:rgb(6 40 23 / .18); }
#how-it-works .cp-auction-card-top { align-items:center; }
#how-it-works .cp-auction-card-top > span:first-child { font-size:48px; line-height:1; }
#how-it-works .how-card-icon { display:flex; margin:0; color:inherit; }
#how-it-works .how-card-icon > svg { display:block; width:36px; height:36px; }
#how-it-works .cp-auction-card h3 { margin:12px 0 16px; font-size:clamp(22px,2.25vw,32px); line-height:1.12; }
#how-it-works .how-visual { display:flex; align-items:center; justify-content:center; gap:12px; height:140px; min-width:0; }
#how-it-works .how-visual * { box-sizing:border-box; }
#how-it-works .how-visual svg { display:block; flex-shrink:0; }
#how-it-works .how-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.how-symbols { position:absolute; width:0; height:0; overflow:hidden; }
#how-it-works .how-portrait { display:block; width:100%; aspect-ratio:1; border-radius:8px; background:#062817 url(auction/players-atlas.png) var(--portrait-x,0%) var(--portrait-y,0%) / 300% 200% no-repeat; }
#how-it-works .how-create { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr) minmax(0,1.4fr); align-items:center; gap:14px; width:100%; }
#how-it-works .how-profile { width:min(100%,100px); margin-inline:auto; }
#how-it-works .how-profile .how-portrait { border:2px solid #d9dfc4; border-radius:50%; }
#how-it-works .how-roles { display:flex; flex-direction:column; gap:9px; width:100%; max-width:144px; }
#how-it-works .how-role { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 8px; border:1px solid var(--how-line); border-radius:8px; color:#244d36; background:#f6f6e6; font-size:11px; line-height:1; font-weight:600; }
#how-it-works .how-role.is-selected { border-color:#91a582; background:#eef3dc; color:#0b3d23; }
#how-it-works .how-role svg { width:19px; height:19px; }
#how-it-works .how-invite { min-width:0; padding-left:12px; border-left:1px solid var(--how-line); }
#how-it-works .how-invite-faces { display:flex; align-items:center; gap:5px; }
#how-it-works .how-invite-face { flex:1 1 0; max-width:52px; min-width:0; overflow:hidden; border-radius:7px; }
#how-it-works .how-invite-add { display:grid; place-items:center; flex:1 1 0; min-width:0; max-width:42px; aspect-ratio:1; border:1px dashed #91a582; border-radius:7px; color:#607066; }
#how-it-works .how-invite-add svg { width:18px; height:18px; }
#how-it-works .how-invite-label { display:block; margin-top:10px; color:var(--how-muted); font-size:10px; line-height:1; text-align:right; }
#how-it-works .how-setup { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:center; gap:18px; width:100%; height:100%; }
#how-it-works .how-bracket { position:relative; height:134px; }
#how-it-works .how-bracket-lines { position:absolute; inset:0; width:100%; height:100%; color:#f4dcd0; }
#how-it-works .how-bracket-team { position:absolute; display:grid; place-items:center; width:47px; height:47px; border:1px solid #ebd0ad; border-radius:9px; background:#062817; }
#how-it-works .how-bracket-team:nth-of-type(1) { top:0; left:0; background:#173044; }
#how-it-works .how-bracket-team:nth-of-type(2) { bottom:0; left:0; background:#174b2d; }
#how-it-works .how-bracket-team:nth-of-type(3) { top:0; right:0; background:#1a453b; }
#how-it-works .how-bracket-team:nth-of-type(4) { bottom:0; right:0; background:#30243b; }
#how-it-works .how-crest { width:31px; height:36px; color:#e8bf6b; }
#how-it-works .how-bracket-cup { position:absolute; top:50%; left:50%; color:#edc36e; transform:translate(-50%,-50%); }
#how-it-works .how-bracket-cup svg { width:31px; height:34px; }
#how-it-works .how-fixtures { width:100%; max-width:210px; padding:9px; border:1px solid #fff5e3; border-radius:10px; background:#fff9f0; }
#how-it-works .how-fixture-tabs { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:20px; background:#eee5e3; }
#how-it-works .how-fixture-tabs span { padding:6px 2px; border-radius:20px; color:#607066; text-align:center; font-size:10px; line-height:1; font-weight:600; }
#how-it-works .how-fixture-tabs .is-selected { background:#0b3d23; color:#fff7ec; }
#how-it-works .how-calendar-dots { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); justify-items:center; align-items:center; gap:10px 4px; padding:12px 2px 4px; }
#how-it-works .how-calendar-dots small { color:#6f5b64; font-size:8px; line-height:1; }
#how-it-works .how-calendar-dots i { width:5px; height:5px; border-radius:50%; background:#d1c3c5; }
#how-it-works .how-calendar-dots i.is-selected { width:10px; height:10px; background:#0b3d23; }
#how-it-works .how-live { position:relative; width:100%; height:140px; overflow:hidden; border:1px solid var(--how-line); border-radius:10px; background:#5c7351; color:#fff; }
#how-it-works .how-live > img { display:block; width:100%; height:100%; object-fit:cover; object-position:35% 45%; }
#how-it-works .how-live::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,#15221150); pointer-events:none; }
#how-it-works .how-live-label { display:flex; position:absolute; z-index:1; top:9px; left:9px; align-items:center; gap:5px; padding:6px 8px; border:1px solid #fa8392; border-radius:6px; background:#0b3d23; color:#fff; font-size:9px; line-height:1; font-weight:700; }
#how-it-works .how-live-label::before { content:''; width:5px; height:5px; border-radius:50%; background:#fff; }
#how-it-works .how-score-strip { display:flex; position:absolute; z-index:1; bottom:9px; left:9px; align-items:center; gap:10px; padding:7px 10px; border:1px solid #f9f0e233; border-radius:7px; background:#172119d9; color:#fff; }
#how-it-works .how-score-strip span { font-size:10px; font-weight:600; }
#how-it-works .how-score-strip strong { font:750 20px/1 'Manrope',sans-serif; }
#how-it-works .how-score-strip small { padding-left:9px; border-left:1px solid #ffffff42; font-size:10px; line-height:1.2; }
#how-it-works .how-score-chips { display:flex; position:absolute; z-index:1; right:9px; bottom:9px; gap:5px; }
#how-it-works .how-score-chips span { display:grid; place-items:center; width:28px; height:29px; border:1px solid #fffaf1; border-radius:6px; background:#fff8ede8; color:#244d36; font-size:12px; line-height:1; font-weight:750; }
#how-it-works .how-report { display:flex; align-items:center; gap:14px; width:100%; height:100%; padding:10px; border:1px solid var(--how-line); border-radius:10px; background:var(--how-panel); }
#how-it-works .how-report-photo { flex:0 1 88px; min-width:0; }
#how-it-works .how-wagon { width:104px; height:104px; }
#how-it-works .how-performance { display:flex; flex:1 1 0; flex-direction:column; gap:14px; min-width:45px; }
#how-it-works .how-performance > span { display:flex; align-items:center; gap:7px; }
#how-it-works .how-performance svg { width:14px; height:14px; color:#f8e7d5; }
#how-it-works .how-performance-bar { display:block; flex:1 1 0; height:8px; overflow:hidden; border:1px solid #e4b9ac38; border-radius:8px; background:#fff5e51a; }
#how-it-works .how-performance-bar b { display:block; width:var(--bar,60%); height:100%; border-radius:inherit; background:var(--bar-color,#174b2d); }
#how-it-works .how-share { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:5px; padding:9px 10px; border:1px solid #fff0db; border-radius:8px; background:#fff5e7; color:#0b3d23; font-size:10px; line-height:1; font-weight:700; }
#how-it-works .how-share svg { width:17px; height:17px; }
@media (max-width:1100px) and (min-width:701px) {
  #how-it-works .how-create { gap:9px; }
  #how-it-works .how-role { gap:5px; padding:10px 5px; font-size:10px; }
  #how-it-works .how-role svg { width:14px; height:14px; }
  #how-it-works .how-invite { padding-left:8px; }
  #how-it-works .how-invite-add svg { width:13px; height:13px; }
  #how-it-works .how-setup { gap:12px; }
  #how-it-works .how-bracket-team { width:37px; height:41px; }
  #how-it-works .how-crest { width:25px; height:31px; }
  #how-it-works .how-fixtures { padding:6px; }
  #how-it-works .how-fixture-tabs span { font-size:9px; }
  #how-it-works .how-report { gap:9px; padding:9px; }
  #how-it-works .how-report-photo { flex-basis:58px; }
  #how-it-works .how-wagon { width:64px; height:64px; }
  #how-it-works .how-share { padding:8px 7px; font-size:9px; }
}
@media (max-width:700px) {
  #how-it-works .cp-auction-card-top > span:first-child { font-size:42px; }
  #how-it-works .how-card-icon > svg { width:30px; height:30px; }
  #how-it-works .cp-auction-card h3 { font-size:24px; margin-block:14px 18px; }
}
@media (max-width:480px) {
  #how-it-works .how-report { gap:10px; padding:9px; }
  #how-it-works .how-report-photo { display:none; }
  #how-it-works .how-wagon { width:78px; height:78px; }
  #how-it-works .how-setup { gap:12px; }
  #how-it-works .how-bracket-team { width:37px; height:41px; }
  #how-it-works .how-crest { width:25px; height:31px; }
  #how-it-works .how-fixtures { padding:6px; }
  #how-it-works .how-fixture-tabs span { font-size:9px; }
}
@media (max-width:400px) {
  #how-it-works .cp-auction-card { padding:22px 18px; }
  #how-it-works .cp-auction-card h3 { font-size:22px; }
  #how-it-works .how-create { gap:7px; }
  #how-it-works .how-role { gap:4px; padding:9px 5px; font-size:9px; }
  #how-it-works .how-role svg { width:12px; height:12px; }
  #how-it-works .how-invite { padding-left:6px; }
  #how-it-works .how-invite-faces { gap:3px; }
  #how-it-works .how-invite-add svg { width:12px; height:12px; }
  #how-it-works .how-invite-label { font-size:8px; }
  #how-it-works .how-score-strip { gap:6px; padding:7px 8px; }
  #how-it-works .how-score-strip strong { font-size:17px; }
  #how-it-works .how-score-strip small { display:none; }
  #how-it-works .how-score-chips { gap:4px; }
  #how-it-works .how-score-chips span { width:24px; height:28px; font-size:11px; }
  #how-it-works .how-wagon { width:64px; height:64px; }
  #how-it-works .how-share { padding:8px 7px; font-size:9px; }
  #how-it-works .how-performance { gap:12px; }
}