/*
 * Site-wide interface fixes.
 * Keeps navigation in the top bar, removes the legacy sidebar/background grid,
 * and separates corner hats from the animated Pocoyo cosmetic.
 */

:root,
html,
body {
    --sidebar-w: 0px !important;
}

body {
    padding-left: 0 !important;
}

/* Old templates used body::before for the animated square grid. */
body::before {
    content: none !important;
    background: none !important;
    animation: none !important;
}

/* The legacy sidebar and grid are no longer part of the visible interface. */
.side-nav,
.side-toggle,
.topbar-restore-v2,
.restore-divider-v2 {
    display: none !important;
}

.top-bar {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Top navigation stays visible regardless of an old saved sidebar state. */
.topbar-brand-v2 {
    opacity: 1 !important;
    transform: translate3d(0, -50%, 0) !important;
    pointer-events: auto !important;
}

.topbar-center-v2 {
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) !important;
    pointer-events: auto !important;
}

.topbar-kit-link-v2,
.topbar-more-v2,
.topbar-nav-divider-v3 {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Icons for the secondary pages inside the three-dot menu. */
.topbar-menu-link-v2 > i,
.topbar-menu-link-v2.active > i,
.topbar-menu-link-v2:hover > i,
.topbar-menu-link-v2:focus-visible > i {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Cosmetic layers must be allowed to extend beyond the avatar. */
.avatar-frame,
.player-skin-wrap,
.profile-skin-wrap,
.row-skin-wrap,
.avatar-frame-sm,
.staff-card .skin-wrap {
    position: relative;
    overflow: visible !important;
}

/* Ordinary hats: compact badge in the upper-right corner of the head. */
.corner-hat-item {
    position: absolute !important;
    left: auto !important;
    right: -6px !important;
    top: -6px !important;
    bottom: auto !important;
    width: 36px !important;
    height: 36px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: rotate(14deg) !important;
    transform-origin: 50% 50% !important;
    z-index: 11 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

.profile-hero .avatar-frame > .corner-hat-item {
    right: -10px !important;
    top: -10px !important;
    width: 50px !important;
    height: 50px !important;
}

.player-hero .avatar-frame > .corner-hat-item {
    right: -8px !important;
    top: -8px !important;
    width: 40px !important;
    height: 40px !important;
}

.podium-card .avatar-frame > .corner-hat-item {
    right: -5px !important;
    top: -5px !important;
    width: 36px !important;
    height: 36px !important;
}

.row-skin-wrap > .corner-hat-item {
    right: -4px !important;
    top: -5px !important;
    width: 26px !important;
    height: 26px !important;
}

.player-skin-wrap > .corner-hat-item {
    right: -7px !important;
    top: -10px !important;
    width: 20px !important;
    height: 20px !important;
}

.shop-row .avatar-frame-sm > .corner-hat-item {
    right: -4px !important;
    top: -5px !important;
    width: 16px !important;
    height: 16px !important;
}

.staff-card .skin-wrap > .corner-hat-item {
    right: -5px !important;
    top: -5px !important;
    width: 30px !important;
    height: 30px !important;
}

/* Animated Pocoyo: a full character standing centrally on the avatar's head. */
.pocoyo-hat-item {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(100% - 18px) !important;
    width: 94px !important;
    height: 94px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 100% !important;
    z-index: 12 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.52)) !important;
}

.player-hero .avatar-frame > .pocoyo-hat-item {
    width: 88px !important;
    height: 88px !important;
    bottom: calc(100% - 20px) !important;
}

.profile-hero .avatar-frame > .pocoyo-hat-item {
    width: 98px !important;
    height: 98px !important;
    bottom: calc(100% - 22px) !important;
}

.shop-row .avatar-frame-sm > .pocoyo-hat-item {
    width: 48px !important;
    height: 48px !important;
    bottom: calc(100% - 5px) !important;
}

.player-skin-wrap > .pocoyo-hat-item {
    width: 46px !important;
    height: 46px !important;
    bottom: calc(100% - 6px) !important;
}

.podium-card .avatar-frame > .pocoyo-hat-item {
    width: 86px !important;
    height: 86px !important;
    bottom: calc(100% - 17px) !important;
}

.row-skin-wrap > .pocoyo-hat-item {
    width: 44px !important;
    height: 44px !important;
    bottom: calc(100% - 6px) !important;
}

.staff-card .skin-wrap > .pocoyo-hat-item {
    width: 58px !important;
    height: 58px !important;
    bottom: calc(100% - 8px) !important;
}

.customize-card .preview-hat[src$="pocoyo67.gif"] {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
}

.queue-kit-icon img[src$="pocoyo67.gif"] {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
}

@media (max-width: 520px) {
    .topbar-brand-v2 {
        left: 10px !important;
    }
}