@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* ===========================
   Fonts (local + fallbacks)
   =========================== */

/* Shapiro 500 (Middle) */
@font-face {
    font-family: "Shapiro";
    src: url("../fonts/Shapiro%2055%20Middle.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Shapiro 700 (Heavy) */
@font-face {
    font-family: "Shapiro";
    src: url("../fonts/Shapiro%2075%20Heavy.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* Shapiro 900 (Super Heavy) */
@font-face {
    font-family: "Shapiro";
    src: url("../fonts/Shapiro%2085%20Super%20Heavy.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Fallbacks (Ubuntu + Emoji) */

/* ===========================
   Root tokens
   =========================== */
:root{
    --skew: 7deg;          /* angle du bandeau trapèze */
    --padY: 12px;
    --padX: 26px;           /* + large pour éviter la coupe */
    --bevel: 4.5%;          /* taille du biseau */

    /* Palette inversée */
    --banner-fill: #0b0b0b;      /* fond du bandeau (noir) */
    --banner-border: #ffffff;    /* bordure blanche */
    --banner-text: #ffffff;      /* texte du bandeau */
    --shadow: rgba(0,0,0,.40);
}


/* ===========================
   Base page
   =========================== */
body {
    margin: 0;
    background: #00000000;
    overflow: hidden;
    font-family: "Anton", sans-serif;
    /* font-family: "Shapiro", "Ubuntu", "Noto Color Emoji", sans-serif; */
}


/* ===========================
   Bloc toast (container)
   =========================== */
#message{
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) translateY(20px);  /* slide-in */
    background: transparent;
    color: white;
    padding: 0;
    border-radius: 0;
    font-size: clamp(16px, 2vw, 20px);
    opacity: 0;
    white-space: nowrap;
    transition: transform .6s ease, opacity .6s ease;
    width: fit-content;
}


/* ===========================
   Round badge (no skew, outlined text)
   =========================== */
#message .round-badge{
    position: absolute;
    top: -5px;                 /* juste au-dessus du bandeau */
    left: 12px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    clip-path: none;
    transform: none;
    z-index: 3;             /* au-dessus du bandeau */
    pointer-events: none;
}

#message .round-badge .text{
    display: inline-block;
    padding: 2px 10px;
    font-weight: 900;
    color: #ffffff;
    -webkit-text-stroke: 0.1px #444444;  /* outline léger */
    letter-spacing: 1px;
}


/* ===========================
   Wrapper interne (aucun skew ici)
   =========================== */
#message .msg-wrap{
    position: relative;
    padding-top: 14px;      /* espace pour le badge */
    overflow: visible;      /* ne pas couper les pseudos */
}


/* ===========================
   Bandeau trapèze (skew ici)
   =========================== */
#message .score-banner{
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    overflow: visible;
    z-index: 1;

    /* skew du bandeau */
    transform: skewX(var(--skew));
}

/* Bordure BLANCHE (couche externe) */
#message .score-banner::before{
    content:"";
    position:absolute;
    inset: -2px;                                /* déborde pour la bordure */
    background: var(--banner-border);
    clip-path: polygon(
            var(--bevel) 0%,
            100% 0%,
            calc(100% - var(--bevel)) 100%,
            0% 100%
    );
    z-index: -2;
    box-shadow: 0 10px 12px var(--shadow);
}

/* Remplissage NOIR (couche interne) */
#message .score-banner::after{
    content:"";
    position:absolute;
    inset: 0;
    background: var(--banner-fill);
    clip-path: polygon(
            var(--bevel) 0%,
            100% 0%,
            calc(100% - var(--bevel)) 100%,
            0% 100%
    );
    z-index: -1;
}

/* Texte désincliné pour rester droit & lisible */
#message .score-text{
    display:inline-block;
    position: relative;
    z-index: 3;
    color: var(--banner-text);
    font-weight: 300;
    letter-spacing: .5px;
    padding: var(--padY) var(--padX);
    line-height: 1.05;
    white-space: nowrap;

    /* anti-skew du texte */
    transform: skewX(calc(-1 * var(--skew)));
}


/* ===========================
   Score
   =========================== */
.score-display{
    /* font-weight: 900; */
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-left: 12px;
    font-size: 1em;
}


/* ===========================
   Apparition
   =========================== */
.visible{
    opacity:1 !important;
    transform: translateX(-50%) translateY(0);
}


/* ===========================
   Typo / accents (noms, romaji…)
   =========================== */
.winner{color:#00ff99;/* font-weight:700; */}
.loser{color: #ff4346;/* font-weight:700; */}
.upset{ color:#CDF363; font-weight:bolder; }

small{
    font-size: 14px;
    color: #777;
    margin-left: 4px;
}