/* Assets Jezu, découpés dans "jezu intermission.psd".
   Les coordonnées sont celles du PSD, origine en haut à gauche du groupe :
     SUBOGAL   -> (401, 948), canvas 533x132
     last sub  -> (950, 936), canvas 261x113
   Les positions verticales du texte ont été calées en comparant une capture
   du rendu HTML au rendu Photoshop, pas calculées : les métriques d'Owners
   (asc 1.029 / desc 0.354) donnent 1 à 2 px d'écart selon la taille. */

@font-face {
    font-family: "Owners XWide";
    src: url("fonts/OwnersXWide-Bold.woff2") format("woff2");
    font-weight: 700;
}

@font-face {
    font-family: "Owners XNarrow";
    src: url("fonts/OwnersXNarrow-BlackItalic.woff2") format("woff2");
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: "Owners Wide";
    src: url("fonts/OwnersWide-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
}

html, body {
    margin: 0;
    background: transparent;
    overflow: hidden;
}

.asset {
    position: relative;
    color: #fff;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.asset img, .asset div, .asset span {
    position: absolute;
}

/* --- Subgoal --------------------------------------------------------- */

.subgoal {
    width: 533px;
    height: 132px;
}

.subgoal .deco {                    /* soft shadow behind the bar, PSD opacity 140/255 */
    left: 0;
    top: 0;
    width: 290px;
    height: 132px;
    opacity: .549;
}

.subgoal .bar {
    left: 81px;
    top: 36px;
    width: 441px;
    height: 35px;
    background: url("img/bar-empty.png") no-repeat;
}

.subgoal .fill {                    /* width is the goal percentage; the sky
                                       image keeps its full size so it clips
                                       from the right, like the PSD's mask */
    left: 0;
    top: 0;
    height: 35px;
    background: url("img/bar-fill.png") left top no-repeat;
    transition: width .4s ease-out;
}

.subgoal .flags {
    left: 494px;
    top: 30px;
    width: 39px;
    height: 29px;
}

.subgoal .count {
    left: 473px;
    top: 45.3px;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    font: italic 700 14.77px "Owners Wide", sans-serif;
}

/* The trial Owners files ship no "/" glyph, so the separator is drawn.
   ponytail: 4 lines of CSS beats licensing a second font for one character. */
.subgoal .count .slash {
    position: static;
    width: 2px;
    height: 12px;
    margin: 0 3px;
    background: currentColor;
    transform: skewX(-12deg);       /* Owners' italic angle */
    align-self: center;
}

.subgoal .count span {
    position: static;
}

.subgoal .goaltext {
    left: 87px;
    top: 82px;
    font: italic 700 10.79px/12.95px "Owners Wide", sans-serif;
    white-space: nowrap;
}

/* --- Last sub -------------------------------------------------------- */

.lastsub {
    width: 261px;
    height: 113px;
}

.lastsub .plaque {
    left: 0;
    top: 0;
    width: 261px;
    height: 113px;
}

.lastsub .label {
    left: 91.3px;
    top: 23.1px;
    font: 700 16.35px "Owners XWide", sans-serif;
}

.lastsub .pseudo {
    left: 88.5px;
    top: 28.8px;
    font: italic 900 54.75px "Owners XNarrow", sans-serif;
    white-space: nowrap;
}

.subgoal .goaltext span {
    position: static;
    display: block;
}