@font-face {
    font-family: 'FWC26';
    src: url('../assets/fonts/FWC26-SemiExpandedBlack.ttf') format('truetype');
    font-weight: 900;
}

@font-face {
    font-family: 'FWC26Condensed';
    src: url('../assets/fonts/FWC26-CondensedBlack.ttf') format('truetype');
    font-weight: 900;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    background: #ffffff;
    margin: 0;
}

/* ========================= */
/* PAGE                      */
/* ========================= */

.page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 20vw;
    gap: 60px;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* ========================= */
/* BARRAS LATERAIS           */
/* ========================= */

.deco-left,
.deco-right {
    position: absolute;
    top: 0;
    width: 15vw;
    max-width: 215px;
    height: 100%;
    z-index: 0;
    opacity: 0.21;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 215 780' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M215 322.5C215 352.185 190.935 376.25 161.25 376.25H53.75C24.0647 376.25 0 352.185 0 322.5H215Z' fill='%23F45E03'/%3E%3Cpath d='M215 483.75C215 513.435 190.935 537.5 161.25 537.5H53.75C24.0647 537.5 0 513.435 0 483.75H215Z' fill='%235BBD60'/%3E%3Cpath d='M215 0C215 29.6853 190.935 53.75 161.25 53.75H53.75C24.0647 53.75 0 29.6853 0 0H215Z' fill='%23BCD81C'/%3E%3Cpath d='M215 645C215 674.685 190.935 698.75 161.25 698.75H53.75C24.0647 698.75 0 674.685 0 645H215Z' fill='%23760003'/%3E%3Cpath d='M161.25 376.25C190.935 376.25 215 400.315 215 430H161.25C190.935 430 215 454.065 215 483.75H0V430C2.72805e-05 400.315 24.0647 376.25 53.75 376.25H161.25Z' fill='%235BBD60'/%3E%3Cpath d='M161.25 537.5C190.935 537.5 215 561.565 215 591.25H161.25C190.935 591.25 215 615.315 215 645H0V591.25C2.72805e-05 561.565 24.0647 537.5 53.75 537.5H161.25Z' fill='%23760003'/%3E%3Cpath d='M161.25 53.75C190.935 53.75 215 77.8147 215 107.5H161.25C190.935 107.5 215 131.565 215 161.25H0V107.5C2.72805e-05 77.8147 24.0647 53.75 53.75 53.75H161.25Z' fill='%231437B5'/%3E%3Cpath d='M161.25 698.75C190.935 698.75 215 722.815 215 752.5H161.25C190.935 752.5 215 776.565 215 806.25H0V752.5C2.72805e-05 722.815 24.0647 698.75 53.75 698.75H161.25Z' fill='%23BCD81C'/%3E%3Cpath d='M107.5 376.25C107.5 405.935 83.4353 430 53.75 430H107.5V483.75H0V430C2.72805e-05 400.315 24.0647 376.25 53.75 376.25H107.5Z' fill='%23BCD921'/%3E%3Cpath d='M107.5 537.5C107.5 567.185 83.4353 591.25 53.75 591.25H107.5V645H0V591.25C2.72805e-05 561.565 24.0647 537.5 53.75 537.5H107.5Z' fill='%23172482'/%3E%3Cpath d='M107.5 53.75C107.5 83.4353 83.4353 107.5 53.75 107.5H107.5V161.25H0V107.5C2.72805e-05 77.8147 24.0647 53.75 53.75 53.75H107.5Z' fill='%23FF1200'/%3E%3Cpath d='M107.5 698.75C107.5 728.435 83.4353 752.5 53.75 752.5H107.5V806.25H0V752.5C2.72805e-05 722.815 24.0647 698.75 53.75 698.75H107.5Z' fill='%23AAC9ED'/%3E%3Cpath d='M53.75 322.5C83.4353 322.5 107.5 346.565 107.5 376.25H53.75C24.0647 376.25 0 352.185 0 322.5H53.75Z' fill='%23BED924'/%3E%3Cpath d='M53.75 483.75C83.4353 483.75 107.5 507.815 107.5 537.5H53.75C24.0647 537.5 0 513.435 0 483.75H53.75Z' fill='%23172482'/%3E%3Cpath d='M53.75 0C83.4353 0 107.5 24.0647 107.5 53.75H53.75C24.0647 53.75 0 29.6853 0 0H53.75Z' fill='%23FF1200'/%3E%3Cpath d='M53.75 645C83.4353 645 107.5 669.065 107.5 698.75H53.75C24.0647 698.75 0 674.685 0 645H53.75Z' fill='%23AAC9ED'/%3E%3Cpath d='M215 161.25C215 190.935 190.935 215 161.25 215H53.75C24.0647 215 0 190.935 0 161.25H215Z' fill='%231437B5'/%3E%3Cpath d='M161.25 215C190.935 215 215 239.065 215 268.75H161.25C190.935 268.75 215 292.815 215 322.5H0V268.75C2.72805e-05 239.065 24.0647 215 53.75 215H161.25Z' fill='%23F45E03'/%3E%3Cpath d='M107.5 215C107.5 244.685 83.4353 268.75 53.75 268.75H107.5V322.5H0V268.75C2.72805e-05 239.065 24.0647 215 53.75 215H107.5Z' fill='%2346C1CE'/%3E%3Cpath d='M53.75 161.25C83.4353 161.25 107.5 185.315 107.5 215H53.75C24.0647 215 0 190.935 0 161.25H53.75Z' fill='%2346C1CE'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 100% auto;
}

.deco-left {
    left: 0;
}

.deco-right {
    right: 0;
    transform: scaleX(-1);
}

/* ========================= */
/* CONTEUDO                  */
/* ========================= */

.mobile-subtitle {
    display: none;
}

.content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 60px;
    z-index: 2;
}

/* ========================= */
/* CAPA DO ALBUM             */
/* ========================= */

.album-cover {
    position: relative;
    width: clamp(200px, 25vw, 357px);
    flex-shrink: 0;
    filter: drop-shadow(-3.76px 7.52px 37.58px rgba(40, 40, 40, 0.25));
}

.album-cover img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.parte-badge {
    position: absolute;
    top: 20px;
    right: -20px;
    background: #000000;
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    line-height: 23px;
    padding: 9px 12px;
    border-radius: 9px;
    box-shadow: 0px 7.3px 7.3px rgba(0, 0, 0, 0.25);
    text-align: center;
    white-space: nowrap;
}

/* ========================= */
/* INFO DO ALBUM             */
/* ========================= */

.album-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    max-width: 343px;
}

.album-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.desktop-subtitle {
    font-family: 'FWC26Condensed', Helvetica, Arial, sans-serif;
    font-weight: 900;
    font-size: 20px;
    line-height: 32px;
    color: #2D2D2D;
    text-transform: uppercase;
}

.title {
    font-family: 'FWC26', Helvetica, Arial, sans-serif;
    font-weight: 900;
    color: #000000;
}

.title .fifa-line {
    font-size: 36px;
    line-height: 1.1;
    display: block;
}

.title .year-line {
    font-size: 90px;
    line-height: 1;
    display: flex;
    align-items: flex-start;
}

.title .tm {
    font-size: 16px;
    vertical-align: super;
    margin-left: 2px;
    line-height: 1;
}

.description {
    font-size: 20px;
    line-height: 23px;
    color: #8C8B8B;
}

.track-name {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: #2D2D2D;
    width: 100%;
}

/* ========================= */
/* PLAYER DE AUDIO           */
/* ========================= */

.player {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}

.progress-container {
    width: 100%;
}

.time-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
}

.time-row span {
    font-size: 16px;
    line-height: 110.5%;
    color: #828282;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #009739 0%, #002776 25%, #CC0000 40%, #CC0000 100%);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.progress-fill {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    background: #D9D9D9;
    border-radius: 4px;
    transition: width 0.1s linear;
}

.progress-thumb {
    width: 22px;
    height: 22px;
    background: #CC0000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0%;
    cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.btn-control {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-control svg {
    fill: #2D2D2D;
}

.btn-play {
    width: 65px;
    height: 65px;
    background: #2D2D2D;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.btn-play svg {
    fill: #ffffff;
}

.btn-play .icon-play {
    margin-left: 3px;
}

/* ========================= */
/* BOTAO DO SITE             */
/* ========================= */

.btn-site {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #2D2D2D;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'FWC26Condensed', Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    text-decoration: none;
    padding: 14px 32px;
    border-radius: 1610px;
    border: none;
    cursor: pointer;
    z-index: 3;
}

.btn-site:hover {
    opacity: 0.9;
}

/* ========================= */
/* TOAST                     */
/* ========================= */

.tap-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 45, 45, 0.92);
    color: #ffffff;
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 24px;
    border-radius: 999px;
    z-index: 100;
    text-align: center;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.tap-toast.hidden {
    opacity: 0;
}