/* ═══════════════════════════════════════════════════════
   Football Rivals Stats v2 – Public Widget
   Aesthetic: Editorial brutalismo – crema / naranja quemado / lima
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@400;700;800;900&family=Barlow:wght@400;500;600&display=swap');

.frs2-widget *, .frs2-widget *::before, .frs2-widget *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ── Wrapper ── */
.frs2-widget {
    font-family: 'Barlow', sans-serif;
    background: #F5F0E8;
    color: #0D0D0D;
    border-radius: 6px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto 40px;
    border: 2.5px solid #0D0D0D;
    box-shadow: 8px 8px 0 #0D0D0D;
}

/* ══════════════════════════════
   HERO – diagonal split
══════════════════════════════ */
.frs2-hero {
    position: relative;
    min-height: 240px;
    overflow: hidden;
}
.frs2-hero-split {
    position: absolute; inset: 0;
    display: flex;
}
.frs2-hs-left {
    background: var(--c1);
    flex: 1;
    clip-path: polygon(0 0, 100% 0, calc(100% - 60px) 100%, 0 100%);
}
.frs2-hs-right {
    background: var(--c2);
    flex: 1;
    clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
}
/* texture overlay */
.frs2-hs-left::after, .frs2-hs-right::after {
    content: '';
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        -45deg, transparent, transparent 6px,
        rgba(0,0,0,.06) 6px, rgba(0,0,0,.06) 7px
    );
}
.frs2-hs-divider {
    position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 3px;
    background: #0D0D0D;
    transform: translateX(-50%) skewX(-8deg);
    z-index: 3;
}

.frs2-hero-inner {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 28px 20px;
    gap: 0;
}

/* player sides */
.frs2-phero { display: flex; align-items: center; gap: 12px; }
.frs2-phero-2 { flex-direction: row-reverse; }

.frs2-photo-frame {
    flex-shrink: 0;
    width: 100px; height: 100px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(0,0,0,.15);
    border: 3px solid #0D0D0D;
    box-shadow: 4px 4px 0 #0D0D0D;
}
.frs2-photo-frame img { width:100%; height:100%; object-fit:cover; }
.frs2-ph-init {
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    font-family:'Bebas Neue',sans-serif;
    font-size:2.8rem; color:rgba(0,0,0,.3);
}

.frs2-pinfo    { flex:1; }
.frs2-pinfo-2  { text-align:right; }
.frs2-pflag    { font-size:1.3rem; margin-bottom:3px; }
.frs2-pname {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: .9;
    color: #0D0D0D;
    text-shadow: 2px 2px 0 rgba(0,0,0,.15);
}
.frs2-pclub {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: rgba(0,0,0,.55);
    margin-top: 2px;
}
.frs2-pbadge {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 2px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    background: #0D0D0D;
    color: #fff;
}
.frs2-pb-1 { background:#0D0D0D; color:var(--c1); }
.frs2-pb-2 { background:#0D0D0D; color:var(--c2); }

/* center */
.frs2-center {
    padding: 0 20px;
    text-align: center;
}
.frs2-ctitle {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(0,0,0,.5);
    margin-bottom: 6px;
}
.frs2-vs {
    width: 62px; height: 62px;
    border-radius: 3px;
    background: #0D0D0D;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: .08em;
    border: 2.5px solid #0D0D0D;
    box-shadow: 3px 3px 0 var(--c1);
}
.frs2-csub {
    font-size: .62rem;
    color: rgba(0,0,0,.4);
    max-width: 110px;
    margin: 0 auto 10px;
    line-height: 1.35;
}
.frs2-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}
.frs2-sc1 { color: var(--c1); }
.frs2-sc2 { color: var(--c2); }
.frs2-scsep { color: rgba(0,0,0,.25); font-size: 1.5rem; }
.frs2-draws {
    font-size: .62rem;
    color: rgba(0,0,0,.35);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-top: 3px;
}

/* ══════════════════════════════
   STATS
══════════════════════════════ */
.frs2-stats-wrap {
    background: #fff;
    border-top: 2.5px solid #0D0D0D;
}
.frs2-stats-head {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    align-items: center;
    padding: 10px 20px;
    background: #0D0D0D;
}
.frs2-sh-l {
    font-family: 'Bebas Neue', sans-serif;
    font-size: .95rem;
    letter-spacing: .1em;
    color: var(--c1);
}
.frs2-sh-r {
    font-family: 'Bebas Neue', sans-serif;
    font-size: .95rem;
    letter-spacing: .1em;
    color: var(--c2);
    text-align: right;
}
.frs2-sh-m {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}

.frs2-srow {
    display: grid;
    grid-template-columns: 1fr 160px 1fr;
    align-items: center;
    padding: 8px 20px;
    border-bottom: 1.5px solid #f0ebe2;
    opacity: 0;
    transform: translateX(-8px);
}
.frs2-srow.frs2-vis {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .35s ease, transform .35s ease;
}
.frs2-srow:hover { background: #fdf8f0; }
.frs2-srow.w1 { border-left: 3px solid var(--c1); }
.frs2-srow.w2 { border-right: 3px solid var(--c2); }

.frs2-sl, .frs2-sr {
    display: flex; align-items: center; gap: 8px;
}
.frs2-sr { flex-direction: row-reverse; }

.frs2-sv {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    min-width: 44px;
    text-align: center;
    color: #aaa;
}
.frs2-sv.frs2-win {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0D0D0D;
}
.frs2-sv1.frs2-win { color: var(--c1-dark, #CC3D00); }
.frs2-sv2.frs2-win { color: var(--c2-dark, #88CC00); }

/* bars */
.frs2-bwrap {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
}
.frs2-bar {
    height: 100%;
    border-radius: 2px;
    transition: width .7s cubic-bezier(.4,0,.2,1);
}
.frs2-b1 {
    background: var(--c1);
    float: right;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
}
.frs2-b2 {
    background: var(--c2);
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.1);
}

.frs2-slabel {
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #999;
    line-height: 1.2;
    padding: 0 4px;
}

/* ── Footer ── */
.frs2-foot {
    background: #0D0D0D;
    color: rgba(255,255,255,.25);
    text-align: center;
    padding: 10px;
    font-size: .64rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-top: 2.5px solid #0D0D0D;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .frs2-hero-inner { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    .frs2-phero-2 { flex-direction: row; }
    .frs2-center { order: -1; }
    .frs2-photo-frame { width: 64px; height: 64px; }
    .frs2-pname { font-size: 1.6rem; }
    .frs2-stats-head, .frs2-srow { grid-template-columns: 1fr 100px 1fr; padding: 7px 10px; }
    .frs2-slabel { font-size: .58rem; }
    .frs2-hs-divider { display: none; }
}