:root {
    --widget-width: 492px;
    --widget-height: 704px;
    --background: rgba(0, 38, 65, 0.92);
    --border: rgba(144, 185, 226, 0.86);
    --primary-text: #ffffff;
    --secondary-text: rgba(237, 237, 237, 0.76);
    --accent: #faa634;
    --accent-strong: #e89a30;
    --rotation-duration: 9000ms;
    --player-name-size: 22px;
}

* { box-sizing: border-box; }

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
    font-family: Inter, Arial, Helvetica, sans-serif;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

.player-widget {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) 5px;
    width: var(--widget-width);
    height: var(--widget-height);
    padding: 14px;
    overflow: hidden;
    color: var(--primary-text);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 52%),
        linear-gradient(90deg, rgba(0, 85, 150, 0.34), transparent),
        var(--background);
    border: 4px solid var(--border);
    box-shadow: 0 18px 46px rgba(0, 85, 150, 0.4);
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 100% 0 0);
}

body::before,
body::after {
    content: "";
    position: fixed;
    left: calc(50% - (var(--widget-width) / 2));
    top: calc(50% - (var(--widget-height) / 2));
    width: 4px;
    height: var(--widget-height);
    background: var(--border);
    opacity: 0;
    pointer-events: none;
    z-index: 100;
}

body::before {
    transform: scaleY(0);
    transform-origin: center;
}

body.widget-revealing::before {
    animation: drawLeftBorder 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.widget-revealing::after {
    animation: moveRightBorder 0.68s 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.player-widget.reveal-animation {
    visibility: visible;
    animation: revealWidget 0.68s 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.player-widget.ready {
    opacity: 1;
    visibility: visible;
    clip-path: inset(0);
}

body.widget-ready::before,
body.widget-ready::after { opacity: 0; }

.player-widget.reveal-animation .player-stage,
.player-widget.reveal-animation .rotation-track {
    animation: contentIn 0.34s 0.78s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.player-widget.ready .player-stage,
.player-widget.ready .rotation-track {
    opacity: 1;
}

.player-stage {
    position: relative;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(144, 185, 226, 0.16), transparent 58%),
        rgba(18, 18, 18, 0.52);
    border: 1px solid rgba(144, 185, 226, 0.28);
    opacity: 0;
}

.player-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-plate {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    width: 340px;
    height: 185px;
    padding: 0;
    overflow: hidden;
    background: linear-gradient(145deg, #005596, #002641 72%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    box-shadow: inset 18px 0 28px rgba(255, 255, 255, 0.08), inset -16px -16px 28px rgba(0, 38, 65, 0.34);
    outline: 1px solid rgba(144, 185, 226, 0.18);
    outline-offset: -1px;
}

.player-plate::before {
    content: none;
}

.player-plate::after {
    content: none;
}

.player-stage::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: 181px;
    z-index: 5;
    width: 392px;
    height: 8px;
    background: #e7eef2;
    box-shadow: 0 4px 12px rgba(0, 38, 65, 0.4);
    transform: rotate(-28.5deg);
    transform-origin: right center;
    pointer-events: none;
}

.player-name {
    position: absolute;
    right: 26px;
    bottom: 62px;
    z-index: 4;
    width: 190px;
    overflow: hidden;
    color: var(--primary-text);
    font-size: var(--player-name-size);
    font-weight: 900;
    letter-spacing: 0.05em;
    line-height: 1.05;
    text-align: center;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-shadow: 0 2px 7px rgba(0, 38, 65, 0.46);
    transform: rotate(-28deg);
    white-space: nowrap;
}

.rotation-track {
    width: 100%;
    height: 5px;
    margin-top: 14px;
    overflow: hidden;
    background: rgba(237, 237, 237, 0.18);
    opacity: 0;
}

.rotation-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}

.player-widget.ready .rotation-fill.running {
    animation: rotationProgress var(--rotation-duration) linear forwards;
}

.fade-out { animation: fadeOut 260ms ease-in forwards; }
.fade-in { animation: fadeIn 420ms ease-out forwards; }

@keyframes drawLeftBorder {
    from { opacity: 1; transform: scaleY(0); }
    to { opacity: 1; transform: scaleY(1); }
}

@keyframes moveRightBorder {
    0% { opacity: 1; transform: translateX(0); }
    99% { opacity: 1; transform: translateX(calc(var(--widget-width) - 4px)); }
    100% { opacity: 0; transform: translateX(calc(var(--widget-width) - 4px)); }
}

@keyframes revealWidget {
    from { opacity: 1; clip-path: inset(0 100% 0 0); }
    to { opacity: 1; clip-path: inset(0); }
}

@keyframes contentIn {
    from { opacity: 0; transform: translateX(-14px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes rotationProgress {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes fadeOut {
    to { opacity: 0; transform: scale(0.992); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(1.006); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}