.crisp-client {
    opacity: 0;
}

.maintenance-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #ffebee;
    border-bottom: 2px solid #f44336;
    color: #c62828;
    font-family: DynaPuff, sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    padding: 14px 20px;
    height: 50px;
    box-sizing: border-box;
    box-shadow: 0 2px 8px #f4433633;
    transition: all .3s ease-in-out
}

.maintenance-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.maintenance-banner-content:before {
    content: "⚠️";
    font-size: 16px
}

.maintenance-banner.maintenance-hidden {
    transform: translateY(-100%);
    opacity: 0
}

.maintenance-banner.maintenance-entering {
    transform: translateY(-100%);
    opacity: 0;
    animation: slideDown .3s ease-out forwards
}

.maintenance-banner.maintenance-visible {
    transform: translateY(0);
    opacity: 1
}

.maintenance-banner.maintenance-exiting {
    transform: translateY(0);
    opacity: 1;
    animation: slideUp .3s ease-in forwards
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
        opacity: 1
    }
    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

@media (max-width: 768px) {
    .maintenance-banner {
        font-size: 13px;
        padding: 10px 16px
    }
}

.crate-button {
    display: flex;
    align-items: center;
    background-color: var(--color-muted);
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: .75rem;
    color: var(--color-muted-foreground);
    font-weight: 400;
    cursor: pointer;
    height: 30px;
    text-transform: none;
    letter-spacing: normal;
    transition: none
}

.crate-button:hover {
    background-color: var(--color-hover);
    border: none
}

.crate-button-text {
    margin-right: 0;
    color: var(--color-muted-foreground)
}

.crate-button-cooldown {
    margin-left: 6px;
    background: #4ade80;
    border-radius: 12px;
    color: #09090b;
    padding: 1px 6px;
    font-size: .75rem;
    font-weight: 600
}

.crate-button.loading {
    cursor: default;
    background-color: transparent;
    opacity: .7
}

.crate-button-cooldown-loading {
    margin-left: 6px;
    background: #718096;
    color: #a0aec0;
    padding: 1px 6px;
    border-radius: 12px;
    font-size: .75rem;
    font-weight: 600
}

.crate-button.mobile {
    padding: 6px 8px;
    font-size: .75rem;
    height: 28px
}

.crate-button.mobile .crate-button-cooldown,
.crate-button.mobile .crate-button-cooldown-loading {
    font-size: .75rem;
    padding: 1px 4px
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1
    }
    50% {
        transform: scale(1.1);
        opacity: .8
    }
    to {
        transform: scale(0);
        opacity: 0
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(.3);
        opacity: 0
    }
    50% {
        transform: scale(1.05);
        opacity: 1
    }
    70% {
        transform: scale(.9);
        opacity: 1
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-15px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(.8)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(30px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes floatIn {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(.9)
    }
    60% {
        opacity: .8;
        transform: translateY(-5px) scale(1.02)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes crateBadgeCycle {
    0% {
        opacity: 0;
        transform: scale(.3)
    }
    50% {
        opacity: 1;
        transform: scale(1.1)
    }
    to {
        opacity: 0;
        transform: scale(.3)
    }
}

@keyframes glowPulse {
    0% {
        opacity: 0;
        transform: scale(.5)
    }
    40% {
        opacity: .6;
        transform: scale(1.2)
    }
    60% {
        opacity: .6;
        transform: scale(1.2)
    }
    to {
        opacity: 0;
        transform: scale(.5)
    }
}

.crate-card {
    width: 130px;
    height: 170px;
    padding: 10px;
    border-radius: 16px !important;
    border: 3px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease
}

.crate-card-gradient-wrapper {
    padding: 3px;
    border-radius: 19px;
    background: var(--border-style);
    display: inline-block;
    transition: transform .2s ease, box-shadow .2s ease
}

.crate-card-gradient-wrapper .crate-card {
    border: none;
    margin: 0
}

.crate-card-gradient-wrapper:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0003;
    z-index: 30
}

.crate-card-gradient-wrapper.selected {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0000004d
}

.crate-card-gradient-wrapper.selected:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0000004d;
    z-index: 30
}

.crate-card-gradient-wrapper .crate-card:hover,
.crate-card-gradient-wrapper .crate-card.selected {
    transform: none;
    box-shadow: none
}

.crate-card-gradient-wrapper.mobile {
    padding: 2px;
    border-radius: 14px
}

.crate-card.custom-border {
    background: var(--color-card);
    border: none
}

.crate-card:not(.custom-border) {
    border: 3px solid rgb(32, 32, 32)
}

.crate-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0003;
    z-index: 30
}

.crate-card.selected {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0000004d
}

.crate-card.selected:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0000004d;
    z-index: 30
}

.crate-card.no-key {
    opacity: .6
}

.crate-card.no-key:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px #0003;
    z-index: 30
}

.crate-card-key-count {
    position: absolute;
    top: -18px;
    right: 52px;
    color: #fff;
    padding: 4px;
    font-size: 1.25rem;
    font-weight: 700;
    z-index: 20;
    transform: rotate(-5deg);
    white-space: nowrap;
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 2px 4px 0 var(--crate-shadow-color, rgba(0, 0, 0, .8))
}

.crate-card-key-count .key-text {
    font-size: 1.25rem;
    opacity: 1
}

.crate-card-image-container {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 15px;
    margin-bottom: 10px
}

.crate-card-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.crate-card-level-indicator {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translate(-50%);
    background-color: #282828b3;
    color: #aaa;
    font-size: .65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 5;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color .2s ease, color .2s ease
}

.crate-card-name-container {
    width: 100%;
    text-align: center;
    margin-top: auto;
    padding-bottom: 5px
}

.crate-card-name {
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    display: block
}

.crate-card.mobile {
    width: 100px;
    height: 140px;
    padding: 8px
}

.crate-card.mobile .crate-card-image-container {
    width: 60px;
    height: 60px;
    margin-top: 10px;
    margin-bottom: 5px
}

.crate-card.mobile .crate-card-key-count {
    top: -16px;
    right: 32px;
    padding: 4px 8px;
    font-size: 1.125rem;
    transform: rotate(-5deg);
    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 1px 1px 0 var(--crate-shadow-color, rgba(0, 0, 0, .8))
}

.crate-card.mobile .crate-card-key-count .key-text {
    font-size: 1.125rem
}

.crate-card.mobile .crate-card-level-indicator {
    font-size: .6rem;
    padding: 1px 4px;
    bottom: -3px
}

.crate-card.mobile .crate-card-name {
    font-size: .8rem
}

.crate-card-cooldown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(.5px);
    backdrop-filter: blur(.5px);
    border-radius: 16px !important;
    z-index: 15;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
    color: #ff9800
}

.crate-card.cooldown-active-global .crate-card-cooldown-overlay {
    display: flex
}

.crate-card.mobile .crate-card-cooldown-overlay {
    font-size: 14px
}

.crate-modal-container {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px
}

@media (max-width: 480px) {
    .crate-modal-container {
        padding: 5px;
        gap: 15px
    }
    .MuiDialogContent-root {
        padding: 5px !important
    }
}

.crate-modal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px
}

.crate-modal-container.mobile .crate-modal-grid {
    gap: 10px
}

.crate-card-image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777;
    font-size: .8em
}

.crate-reward-card {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #e2e8f0;
    font-weight: 700
}

.crate-reward-sol-bg-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1
}

.crate-reward-sol-bg-icon img {
    width: 65%;
    height: 65%;
    object-fit: contain
}

.crate-reward-card-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 5px;
    position: relative;
    z-index: 2
}

.crate-reward-card-placeholder-icon {
    font-size: 40px;
    font-weight: 700;
    color: #ffffff80;
    margin-bottom: 5px;
    position: relative;
    z-index: 2
}

.crate-reward-card-amount {
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    z-index: 2;
    margin-bottom: 2px
}

.crate-reward-sol-symbol {
    object-fit: contain
}

.crate-reward-card-type {
    font-size: .65rem;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 0;
    position: relative;
    z-index: 2;
    line-height: 1.2
}

.crate-reward-card-chance {
    font-size: .75rem;
    font-weight: 400;
    position: relative;
    z-index: 2;
    margin-top: 2px
}

.crate-reward-card.mobile {
    width: 80px;
    height: 80px;
    padding: 4px
}

.crate-reward-card.mobile .crate-reward-sol-bg-icon img {
    width: 60%
}

.crate-reward-card.mobile .crate-reward-card-image {
    width: 30px;
    height: 30px
}

.crate-reward-card.mobile .crate-reward-card-placeholder-icon {
    font-size: 30px
}

.crate-reward-card.mobile .crate-reward-card-amount {
    gap: 3px
}

.crate-reward-card.mobile .crate-reward-card-type {
    font-size: .6rem
}

.crate-reward-card.mobile .crate-reward-card-chance {
    font-size: .7rem
}

.crate-rewards-container {
    background-color: var(--color-card);
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
    box-shadow: 0 4px 12px #0006
}

.crate-rewards-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px
}

.crate-rewards-header h3 {
    margin: 0;
    color: #e5e7eb;
    font-size: 1.1rem;
    text-align: center
}

.close-preview-button {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer
}

.crate-rewards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    max-height: 290px;
    overflow-y: auto;
    padding: 20px
}

.crate-rewards-actions {
    text-align: center
}

.open-crate-button {
    background-color: #10b981;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
    width: 100%;
    max-width: 250px
}

.open-crate-button:hover:not(:disabled) {
    background-color: #059669
}

.open-crate-button:disabled {
    background-color: #4b5563;
    cursor: not-allowed;
    opacity: .7
}

.crate-rewards-container.mobile .crate-rewards-header h3 {
    font-size: 1rem
}

.crate-rewards-container.mobile .crate-rewards-grid {
    gap: 10px;
    max-height: 200px
}

.crate-rewards-container.mobile .open-crate-button {
    padding: 8px 16px;
    font-size: .9rem
}

@media (max-width: 480px) {
    .crate-rewards-container {
        padding: 10px
    }
}

.crate-error-notice {
    background: #f4433633;
    padding: 10px;
    margin: 10px 20px;
    border-radius: 5px;
    text-align: center;
    color: #f44336;
    border: 1px solid rgba(244, 67, 54, .3)
}

.crate-cooldown-notice {
    background: #ff980033;
    padding: 10px;
    margin: 10px 20px;
    border-radius: 5px;
    text-align: center;
    color: #ff9800;
    border: 1px solid rgba(255, 152, 0, .3)
}

@media (max-width: 480px) {
    .crate-cooldown-notice {
        margin: 5px 0;
        padding: 8px
    }
}

.crate-wheel-spinning {
    transition: transform 6s cubic-bezier(.25, .46, .45, .94);
    will-change: transform
}

.crate-wheel-no-transition {
    transition: none;
    will-change: transform
}

.crate-wheel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 120px;
    margin-bottom: 32px;
    border-radius: 12px;
    background: var(--color-background);
    border: 2px solid #333;
    box-shadow: 0 4px 12px #0006
}

.crate-wheel-inner {
    display: flex;
    position: absolute;
    left: 50%;
    top: 0;
    will-change: transform
}

.rugpass-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000b3;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px)
}

.rugpass-modal__wrapper {
    background: linear-gradient(to bottom, #a855f733, #a855f7);
    border-radius: 16px;
    padding: 2px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh
}

.rugpass-modal__content {
    background: linear-gradient(135deg, #1e1b4b, #581c87, #7c3aed, #a855f7, #c084fc);
    background-image: url(/backgrounds/rugpass_bg.png);
    background-size: cover;
    background-position: top center;
    background-blend-mode: overlay;
    border: none;
    border-radius: 14px;
    padding: 0;
    width: 100%;
    max-height: calc(90vh - 4px);
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 50px -12px #a855f740, 0 0 0 1px #a855f71a;
    display: flex;
    flex-direction: column
}

.rugpass-modal--loading .rugpass-modal__content,
.rugpass-modal--error .rugpass-modal__content {
    background: linear-gradient(135deg, #1e1b4b, #581c87, #7c3aed);
    background-image: none
}

.rugpass-modal__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #fff
}

.rugpass-modal__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #581c87;
    border-top: 3px solid #a855f7;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px
}

.rugpass-modal__error {
    text-align: center;
    padding: 40px 20px;
    color: #fff
}

.rugpass-modal__error h3 {
    color: #c084fc;
    margin-bottom: 16px;
    font-size: 24px
}

.rugpass-modal__error p {
    margin-bottom: 12px;
    color: #aaa;
    line-height: 1.5
}

.rugpass-modal__hint {
    color: #a855f7 !important;
    font-size: 14px
}

.rugpass-modal__retry-button {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 16px;
    transition: all .2s ease;
    box-shadow: 0 4px 14px #a855f74d
}

.rugpass-modal__retry-button:hover {
    background: linear-gradient(135deg, #9333ea, #a855f7);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px #a855f766
}

.rugpass-header {
    position: relative;
    z-index: 10;
    padding: 20px;
    transition: all .3s ease;
    flex-shrink: 0;
    border-radius: 14px 14px 0 0
}

.rugpass-header:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    transition: all .3s ease;
    z-index: -1;
    border-radius: 14px 14px 0 0
}

.rugpass-header.scrolled {
    border-bottom: 1px solid rgba(168, 85, 247, .3)
}

.rugpass-modal__scrollable-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px
}

.rugpass-header__content {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.rugpass-header__left {
    display: flex;
    flex-direction: column
}

.rugpass-header__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #c084fc;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 0 20px rgba(192, 132, 252, .5)
}

.rugpass-header__title h2 {
    margin: 0
}

.rugpass-header__tier {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    color: #fff;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    box-shadow: 0 2px 8px #a855f74d
}

.rugpass-header__admin-badge {
    background: #ff6b35;
    color: #fff;
    font-size: .7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px
}

.rugpass-header__lookup-info {
    color: gold;
    font-size: .9rem;
    margin-top: 4px;
    font-weight: 500
}

.rugpass-header__close {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: color .2s ease
}

.rugpass-header__close:hover {
    color: #fff
}

.rugpass-header__close-icon {
    width: 24px;
    height: 24px
}

.rugpass-modal__season-info {
    color: #aaa;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px
}

.rugpass-modal__season-date {
    margin-left: 4px
}

.rugpass-progress {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-progress__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.rugpass-progress__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0
}

.rugpass-progress__tier-info {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(168, 85, 247, .3)
}

.rugpass-progress__current-tier {
    color: gold;
    font-weight: 700
}

.rugpass-progress__next-tier {
    color: #aaa;
    margin-left: 8px
}

.rugpass-progress__bowls {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 0
}

.rugpass-progress__bowl {
    width: 32px;
    height: 32px
}

.rugpass-progress__bowl-image {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.rugpass-progress__bowl-image--empty {
    opacity: .4
}

.rugpass-progress__max-tier {
    text-align: center;
    padding: 12px 0
}

.rugpass-progress__celebration {
    font-size: 24px;
    margin-right: 8px
}

.rugpass-progress__max-text {
    color: #0f0;
    font-size: 18px;
    font-weight: 600
}

.rugpass-progress__max-description {
    color: #aaa;
    font-size: 14px;
    margin-top: 4px
}

.rugpass-rewards {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-rewards__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.rugpass-rewards__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px
}

.rugpass-rewards__claim-all {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 14px #a855f74d
}

.rugpass-rewards__claim-all:hover {
    background: linear-gradient(135deg, #9333ea, #a855f7);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px #a855f766
}

.rugpass-rewards__list {
    margin-top: 12px
}

.rugpass-rewards__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1e1b4b66;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid rgba(168, 85, 247, .3);
    margin-bottom: 8px;
    transition: background-color .3s ease
}

.rugpass-rewards__item--claimed {
    background-color: #2d1b6980 !important;
    border-color: #a855f766 !important;
    animation: claimSuccess 1s ease-in-out
}

@keyframes claimSuccess {
    0% {
        background-color: #1e1b4b66
    }
    50% {
        background-color: #2d1b69cc;
        transform: scale(1.02)
    }
    to {
        background-color: #2d1b6980;
        transform: scale(1)
    }
}

.rugpass-rewards__item-info {
    display: flex;
    align-items: center
}

.rugpass-rewards__tier {
    color: gold;
    font-weight: 700;
    margin-right: 8px
}

.rugpass-rewards__badges {
    display: flex;
    gap: 4px
}

.rugpass-rewards__badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600
}

.rugpass-rewards__badge--drop {
    background-color: #ffd7004d;
    color: gold
}

.rugpass-rewards__badge--cooldown {
    background-color: #8000804d;
    color: plum
}

.rugpass-rewards__badge--rugpool {
    background-color: #ffa5004d;
    color: orange
}

.rugpass-rewards__badge--emoji {
    background-color: #ffc0cb4d;
    color: #ffb6c1
}

.rugpass-rewards__claim-single {
    background-color: gold;
    color: #000;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.rugpass-rewards__claim-single:hover {
    background-color: #e6c200
}

.rugpass-rewards__claim-single:disabled {
    background-color: #10b981;
    color: #fff;
    cursor: not-allowed;
    opacity: .9
}

.rugpass-rewards__claim-single:disabled:hover {
    background-color: #10b981
}

.rugpass-piggy-bank {
    margin-bottom: 24px
}

.rugpass-piggy-bank__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px
}

.rugpass-piggy-bank__container {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    border: 1px solid rgba(168, 85, 247, .4);
    border-radius: 16px;
    padding: 0;
    display: flex;
    overflow: hidden;
    box-shadow: 0 8px 32px #a855f726
}

.rugpass-piggy-bank__icon {
    width: 80px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px
}

.rugpass-piggy-bank__pig {
    width: 56px;
    height: 56px;
    object-fit: contain
}

.rugpass-piggy-bank__content {
    flex: 1;
    padding: 16px
}

.rugpass-piggy-bank__amount {
    display: flex;
    align-items: center;
    margin-bottom: 12px
}

.rugpass-piggy-bank__value {
    color: #fff;
    font-size: 48px;
    font-weight: 700
}

.rugpass-piggy-bank__sol-icon {
    height: 32px;
    margin-left: 4px
}

.rugpass-piggy-bank__progress {
    position: relative;
    width: 100%;
    height: 20px;
    background-color: #581c874d;
    border-radius: 999px;
    margin-bottom: 12px
}

.rugpass-piggy-bank__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #c084fc);
    border-radius: 999px;
    transition: width .3s ease;
    box-shadow: 0 0 8px #a855f780
}

.rugpass-piggy-bank__info {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.rugpass-piggy-bank__description {
    flex: 1
}

.rugpass-piggy-bank__text {
    color: #fff;
    font-size: 12px;
    opacity: .6;
    margin: 0 0 4px
}

.rugpass-piggy-bank__warning {
    color: gold;
    font-size: 12px;
    margin: 4px 0 0;
    display: flex;
    align-items: center
}

.rugpass-piggy-bank__warning-icon {
    margin-right: 4px
}

.rugpass-piggy-bank__unclaimed {
    color: #aaa;
    font-size: 12px;
    margin: 4px 0 0
}

.rugpass-piggy-bank__button {
    padding: 6px 16px;
    border-radius: 16px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-width: 140px;
    transition: all .2s ease
}

.rugpass-piggy-bank__button--claimable {
    color: #fff;
    background: linear-gradient(to right, #ec4899, #9d4edd)
}

.rugpass-piggy-bank__button--claimable:hover {
    background: linear-gradient(to right, #ec4899e6, #9d4edde6)
}

.rugpass-piggy-bank__button--disabled {
    color: #ffffff80;
    background: linear-gradient(to right, #ec489980, #9d4edd80);
    cursor: not-allowed
}

.rugpass-piggy-bank__button--claimed {
    color: #fff;
    background: linear-gradient(to right, #10b981, #059669);
    cursor: default
}

.rugpass-quest-container {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-tier-container {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-daily-drop__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px
}

.rugpass-daily-drop__container {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.rugpass-daily-drop__content {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.rugpass-daily-drop__info {
    flex: 1
}

.rugpass-daily-drop__text {
    color: #fff;
    margin: 0 0 8px
}

.rugpass-daily-drop__discord-hint {
    color: #c084fc;
    font-size: 14px;
    margin: 0;
    text-shadow: 0 0 10px rgba(192, 132, 252, .4)
}

.rugpass-daily-drop__stats {
    display: flex;
    gap: 24px
}

.rugpass-daily-drop__stat {
    text-align: center
}

.rugpass-daily-drop__stat-label {
    display: block;
    color: #aaa;
    font-size: 12px;
    margin-bottom: 4px
}

.rugpass-daily-drop__stat-value {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 16px
}

.rugpass-bonuses {
    margin-bottom: 24px
}

.rugpass-bonuses__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px
}

.rugpass-bonuses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.rugpass-bonuses__bonus {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-bonuses__bonus-value {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px
}

.rugpass-bonuses__bonus-value--drop {
    color: #eab308;
    text-shadow: 0 0 15px rgba(234, 179, 8, .5)
}

.rugpass-bonuses__bonus-value--cooldown {
    color: #c084fc;
    text-shadow: 0 0 15px rgba(192, 132, 252, .5)
}

.rugpass-bonuses__bonus-value--rugpool {
    color: #f97316;
    text-shadow: 0 0 15px rgba(249, 115, 22, .5)
}

.rugpass-bonuses__bonus-label {
    color: #aaa;
    font-size: 12px;
    font-weight: 600
}

.rugpass-bonuses__empty {
    background-color: #1a3a5cbf;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(42, 76, 122, .5);
    color: #aaa
}

.rugpass-quests {
    margin-bottom: 24px
}

.rugpass-quests__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.rugpass-quests__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0
}

.rugpass-quests__refresh {
    color: #aaa;
    font-size: 14px
}

.rugpass-quests__tabs {
    display: flex;
    background-color: #1a3a5cbf;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 16px
}

.rugpass-quests__tab {
    flex: 1;
    background: none;
    border: none;
    color: #aaa;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease
}

.rugpass-quests__tab--active {
    background-color: #a855f733;
    color: #c084fc;
    text-shadow: 0 0 10px rgba(192, 132, 252, .4)
}

.rugpass-quests__tab:hover:not(.rugpass-quests__tab--active) {
    color: #fff
}

.rugpass-quests__list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.rugpass-quests__quest {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-quests__quest-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px
}

.rugpass-quests__quest-info {
    flex: 1
}

.rugpass-quests__quest-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px
}

.rugpass-quests__quest-description {
    color: #aaa;
    font-size: 14px;
    margin: 0;
    line-height: 1.4
}

.rugpass-quests__quest-reward {
    margin-left: 16px
}

.rugpass-quests__quest-gems {
    color: #c084fc;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(192, 132, 252, .4)
}

.rugpass-quests__quest-progress {
    margin-bottom: 8px
}

.rugpass-quests__progress-bar {
    width: 100%;
    height: 8px;
    background-color: #581c874d;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px
}

.rugpass-quests__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #c084fc);
    border-radius: 4px;
    transition: width .3s ease;
    box-shadow: 0 0 8px #a855f780
}

.rugpass-quests__progress-text {
    color: #aaa;
    font-size: 12px;
    text-align: right
}

.rugpass-quests__quest-status {
    text-align: center
}

.rugpass-quests__status {
    font-size: 14px;
    font-weight: 600
}

.rugpass-quests__status--completed {
    color: #0f0
}

.rugpass-quests__status--claimed {
    color: #aaa
}

.rugpass-quests__empty {
    background-color: #1a3a5cbf;
    border-radius: 8px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(42, 76, 122, .5);
    color: #aaa
}

.rugpass-tiers {
    margin-bottom: 24px
}

.rugpass-tiers__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px
}

.rugpass-tiers__list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.rugpass-tiers__tier {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-tiers__tier--unclaimed {
    border-color: #c084fc99;
    background: linear-gradient(135deg, #c084fc26, #a855f71a);
    box-shadow: 0 8px 32px #c084fc33
}

.rugpass-tiers__tier--claimed {
    opacity: .7
}

.rugpass-tiers__tier--locked {
    opacity: .5
}

.rugpass-tiers__tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.rugpass-tiers__tier-number {
    color: gold;
    font-size: 16px;
    font-weight: 600
}

.rugpass-tiers__claim-button {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 14px #a855f74d
}

.rugpass-tiers__claim-button:hover {
    background: linear-gradient(135deg, #9333ea, #a855f7);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px #a855f766
}

.rugpass-tiers__status-text {
    font-size: 12px;
    font-weight: 600
}

.rugpass-tiers__status-text--claimed {
    color: #0f0
}

.rugpass-tiers__status-text--locked {
    color: #aaa
}

.rugpass-tiers__tier-rewards {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.rugpass-tiers__badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600
}

.rugpass-tiers__badge--drop {
    background-color: #ffd7004d;
    color: gold
}

.rugpass-tiers__badge--cooldown {
    background-color: #8000804d;
    color: plum
}

.rugpass-tiers__badge--rugpool {
    background-color: #ffa5004d;
    color: orange
}

.rugpass-admin {
    background-color: #1e1e1ee6;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid rgba(220, 38, 38, .5)
}

.rugpass-admin__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.rugpass-admin__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0
}

.rugpass-admin__reset-buttons {
    display: flex;
    gap: 8px
}

.rugpass-admin__reset-button {
    background-color: #dc2626;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.rugpass-admin__reset-button:hover {
    background-color: #b91c1c
}

.rugpass-admin__controls {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.rugpass-admin__search {
    display: flex;
    gap: 8px
}

.rugpass-admin__search-input {
    flex: 1;
    padding: 8px 12px;
    background-color: #00000080;
    border: 1px solid rgba(42, 76, 122, .5);
    border-radius: 4px;
    color: #fff;
    font-size: 14px
}

.rugpass-admin__search-input::placeholder {
    color: #aaa
}

.rugpass-admin__search-button {
    padding: 8px 16px;
    background-color: #2a4c7acc;
    color: #fff;
    border: 1px solid rgba(42, 76, 122, 1);
    border-radius: 4px;
    font-size: 14px;
    transition: all .2s;
    min-width: 80px;
    cursor: pointer
}

.rugpass-admin__search-button:hover:not(:disabled) {
    background-color: #2a4c7a
}

.rugpass-admin__search-button:disabled {
    opacity: .6;
    cursor: not-allowed
}

.rugpass-admin__current-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #2a4c7a33;
    border-radius: 4px;
    border: 1px solid rgba(42, 76, 122, .4)
}

.rugpass-admin__label {
    color: #fff;
    font-size: 14px
}

.rugpass-admin__player-id {
    color: #fff;
    font-size: 14px;
    font-family: monospace
}

.rugpass-modal__placeholder {
    background-color: #1a3a5cbf;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 40px 20px;
    margin-bottom: 24px;
    text-align: center;
    border: 1px solid rgba(42, 76, 122, .5)
}

.rugpass-modal__placeholder-text {
    color: #aaa;
    font-size: 16px;
    font-weight: 500
}

.rugpass-button-container {
    position: relative;
    display: flex;
    justify-content: center
}

.rugpass-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background-color .2s ease;
    cursor: pointer;
    min-width: 140px;
    flex-shrink: 0
}

.rugpass-button:hover {
    background: var(--color-muted);
    box-shadow: 0 2px 8px #27293533
}

.rugpass-button--pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes pulse {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

.rugpass-button__header {
    display: flex;
    align-items: center;
    justify-content: center
}

.rugpass-button__title {
    background: linear-gradient(to right, #ffc700, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: .875rem;
    margin-right: 6px
}

.rugpass-button__tier {
    padding: 2px 6px;
    background: linear-gradient(135deg, #ffc700, #a855f7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 2px 8px #a855f74d
}

.rugpass-button__bowls {
    display: flex;
    gap: 4px
}

.rugpass-bowl-filled,
.rugpass-bowl-empty {
    height: 16px;
    width: 16px
}

.rugpass-bowl-empty {
    opacity: .4
}

.rugpass-button__tooltip {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    margin-top: 8px;
    padding: 8px 12px;
    background-color: #18181b;
    color: #a1a1aa;
    font-size: 12px;
    border: 1px solid rgb(39, 39, 42);
    border-radius: 6px;
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
    z-index: 10;
    white-space: nowrap
}

.rugpass-button__unclaimed-notice {
    color: #facc15;
    font-weight: 700
}

.rugpass-button__login-notice {
    color: #a1a1aa
}

.rugpass-daily-drop {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799, #7c3aed66);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    border: 1px solid rgba(168, 85, 247, .3);
    box-shadow: 0 8px 32px #a855f71a
}

.rugpass-daily-drop__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.rugpass-daily-drop__title {
    color: #fff;
    font-size: 18px;
    font-weight: 600
}

.rugpass-daily-drop__special-title {
    color: #facc15;
    display: flex;
    align-items: center
}

.rugpass-daily-drop__special-emoji {
    margin-right: 8px
}

.rugpass-daily-drop__countdown-section {
    display: flex;
    align-items: center
}

.rugpass-daily-drop__countdown-label {
    color: #fde047;
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px
}

.rugpass-daily-drop__countdown-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 9999px
}

.rugpass-daily-drop__countdown-badge--loading {
    background-color: #581c8766;
    color: #a855f7
}

.rugpass-daily-drop__countdown-badge--error {
    background-color: #7f1d1d66;
    color: #fca5a5
}

.rugpass-daily-drop__countdown-badge--normal {
    background: linear-gradient(135deg, #a855f766, #c084fc66);
    color: #f3e8ff;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(243, 232, 255, .4)
}

.rugpass-daily-drop__discord-warning {
    background: linear-gradient(135deg, #1e1b4b99, #581c8766);
    border: 1px solid rgba(168, 85, 247, .4);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.rugpass-daily-drop__discord-warning-text {
    color: #c084fc;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 0 10px rgba(192, 132, 252, .4)
}

.rugpass-daily-drop__error {
    background-color: #7f1d1d4d;
    border: 1px solid rgba(220, 38, 38, .3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px
}

.rugpass-daily-drop__error-text {
    color: #fecaca;
    font-size: 12px;
    text-align: center
}

.rugpass-daily-drop__entries-section {
    display: flex;
    justify-content: center;
    align-items: center
}

.rugpass-daily-drop__entries-container {
    display: flex;
    align-items: center
}

.rugpass-daily-drop__entries-card {
    background: linear-gradient(135deg, #1e1b4bcc, #581c8799);
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(168, 85, 247, .4);
    margin-right: 16px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.rugpass-daily-drop__entries-value {
    color: #eab308;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 15px rgba(234, 179, 8, .5)
}

.rugpass-daily-drop__entries-label {
    color: #a855f7;
    font-size: 12px;
    text-align: center
}

.rugpass-daily-drop__description {
    color: #a1a1aa;
    font-size: 14px;
    max-width: 400px
}

.rugpass-daily-drop__piggy-bank-text {
    color: #c084fc;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(192, 132, 252, .4)
}

.rugpass-daily-drop__bonus-text {
    color: #a855f7;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(168, 85, 247, .4)
}

.rugpass-daily-drop__recent-winners {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(42, 76, 122, .5)
}

.rugpass-daily-drop__recent-winners-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px
}

.rugpass-daily-drop__winners-table-container {
    background: linear-gradient(135deg, #1e1b4be6, #581c87cc, #7c3aedb3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 85, 247, .3);
    border-radius: 8px;
    padding: 8px;
    max-height: 128px;
    overflow-y: auto
}

.rugpass-daily-drop__winners-table {
    width: 100%;
    font-size: 14px
}

.rugpass-daily-drop__table-header {
    color: #a1a1aa;
    font-size: 12px
}

.rugpass-daily-drop__table-header-cell-left {
    text-align: left;
    padding: 4px 8px
}

.rugpass-daily-drop__table-header-cell-right {
    text-align: right;
    padding: 4px 8px
}

.rugpass-daily-drop__table-row--even {
    background-color: #a855f71a
}

.rugpass-daily-drop__winner-username {
    padding: 4px 8px;
    color: #fde047
}

.rugpass-daily-drop__special-emoji-inline {
    margin-left: 4px;
    color: #facc15;
    font-size: 12px
}

.rugpass-daily-drop__entry-count {
    padding: 4px 8px;
    text-align: right;
    color: #d4d4d8
}

.rugpass-daily-drop__prize-cell {
    padding: 4px 8px;
    text-align: right
}

.rugpass-daily-drop__prize-content {
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.rugpass-daily-drop__prize-amount {
    color: #facc15;
    font-weight: 500;
    margin-right: 4px
}

.rugpass-daily-drop__sol-icon {
    width: 12px;
    height: 12px
}

@media (max-width: 768px) {
    .rugpass-modal__content {
        margin: 16px;
        padding: 12px;
        max-height: 95vh
    }
    .rugpass-header__title {
        font-size: 24px
    }
    .rugpass-progress__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .rugpass-progress__bowls {
        gap: 4px
    }
    .rugpass-progress__bowl {
        width: 24px;
        height: 24px
    }
    .rugpass-piggy-bank__container {
        flex-direction: column
    }
    .rugpass-piggy-bank__icon {
        width: auto;
        height: 60px
    }
    .rugpass-piggy-bank__value {
        font-size: 36px
    }
    .rugpass-piggy-bank__info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
    .rugpass-rewards__item {
        flex-wrap: nowrap;
        gap: 8px
    }
    .rugpass-rewards__item-info {
        flex: 1;
        min-width: 0
    }
    .rugpass-rewards__badges {
        flex-wrap: wrap
    }
    .rugpass-bonuses__grid {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .rugpass-quests__quest-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .rugpass-quests__quest-reward {
        margin-left: 0
    }
    .rugpass-admin__search {
        flex-direction: column
    }
    .rugpass-admin__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
}

@media (max-width: 450px) {
    .rugpass-button {
        min-width: 80px;
        padding: 2px 3px
    }
    .rugpass-button__title {
        font-size: .7rem;
        margin-right: 3px
    }
    .rugpass-button__tier {
        padding: 1px 3px;
        font-size: 9px
    }
    .rugpass-button__bowls {
        gap: 1px
    }
    .rugpass-bowl-filled,
    .rugpass-bowl-empty {
        height: 10px;
        width: 10px
    }
}

@keyframes fadeSlideTop {
    0%,
    40% {
        opacity: 1;
        transform: translateY(0)
    }
    45%,
    50% {
        opacity: 0;
        transform: translateY(-5px)
    }
    50%,
    90% {
        opacity: 0;
        transform: translateY(5px)
    }
    95%,
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeSlideBottom {
    0%,
    40% {
        opacity: 0;
        transform: translateY(5px)
    }
    45%,
    50% {
        opacity: 1;
        transform: translateY(0)
    }
    50%,
    90% {
        opacity: 1;
        transform: translateY(0)
    }
    95%,
    to {
        opacity: 0;
        transform: translateY(-5px)
    }
}

@keyframes pulseCandle {
    0% {
        background-color: #2a2a2a;
        background-image: none;
        box-shadow: none;
        border: 1px solid rgba(255, 100, 0, .4)
    }
    to {
        background-color: transparent;
        background-image: linear-gradient(to bottom, #ff3e00, #f60, #f90);
        box-shadow: 0 0 15px 4px #ff1e00e6;
        border: none
    }
}

@keyframes flicker {
    0%,
    to {
        opacity: 1;
        height: 11px;
        box-shadow: 0 0 15px 3px #ff3c00f2
    }
    50% {
        opacity: .85;
        height: 9px;
        box-shadow: 0 0 10px 2px #ff2800cc
    }
}

@keyframes flicker-prominent {
    0%,
    to {
        opacity: 1;
        height: 12px;
        box-shadow: 0 0 20px 5px #ff3c00f2
    }
    50% {
        opacity: .8;
        height: 10px;
        box-shadow: 0 0 15px 3px #ff2800cc
    }
}

@keyframes dramatic-flicker {
    0%,
    to {
        opacity: 1;
        height: 15px;
        width: 12px;
        box-shadow: 0 0 25px 8px #ff5000f2
    }
    25% {
        opacity: .7;
        height: 10px;
        width: 8px;
        box-shadow: 0 0 15px 4px #ff2800cc
    }
    50% {
        opacity: .9;
        height: 13px;
        width: 10px;
        box-shadow: 0 0 20px 6px #ff3c00e6
    }
    75% {
        opacity: .8;
        height: 11px;
        width: 9px;
        box-shadow: 0 0 18px 5px #ff3200d9
    }
}

@keyframes candleFlickerIn {
    0%,
    20%,
    40%,
    60% {
        opacity: 0;
        background-color: #1a1a1a;
        background-image: none;
        box-shadow: none;
        border: 1px solid rgba(255, 100, 0, .6)
    }
    10%,
    30%,
    50%,
    80% {
        opacity: .5;
        background-color: transparent;
        background-image: linear-gradient(to bottom, #ff1500, #ff4000 40%, #ff9500);
        box-shadow: 0 0 8px 2px #ff1e00b3;
        border: none
    }
    to {
        opacity: 1;
        background-color: transparent;
        background-image: linear-gradient(to bottom, #ff1500, #ff4000 40%, #ff9500);
        box-shadow: 0 0 12px 3px #ff1e00e6;
        border: none
    }
}

@keyframes pulseDrawing {
    0% {
        background: transparent
    }
    50% {
        background: transparent;
        box-shadow: none
    }
    to {
        background: transparent
    }
}

@keyframes candleEmptying {
    0% {
        background-color: transparent;
        background-image: linear-gradient(to bottom, #ff3e00, #f60, #f90);
        box-shadow: 0 0 15px 4px #ff1e00e6;
        border: none;
        opacity: 1
    }
    50% {
        background-color: transparent;
        background-image: linear-gradient(to bottom, #ff3e00, #f60, #f90);
        box-shadow: 0 0 8px 2px #ff1e0080;
        border: none;
        opacity: .5
    }
    to {
        background-color: #2a2a2a;
        background-image: none;
        box-shadow: none;
        border: 1px solid rgba(255, 100, 0, .4);
        opacity: 1
    }
}

@keyframes winnerPulse {
    0% {
        background-color: #ff3e001a
    }
    50% {
        background-color: #ff3e004d
    }
    to {
        background-color: #ff3e001a
    }
}

@keyframes shuffleAnimation {
    0% {
        transform: translateY(2px)
    }
    to {
        transform: translateY(-2px)
    }
}

@keyframes glowPulse {
    0% {
        box-shadow: 0 0 12px #ff3e001a
    }
    50% {
        box-shadow: 0 0 18px #ff3e0033
    }
    to {
        box-shadow: 0 0 12px #ff3e001a
    }
}

@keyframes greenGlowPulse {
    0% {
        box-shadow: 0 0 12px #ffbe001a
    }
    50% {
        box-shadow: 0 0 18px #ffbe0033
    }
    to {
        box-shadow: 0 0 12px #ffbe001a
    }
}

@keyframes preRevealAnimation {
    0% {
        transform: translateY(1px)
    }
    to {
        transform: translateY(-1px)
    }
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 12px 3px #ff3c00e6
    }
    to {
        box-shadow: 0 0 18px 5px #ff3c00
    }
}

.rugpool-candle {
    position: relative;
    transition: all .3s ease
}

.rugpool-candle.filled {
    background-image: linear-gradient(to bottom, #ff3e00, #f60, #f90);
    background-color: transparent;
    box-shadow: 0 0 15px 4px #ff1e00e6;
    border: none
}

.rugpool-candle:not(.filled) {
    background-color: #2a2a2a;
    background-image: none;
    border: 1px solid rgba(255, 100, 0, .4)
}

.rugpool-candle.animating {
    animation: pulseCandle 1s ease forwards
}

.rugpool-candle.emptying {
    animation: candleEmptying .2s ease forwards
}

.rugpool-candle.flicker-in {
    animation: candleFlickerIn .8s ease-in-out forwards
}

.newest-candle {
    animation: pulseGlow 1.5s ease-in-out infinite alternate
}

.flame-dramatic {
    animation: dramatic-flicker .6s ease-in-out infinite !important
}

.winner-highlight {
    animation: winnerPulse .8s ease infinite;
    border-left: 3px solid #FF3E00
}

.drawing-candidate {
    animation: shuffleAnimation .2s ease alternate infinite
}

.pre-reveal {
    animation: preRevealAnimation .4s ease alternate infinite;
    border-left: 1px solid rgba(255, 62, 0, .3)
}

.rugpool-glow-red {
    animation: glowPulse 2s ease-in-out infinite
}

.rugpool-glow-green {
    animation: greenGlowPulse 2s ease-in-out infinite
}

.rugpool-button {
    transition: all .2s ease;
    background: #00000080;
    border: 1px solid rgba(255, 62, 0, .25);
    color: #fff;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: DynaPuff, sans-serif;
    font-weight: 400
}

.rugpool-button:hover {
    background: #ff3e004d;
    border-color: #f606
}

.trophy-icon {
    color: #fff;
    font-size: 16px;
    margin-right: 6px
}

.leaderboard-scroll {
    max-height: 240px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.leaderboard-scroll::-webkit-scrollbar {
    display: none
}

@media screen and (max-width: 320px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        width: calc(100% - 16px) !important;
        max-width: 100% !important;
        padding: 6px !important;
        border-radius: 6px !important;
        font-size: 12px !important
    }
    .rugpool-glow-red h4,
    .rugpool-glow-green h3 {
        margin: 0 0 4px !important;
        line-height: 1.2 !important
    }
    .rugpool-glow-red>div[style*="margin: '6px 0 10px'"] {
        margin: 3px 0 5px !important
    }
    .rugpool-button {
        padding: 4px 10px;
        font-size: 10px
    }
    .flame {
        width: 5px !important;
        height: 7px !important
    }
}

@media screen and (max-width: 360px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        width: calc(100% - 18px) !important;
        max-width: 100% !important;
        padding: 7px !important;
        border-radius: 7px !important
    }
    .rugpool-glow-red h4,
    .rugpool-glow-green h3 {
        margin: 0 0 5px !important;
        line-height: 1.2 !important
    }
    .rugpool-button {
        padding: 5px 11px;
        font-size: 11px
    }
}

@media screen and (max-width: 375px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        padding: 8px !important;
        border-radius: 8px !important
    }
    .rugpool-glow-red h4,
    .rugpool-glow-green h3 {
        margin: 0 0 6px !important;
        line-height: 1.2 !important
    }
    .rugpool-button {
        padding: 5px 12px;
        font-size: 11px
    }
}

@media screen and (max-width: 390px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        padding: 12px !important
    }
    .rugpool-button {
        padding: 6px 12px;
        font-size: 12px
    }
}

@media screen and (max-width: 414px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        padding: 14px !important;
        border-radius: 11px !important
    }
    .rugpool-button {
        padding: 6px 13px;
        font-size: 12px
    }
}

@media screen and (max-width: 450px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        width: calc(100% - 20px) !important;
        max-width: 100% !important;
        padding: 16px !important;
        border-radius: 12px !important
    }
    .rugpool-button {
        padding: 6px 14px;
        font-size: 12px
    }
}

@media screen and (max-width: 600px) {
    .rugpool-glow-red,
    .rugpool-glow-green {
        padding: 18px !important;
        border-radius: 14px !important
    }
    .rugpool-button {
        padding: 7px 15px;
        font-size: 13px
    }
}

@media (max-width: 768px) {
    @keyframes fadeSlideTop {
        0%,
        40% {
            opacity: 1;
            transform: translateY(0)
        }
        45%,
        50% {
            opacity: 0;
            transform: translateY(-5px)
        }
        50%,
        90% {
            opacity: 0;
            transform: translateY(5px)
        }
        95%,
        to {
            opacity: 1;
            transform: translateY(0)
        }
    }
    @keyframes fadeSlideBottom {
        0%,
        40% {
            opacity: 0;
            transform: translateY(5px)
        }
        45%,
        50% {
            opacity: 1;
            transform: translateY(0)
        }
        50%,
        90% {
            opacity: 1;
            transform: translateY(0)
        }
        95%,
        to {
            opacity: 0;
            transform: translateY(-5px)
        }
    }
    @keyframes flicker {
        0%,
        to {
            opacity: 1;
            height: 9px;
            box-shadow: 0 0 12px 2px #ff3c00d9
        }
        50% {
            opacity: .9;
            height: 8px;
            box-shadow: 0 0 8px 1px #ff2800b3
        }
    }
    @keyframes flicker-prominent {
        0%,
        to {
            opacity: 1;
            height: 10px;
            box-shadow: 0 0 15px 3px #ff3c00d9
        }
        50% {
            opacity: .85;
            height: 8px;
            box-shadow: 0 0 10px 2px #ff2800b3
        }
    }
}

.cycling-displays-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 1
}

.cycling-progress-indicators {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    gap: 4px;
    z-index: 10
}

.cycling-progress-dot {
    border-radius: 1px;
    background-color: #ffffff4d;
    transition: all .3s ease
}

.cycling-progress-dot.active {
    background-color: #4a9af5
}

.cycling-nav-arrow {
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all .2s ease;
    opacity: 1;
    flex-shrink: 0
}

.cycling-nav-arrow:hover {
    opacity: .8
}

.cycling-nav-arrow:disabled {
    opacity: .5;
    cursor: not-allowed
}

.cycling-display-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: -webkit-fit-content;
    max-width: fit-content
}

.cycling-display-content>div {
    position: static
}

.profile-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.profile-modal {
    background-color: var(--color-background);
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000080;
    border: 1px solid #2A2A2A;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden
}

.profile-modal.mobile {
    width: 95%;
    max-width: 400px;
    max-height: 95vh
}

.profile-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #2A2A2A
}

.profile-modal-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #fff
}

.profile-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 24px;
    padding: 4px;
    border-radius: 4px;
    transition: color .2s ease;
    line-height: 1
}

.profile-modal-close:hover {
    color: #fff
}

.profile-tab-navigation {
    display: flex;
    align-items: center
}

.profile-inbox-container {
    margin-left: auto;
    padding: 8px 20px
}

.profile-tab {
    padding: 16px 20px;
    border: none;
    color: #aaa;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    border-bottom: 3px solid transparent;
    position: relative
}

.profile-tab:hover:not(.disabled) {
    color: #fff;
    background-color: #232329
}

.profile-tab.active {
    color: var(--color-white);
    border-bottom-color: transparent
}

.profile-tab.active:after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translate(-50%);
    width: calc(100% - 40px);
    height: 3px;
    background-color: var(--color-primary)
}

.profile-tab.disabled {
    color: #666;
    cursor: not-allowed;
    opacity: .5
}

.profile-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    min-height: 400px
}

.profile-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #2A2A2A;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center
}

.profile-logout-button {
    background-color: #ff3b3033;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .5);
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.profile-logout-button:hover {
    background-color: #ff3b304d
}

.profile-modal-error {
    padding: 40px;
    text-align: center
}

.profile-modal-error h3 {
    color: #ff3b30;
    margin-bottom: 16px
}

.profile-modal-error p {
    color: #aaa;
    margin-bottom: 24px
}

.profile-button {
    background-color: #00f5d4;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.profile-button:hover {
    background-color: #00d4b8
}

.profile-inbox-button {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #aaa;
    transition: all .2s ease
}

.profile-inbox-button:hover {
    background-color: #2a2a3d;
    color: #fff;
    border-color: #666
}

.profile-inbox-button.has-unread {
    color: #00f5d4;
    border-color: #00f5d4
}

.inbox-icon-container {
    position: relative
}

.inbox-unread-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff3b30;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    border: 2px solid #121212
}

.inbox-modal {
    background-color: #121212;
    border-radius: 12px;
    box-shadow: 0 4px 20px #00000080;
    border: 1px solid #2A2A2A;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow: hidden
}

.inbox-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #2A2A2A;
    background-color: #1a1a1a
}

.inbox-header-title {
    display: flex;
    align-items: center;
    gap: 12px
}

.inbox-header-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #fff
}

.inbox-header-icon {
    font-size: 18px;
    color: #00f5d4
}

.inbox-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    transition: color .2s ease;
    line-height: 1
}

.inbox-messages-container {
    flex: 1;
    overflow-y: auto;
    max-height: 60vh
}

.inbox-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #666
}

.inbox-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: .5
}

.inbox-messages-list {
    display: flex;
    flex-direction: column
}

.inbox-message-item {
    display: flex;
    padding: 16px 20px;
    border-bottom: 1px solid #2A2A2A;
    transition: background-color .2s ease
}

.inbox-message-item:hover {
    background-color: #1a1a1a
}

.inbox-message-item.unread {
    background-color: #00f5d40d;
    border-left: 4px solid #00f5d4
}

.inbox-message-content {
    flex: 1;
    margin-right: 12px
}

.inbox-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.inbox-message-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #fff
}

.inbox-message-date {
    font-size: 12px;
    color: #aaa
}

.inbox-message-text {
    margin: 0 0 12px;
    font-size: 14px;
    color: #ccc;
    line-height: 1.4
}

.inbox-bonus-code {
    background-color: #1e1e2d;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px
}

.bonus-code-label {
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px
}

.bonus-code-value {
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    color: #00f5d4
}

.bonus-code-details {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.bonus-amount {
    font-size: 14px;
    color: #fff;
    font-weight: 600
}

.bonus-claim-button {
    background-color: #00c950;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.bonus-claim-button:hover {
    background-color: #00a940
}

.inbox-message-actions {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.inbox-delete-button {
    background-color: #ff3b3033;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .3);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s ease
}

.inbox-delete-button:hover {
    background-color: #ff3b304d
}

.profile-modal-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.profile-header-buttons {
    display: flex;
    gap: 12px;
    order: 2
}

.profile-modal-header-container .MuiTabs-root {
    order: 1
}

@media (max-width: 450px) {
    .profile-modal-header-container {
        flex-direction: row;
        align-items: center;
        gap: 8px
    }
    .profile-header-buttons {
        justify-content: flex-end;
        align-self: center;
        order: 2;
        flex-shrink: 0
    }
    .profile-modal-header-container .MuiTabs-root {
        order: 1;
        flex: 1;
        min-width: 0
    }
    .profile-modal-header-container .MuiTab-root {
        font-size: 11px !important
    }
    .profile-header-buttons .MuiIconButton-root {
        width: 24px !important;
        height: 24px !important
    }
    .stat-card-title {
        font-size: 12px
    }
    .stat-card-value {
        font-size: 30px
    }
    .stat-card-subtext,
    .stat-card-ordinal,
    .stat-card-pnl {
        font-size: 14px
    }
    .profile-level-text {
        flex-direction: row;
        align-items: flex-start;
        gap: 4px
    }
    .best-pnl-title {
        font-size: 16px
    }
}

@media (max-width: 768px) {
    .profile-modal {
        width: 95%;
        max-width: none;
        margin: 10px
    }
    .profile-tab {
        padding: 12px 16px;
        font-size: 14px
    }
    .profile-modal-header {
        padding: 16px
    }
    .profile-modal-header h2 {
        font-size: 20px
    }
    .inbox-modal {
        width: 95%;
        max-width: none;
        margin: 10px
    }
    .inbox-message-item {
        padding: 12px 16px
    }
    .inbox-message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px
    }
    .inbox-message-title {
        font-size: 14px
    }
}

.admin-action-buttons {
    display: flex;
    gap: 8px
}

.admin-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    font-size: 12px;
    background: #4da6ff;
    color: #fff;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color .2s
}

.admin-action-btn:hover,
.admin-action-btn.active {
    background: #3a8eff
}

.admin-form-section {
    padding: 16px;
    background: #1a1a2e;
    border-bottom: 1px solid #374151
}

.admin-form-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px
}

.admin-form-grid {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.form-row.horizontal {
    flex-direction: row;
    gap: 8px
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%
}

.form-label {
    color: #fff;
    font-size: 12px;
    margin-bottom: 4px;
    font-weight: 500
}

.form-input {
    background: #252538;
    color: #fff;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #374151;
    transition: border-color .2s;
    width: 100%
}

.form-input:focus {
    border-color: #4da6ff;
    outline: none
}

.form-input.half-width {
    width: 100%;
    flex: none
}

.form-input.time-input {
    width: 100%
}

.form-textarea {
    background: #252538;
    color: #fff;
    font-size: 12px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #374151;
    min-height: 60px;
    resize: vertical;
    transition: border-color .2s
}

.form-textarea:focus {
    border-color: #4da6ff;
    outline: none
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px
}

.form-checkbox input[type=checkbox] {
    width: 12px;
    height: 12px;
    accent-color: #4da6ff
}

.form-checkbox label {
    color: #fff;
    font-size: 12px
}

.form-submit-btn {
    width: 100%;
    background: #00c950;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 8px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color .2s
}

.form-submit-btn:hover {
    background: #00a940
}

.form-submit-btn:disabled {
    background: #6b7280;
    cursor: not-allowed
}

.best-pnl-bg-left {
    left: 0;
    background-image: url(/images/star-bg.png)
}

.best-pnl-bg-right {
    right: 0;
    background-image: url(/images/chart-bg.png)
}

.best-pnl-bg-left {
    left: 0;
    background-image: url(/images/star-bg.png)
}

.best-pnl-bg-right {
    right: 0;
    background-image: url(/images/chart-bg.png)
}

.time-input-group {
    display: flex;
    gap: 8px;
    align-items: center
}

.time-now-btn {
    background: #4da6ff;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color .2s
}

.time-now-btn:hover {
    background: #3a8eff
}

.schedule-preview {
    color: #9ca3af;
    font-size: 12px;
    text-align: center;
    margin-top: 8px
}

.conversion-limits {
    color: #fbbf24;
    font-size: 12px;
    text-align: center;
    margin-top: 4px
}

.bonus-section {
    padding-top: 8px;
    border-top: 1px solid #374151;
    margin-top: 8px
}

.bonus-section .form-row {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.bonus-section .form-group,
.bonus-section .form-input {
    width: 100%
}

.bonus-section .form-input.half-width {
    width: 100%;
    flex: none
}

.active-faucets-section {
    margin-top: 8px;
    border-top: 1px solid #374151;
    padding: 16px
}

.faucets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.faucets-title {
    color: #fff;
    font-size: 14px;
    font-weight: 700
}

.faucets-toggle {
    color: #60a5fa;
    font-size: 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color .2s
}

.faucets-toggle:hover {
    color: #93c5fd
}

.faucets-list {
    max-height: 160px;
    overflow-y: auto
}

.faucets-empty {
    color: #9ca3af;
    font-size: 12px;
    font-style: italic
}

.faucet-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: #1e1e2e;
    border-radius: 8px;
    border: 1px solid #374151;
    margin-bottom: 8px
}

.faucet-details {
    flex: 1
}

.faucet-name {
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 4px
}

.faucet-next,
.faucet-amount,
.faucet-progress {
    color: #9ca3af;
    font-size: 12px;
    margin-bottom: 4px
}

.faucet-cancel-btn {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s
}

.faucet-cancel-btn:hover {
    background: #b91c1c
}

.inbox-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.inbox-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000b3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.inbox-modal-content {
    background: #121217;
    border-radius: 12px;
    border: 1px solid #374151;
    width: 90%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column
}

.inbox-modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.inbox-modal-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    transition: color .2s
}

.inbox-modal-close:hover {
    color: #fff
}

.inbox-messages {
    overflow-y: auto;
    flex: 1;
    padding: 15px !important
}

.inbox-loading,
.inbox-empty {
    text-align: center;
    padding: 16px;
    color: #9ca3af;
    font-size: 14px
}

.profile-tab-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    animation: fadeSlideIn .3s ease-out
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.profile-admin-search-container {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    margin-bottom: 0
}

.profile-admin-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.profile-admin-search-input-container {
    position: relative;
    flex: 1;
    min-width: 250px
}

.profile-admin-search-input {
    width: 100%;
    padding: 12px 45px 12px 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    transition: border-color .2s ease
}

.profile-admin-search-input:focus {
    outline: none;
    border-color: #00f5d4
}

.profile-admin-search-input.error {
    border-color: #ff3b30
}

.profile-admin-search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
    pointer-events: none
}

.profile-admin-search-btn {
    padding: 12px 20px;
    background: #00f5d4;
    color: #000;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
    white-space: nowrap
}

.profile-admin-search-btn:hover {
    background: #00d4b8
}

.profile-admin-search-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.profile-admin-reset-btn {
    padding: 12px 20px;
    background: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap
}

.profile-admin-reset-btn:hover {
    background: #444;
    border-color: #666
}

.profile-admin-search-error {
    width: 100%;
    margin-top: 8px;
    padding: 8px 12px;
    background: #ff3b301a;
    border: 1px solid rgba(255, 59, 48, .3);
    border-radius: 6px;
    color: #ff3b30;
    font-size: 14px
}

.profile-admin-viewing-indicator {
    margin-top: 12px;
    padding: 10px 12px;
    background: #00f5d41a;
    border: 1px solid rgba(0, 245, 212, .2);
    border-radius: 6px
}

.admin-viewing-text {
    color: #00f5d4;
    font-size: 14px;
    font-weight: 500
}

.admin-viewing-username {
    color: #fd4;
    font-weight: 700
}

.profile-username-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
    padding: 40px 20px;
    text-align: center
}

.profile-username-setup>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%
}

.profile-username-setup h2 {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 16px;
    text-align: center
}

.profile-username-setup p {
    color: #ffffffb3;
    margin-bottom: 32px;
    font-size: 16px;
    text-align: center
}

.username-form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.username-input-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%
}

.username-input {
    width: 100%;
    max-width: 400px;
    padding: 16px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    transition: border-color .2s ease;
    box-sizing: border-box
}

.username-input:focus {
    outline: none;
    border-color: #00f5d4
}

.username-input.error {
    border-color: #ff3b30
}

.username-error {
    margin-top: 8px;
    color: #ff3b30;
    font-size: 14px;
    text-align: center
}

.username-submit-btn {
    width: 100%;
    max-width: 400px;
    padding: 16px;
    background: #00f5d4;
    color: #000;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box
}

.username-submit-btn:hover {
    background: #00d4b8
}

.username-submit-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.profile-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px
}

.profile-header {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.profile-header-content {
    display: flex;
    flex-direction: column
}

.profile-username-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap
}

.profile-username {
    font-family: DynaPuff, cursive;
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 700;
    color: #fff;
    margin: 0;
    flex: 1;
    min-width: 0
}

.profile-username-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0
}

.profile-cache-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #ffffff80;
    font-size: 11px
}

.profile-cache-indicator-dot {
    font-size: 10px
}

.profile-level-container {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 0
}

.profile-level-badge {
    transform: scale(1.75);
    margin-right: 16px;
    margin-left: 8px;
    flex-shrink: 0
}

.profile-level-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.profile-level-text {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.profile-level-label {
    font-family: DynaPuff, cursive;
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(to right, #51a2ff, #fbedb9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.profile-xp-label {
    font-family: DynaPuff, cursive;
    font-size: 16px;
    font-weight: 600;
    color: #fffc
}

.profile-xp-progress-container {
    width: 100%;
    height: 10px;
    background: #ffffff1a;
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.profile-xp-progress-bar {
    height: 100%;
    background: linear-gradient(to right, #51a2ff, #fbedb9);
    border-radius: 4px;
    transition: width .3s ease;
    position: relative
}

.profile-xp-progress-bar:after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
    animation: progressShimmer 2s infinite
}

@keyframes progressShimmer {
    0% {
        left: -100%
    }
    to {
        left: 100%
    }
}

.profile-best-pnl-title {
    margin-bottom: 4px
}

.best-pnl-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff
}

.best-pnl-date {
    font-size: 14px;
    color: #fff9;
    margin-bottom: 8px
}

.profile-best-pnl-section {
    position: relative;
    background: #0a0a0a;
    border-radius: 24px;
    border: 2px solid transparent;
    background-image: linear-gradient(#0a0a0a, #0a0a0a), linear-gradient(135deg, #22c55e, #86efac);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 10px #22c55e1a, 0 0 30px #22c55e1a;
    width: 100%;
    aspect-ratio: 28/9;
    overflow: hidden
}

.best-pnl-border-overlay {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #00f5d4, #00c950, #fd4, #00f5d4);
    background-size: 400% 400%;
    border-radius: 14px;
    z-index: 0;
    animation: borderGlow 3s ease-in-out infinite
}

@keyframes borderGlow {
    0%,
    to {
        background-position: 0% 50%
    }
    50% {
        background-position: 100% 50%
    }
}

.best-pnl-border-overlay:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: #0a0a0a;
    border-radius: 12px
}

.best-pnl-bg-left,
.best-pnl-bg-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: .3;
    z-index: 1
}

.best-pnl-bg-left {
    left: 0;
    background-image: url(/images/star-bg.png)
}

.best-pnl-bg-right {
    right: 0;
    background-image: url(/images/chart-bg.png)
}

.best-pnl-gradient-left,
.best-pnl-gradient-right {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    z-index: 2
}

.best-pnl-gradient-left {
    left: 0;
    background: linear-gradient(90deg, rgba(0, 245, 212, .1), transparent)
}

.best-pnl-gradient-right {
    right: 0;
    background: linear-gradient(270deg, rgba(0, 201, 80, .1), transparent)
}

.best-pnl-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%
}

.best-pnl-left {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.best-pnl-star {
    position: absolute;
    animation: starTwinkle 2s ease-in-out infinite
}

.best-pnl-star-top {
    top: -12px;
    left: -8px
}

.best-pnl-star-bottom {
    bottom: -12px;
    right: -8px
}

@keyframes starTwinkle {
    0%,
    to {
        opacity: .6;
        transform: scale(1)
    }
    50% {
        opacity: 1;
        transform: scale(1.1)
    }
}

.best-pnl-amount {
    font-size: 28px;
    font-weight: 800;
    color: #00c950;
    margin-bottom: 16px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .3)
}

.best-pnl-stats {
    display: flex;
    gap: 24px
}

.best-pnl-stat {
    display: flex;
    flex-direction: column
}

.best-pnl-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px
}

.best-pnl-gain {
    color: #00c950
}

.best-pnl-stat-label {
    font-size: 12px;
    color: #fff9;
    text-transform: uppercase;
    letter-spacing: .5px
}

.best-pnl-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

.best-pnl-chart {
    width: 120px;
    height: 80px;
    background: #ffffff0d;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center
}

.chart-placeholder {
    color: #ffffff4d;
    font-size: 12px
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
}

.profile-stat-card {
    background: var(--color-card);
    border: 2px solid #383943;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease
}

.profile-stat-card:hover {
    transform: translateY(-2px)
}

.profile-stat-card:nth-child(1):hover {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-card), var(--color-card)), linear-gradient(180deg, #3b82f61a, #3b82f6);
    background-origin: border-box;
    background-clip: padding-box, border-box
}

.profile-stat-card:nth-child(2):hover {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-card), var(--color-card)), linear-gradient(180deg, #eab30880, #eab308);
    background-origin: border-box;
    background-clip: padding-box, border-box
}

.profile-stat-card:nth-child(3):hover {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-card), var(--color-card)), linear-gradient(180deg, #a855f780, #a855f7);
    background-origin: border-box;
    background-clip: padding-box, border-box
}

.profile-stat-card:nth-child(4):hover {
    border: 2px solid transparent;
    background-image: linear-gradient(var(--color-card), var(--color-card)), linear-gradient(180deg, #06b6d480, #06b6d4);
    background-origin: border-box;
    background-clip: padding-box, border-box
}

.stat-card-title {
    font-size: 14px;
    color: #ffffffb3;
    margin: 0 0 12px;
    letter-spacing: .5px
}

.stat-card-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.stat-card-value {
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    line-height: 1
}

.stat-card-subtext {
    font-size: 16px;
    color: #ffffff80
}

.stat-card-rank {
    display: flex;
    align-items: baseline;
    gap: 2px
}

.stat-card-ordinal {
    font-size: 16px;
    font-weight: 600;
    color: #ffffffb3
}

.stat-card-pnl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600
}

.stat-card-pnl.positive {
    color: #22c55e
}

.stat-card-pnl.negative {
    color: #dc2626
}

.stat-card-centered .stat-card-content {
    align-items: center
}

.stat-card-value-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 32px;
    font-weight: 800;
    color: #fff
}

.profile-recent-games {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    max-width: 96%
}

.profile-recent-games .MuiPaper-root {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important
}

.recent-games-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px
}

.recent-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px
}

.recent-game-card {
    background: transparent;
    border: 1px solid #383943;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease;
    height: 200px;
    aspect-ratio: 1/1.2;
    position: relative;
    overflow: hidden
}

.recent-game-card[data-profit=true] {
    border-color: #22c55e
}

.recent-game-card[data-profit=false] {
    border-color: #dc2626
}

.recent-game-card .standard-profile-recent {
    width: 100%;
    height: 100%
}

.recent-game-card .standard-profile-recent img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.recent-game-card .chart-container {
    flex: 1;
    width: 100%;
    height: 100%;
    position: relative
}

.recent-game-card canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 184px !important;
    max-height: 184px !important
}

.game-card-multiplier {
    font-size: 18px;
    font-weight: 800;
    color: #fd4;
    text-align: center
}

.game-card-chart {
    height: 60px;
    background: #ffffff08;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center
}

.game-chart-placeholder {
    color: #fff3;
    font-size: 10px
}

.game-card-pnl {
    font-size: 14px;
    font-weight: 700;
    text-align: center
}

.game-card-pnl.positive {
    color: #00c950
}

.game-card-pnl.negative {
    color: #ff3b30
}

.game-card-time {
    font-size: 10px;
    color: #ffffff80;
    text-align: center
}

.recent-games-empty {
    text-align: center;
    color: #ffffff80;
    font-style: italic;
    padding: 40px
}

.profile-leaderboard-section {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0
}

.leaderboard-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px
}

.profile-leaderboard-container .leaderboard-container {
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none
}

.profile-leaderboard-container .leaderboard-header-title {
    display: none
}

.profile-admin-controls-placeholder {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: #ffffff80;
    font-style: italic
}

.profile-connect-button {
    background-color: var(--color-background) !important;
    color: #fff !important;
    border: 2px solid transparent !important;
    border-radius: 100px !important;
    padding: 8px 16px !important;
    font-size: .875rem !important;
    font-weight: 400 !important;
    background-image: linear-gradient(var(--color-background), var(--color-background)), linear-gradient(to right, #51a2ff, #fbedb9) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow: 2px 4px #51a2ff99 !important;
    height: 33px !important;
    transition: all .2s ease !important;
    white-space: nowrap !important;
    min-width: auto !important
}

.profile-connect-button:active:not(:disabled) {
    transform: translate(1px, 2px) !important;
    box-shadow: 1px 2px #51a2ff99 !important
}

.profile-connect-button:disabled {
    cursor: not-allowed !important;
    opacity: .7 !important
}

.profile-connect-button:hover:not(:disabled) {
    background-color: var(--color-background) !important
}

@media (max-width: 768px) {
    .profile-content {
        padding: 16px;
        gap: 20px
    }
    .profile-username {
        font-size: 24px
    }
    .profile-level-container {
        gap: 12px
    }
    .profile-level-badge {
        transform: scale(1.5)
    }
    .profile-level-label {
        font-size: 18px
    }
    .profile-xp-label {
        font-size: 14px
    }
    .best-pnl-amount {
        font-size: 24px
    }
    .best-pnl-stats {
        gap: 16px
    }
    .profile-stats-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .recent-games-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px
    }
    .recent-game-card {
        width: 180px;
        height: 180px
    }
    .recent-game-card canvas {
        max-width: 164px !important;
        max-height: 164px !important
    }
    .profile-admin-search-form {
        flex-direction: column;
        align-items: stretch
    }
    .profile-admin-search-input-container {
        min-width: unset
    }
}

@media (max-width: 450px) {
    .profile-content {
        padding: 5px
    }
    .inbox-message {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 12px
    }
    .message-actions {
        align-self: flex-end
    }
    .admin-action-buttons {
        flex-direction: row
    }
    .bonus-code-header,
    .bonus-code-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
}

.connect-tab-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    height: 100%;
    overflow-y: auto;
    animation: fadeSlideIn .3s ease-out
}

.connect-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 16px;
    color: #ffffffb3
}

.connect-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, .1);
    border-top: 3px solid #00f5d4;
    border-radius: 50%;
    animation: spin 1s linear infinite
}

.connect-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    margin: 16px 20px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    transition: all .3s ease
}

.connect-notification.success {
    background-color: #00c9501a;
    border: 1px solid rgba(0, 201, 80, .3);
    color: #00c950
}

.connect-notification.error {
    background-color: #ff3b301a;
    border: 1px solid rgba(255, 59, 48, .3);
    color: #ff3b30
}

.connect-notification.pending {
    background-color: #00f5d41a;
    border: 1px solid rgba(0, 245, 212, .3);
    color: #00f5d4
}

.connect-notification-close {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    padding: 4px;
    border-radius: 4px;
    transition: background-color .2s ease
}

.connect-notification-close:hover {
    background-color: #ffffff1a
}

.disconnect-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000b3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.disconnect-modal-container {
    background-color: #1e202a;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px #00000080;
    border: 1px solid rgba(255, 255, 255, .1)
}

.disconnect-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.disconnect-modal-icon {
    color: #fc0;
    font-size: 24px
}

.disconnect-modal-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600
}

.disconnect-modal-text {
    color: #ffffffb3;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5
}

.disconnect-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.disconnect-modal-cancel {
    background-color: #ffffff1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.disconnect-modal-cancel:hover {
    background-color: #ffffff26
}

.disconnect-modal-confirm {
    background-color: #ff3b3033;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .5);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.disconnect-modal-confirm:hover {
    background-color: #ff3b304d
}

.connect-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin: 16px 20px;
    background-color: #ff3b301a;
    border: 1px solid rgba(255, 59, 48, .3);
    border-radius: 8px;
    color: #ff3b30;
    text-align: center
}

.connect-error-close {
    background-color: #ff3b3033;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .5);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.connect-error-close:hover {
    background-color: #ff3b304d
}

@media (max-width: 768px) {
    .connect-tab-container {
        padding: 0;
        gap: 16px
    }
    .connect-notification {
        margin: 12px 16px 0;
        padding: 12px;
        font-size: 13px
    }
    .disconnect-modal-container {
        max-width: 350px;
        padding: 20px
    }
    .disconnect-modal-title {
        font-size: 16px
    }
    .disconnect-modal-text {
        font-size: 13px
    }
    .disconnect-modal-actions {
        flex-direction: column;
        gap: 8px
    }
    .disconnect-modal-cancel,
    .disconnect-modal-confirm {
        width: 100%;
        padding: 12px
    }
    .connect-error {
        margin: 12px 16px;
        padding: 16px
    }
}

.claimed-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #00c950;
    font-size: 12px;
    font-weight: 600
}

.claim-error {
    color: #e74c3c;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    background: #e74c3c1a;
    border-radius: 4px;
    border: 1px solid rgba(231, 76, 60, .3)
}

.claim-success {
    color: #00c950;
    font-size: 12px;
    margin-top: 8px;
    padding: 4px 8px;
    background: #00c9501a;
    border-radius: 4px;
    border: 1px solid rgba(0, 201, 80, .3)
}

.profile-bottom-sheet {
    z-index: 100000 !important;
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: translateZ(0) !important
}

.profile-bottom-sheet .MuiTabPanel-root {
    padding: 16px !important;
    overflow-y: auto;
    height: 100%
}

.profile-bottom-sheet {
    overflow-y: auto;
    height: 100%
}

.profile-bottom-sheet .MuiTab-root {
    min-width: auto !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important
}

.profile-bottom-sheet.dragging {
    -webkit-user-select: none;
    user-select: none
}

.profile-bottom-sheet .MuiTabPanel-root>div {
    height: 100%;
    overflow-y: auto
}

@media (max-width: 460px) {
    .profile-bottom-sheet .MuiTabPanel-root {
        padding: 12px !important
    }
    .profile-bottom-sheet .refer-tab-container,
    .profile-bottom-sheet .profile-profile-tab,
    .profile-bottom-sheet .connect-tab-container {
        padding: 0 !important
    }
    .profile-bottom-sheet .MuiBox-root {
        margin-bottom: 8px
    }
}

@media (max-width: 480px) {
    .profile-username-container {
        gap: 12px
    }
    .profile-username {
        font-size: 20px
    }
    .profile-username-actions {
        gap: 6px
    }
}

.admin-viewing-notice {
    color: var(--color-muted-foreground);
    font-size: 14px;
    margin-top: 4px
}

.inbox-messages {
    flex: 1;
    overflow-y: auto
}

.inbox-message {
    background: var(--color-card);
    border: 2px solid #383943;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    transition: transform .2s ease, border-color .2s ease;
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.inbox-message:hover {
    transform: translateY(-2px)
}

.inbox-message.unread {
    border-left: 4px solid var(--color-primary);
    background: var(--color-card)
}

.message-content {
    flex: 1;
    margin-right: 10px
}

.message-title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px
}

.inbox-message.unread .message-title {
    color: #4a90e2
}

.message-date {
    color: #888;
    font-size: 12px;
    margin-bottom: 8px
}

.message-text {
    color: #ccc;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 10px
}

.message-actions {
    display: flex;
    gap: 5px;
    flex-shrink: 0
}

.mark-read-btn {
    background-color: #4a90e2;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .2s
}

.mark-read-btn:hover {
    background-color: #357abd
}

.delete-btn {
    background-color: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color .2s
}

.delete-btn:hover {
    background-color: #c0392b
}

.bonus-code-section {
    margin-top: 12px;
    background: #1e1e2e;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #374151
}

.bonus-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border)
}

.bonus-code-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d1d5db;
    font-size: 12px
}

.copy-btn {
    background: #252538;
    color: #fff;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    transition: background-color .2s
}

.copy-btn:hover {
    background: #3a3a4a
}

.claim-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #007736;
    color: #fff;
    border: 1px solid #374151;
    border-radius: 4px;
    padding: 4px 12px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color .2s
}

.claim-btn:hover:not(:disabled) {
    background: #00a940
}

.claim-btn:disabled {
    background: #555;
    cursor: not-allowed;
    opacity: .7
}

.action-button {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px
}

.action-button:hover {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    transform: translateY(-1px)
}

.action-button.delete:hover {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error)
}

.action-button.mark-read {
    background: var(--color-muted);
    color: #fff
}

.action-button.mark-read:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary)
}

.promo-feedback {
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

.promo-feedback.success {
    background: rgba(var(--color-success-rgb), .15);
    color: var(--color-success);
    border: 1px solid var(--color-success)
}

.promo-feedback.error {
    background: rgba(var(--color-error-rgb), .15);
    color: var(--color-error);
    border: 1px solid var(--color-error)
}

.claimed-status {
    margin-top: 12px;
    padding: 8px 16px;
    background: rgba(var(--color-success-rgb), .15);
    color: var(--color-success);
    border: 1px solid var(--color-success);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

@media (max-width: 768px) {
    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .message-time {
        margin-left: 0
    }
    .bonus-code-section {
        padding: 16px
    }
    .bonus-code-container {
        padding: 12px
    }
    .bonus-code-text {
        font-size: 16px
    }
    .bonus-code-actions {
        flex-direction: column;
        gap: 12px
    }
    .claim-btn {
        width: 100%
    }
    .message-actions {
        position: static;
        justify-content: flex-end;
        margin-top: 16px
    }
    .inbox-message {
        padding: 16px
    }
}

.inbox-tab-container {
    color: var(--color-text-primary)
}

.inbox-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border)
}

.inbox-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary)
}

.admin-form-section {
    margin-bottom: 24px
}

.inbox-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px
}

.empty-state {
    text-align: center;
    color: var(--color-text-muted)
}

.empty-state h3 {
    margin: 16px 0 8px;
    color: var(--color-text-primary)
}

.inbox-loading,
.inbox-error {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--color-text-muted)
}

.message-actions {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px
}

.bonus-code-section.compact {
    width: 100%;
    padding: 16px;
    margin-top: 16px;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-sizing: border-box
}

.bonus-code-compact-container {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    flex-wrap: wrap
}

.bonus-code-compact-container .bonus-code-label {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0
}

.bonus-code-compact-container .bonus-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-success);
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0
}

@media (max-width: 768px) {
    .message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }
    .message-header .action-button.mark-read.header {
        align-self: flex-end;
        margin-top: -24px
    }
    .bonus-code-compact-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }
    .bonus-code-with-copy {
        flex-direction: row;
        width: auto;
        margin: 0;
        padding: 10px 12px;
        gap: 8px
    }
    .bonus-code-with-copy .bonus-code-text {
        font-size: 14px;
        padding: 0
    }
    .claim-btn.compact.green {
        justify-content: center;
        padding: 10px 16px
    }
    .bonus-code-compact-container .bonus-code-label {
        font-size: 14px;
        text-align: center;
        align-self: center
    }
}

.message-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    gap: 16px
}

.message-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.3;
    flex: 1
}

.message-time {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--color-text-muted);
    flex-shrink: 0
}

.message-content {
    margin: 0
}

.message-content p {
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 15px
}

.bonus-code-with-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 8px 12px;
    gap: 8px
}

.bonus-code-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    flex-shrink: 0
}

.bonus-code-with-copy .bonus-code-text {
    font-family: Courier New, monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
    margin: 0
}

.copy-code-btn.compact {
    background: none;
    border: none;
    color: #fff6;
    cursor: pointer;
    padding: 0;
    transition: color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px
}

.copy-code-btn.compact:hover {
    color: var(--color-primary);
    background: none
}

.claim-btn.compact.green {
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    flex-shrink: 0
}

.claim-btn.compact.green:hover:not(:disabled) {
    background: #16a34a;
    transform: translateY(-1px)
}

.claim-btn.compact.green:disabled {
    background: var(--color-bg-tertiary);
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: .7
}

.action-button.mark-read.header {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    flex-shrink: 0
}

@media (max-width: 768px) {
    .inbox-message {
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
        transition: all .2s ease
    }
    .inbox-message:active {
        background: #ffffff0d;
        transform: scale(.98)
    }
    .inbox-message:hover {
        background: #ffffff05
    }
    .action-button.mark-read.header {
        display: none
    }
    .message-header {
        gap: 12px
    }
    .message-time.muted {
        color: #ffffff80
    }
    .bonus-code-with-copy button,
    .claim-btn {
        z-index: 10;
        position: relative
    }
}

@media (max-width: 768px) {
    .action-button.mark-read.header {
        display: none
    }
}

.mobile-confirmation-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000b3;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.mobile-confirmation-dialog {
    background: var(--color-card);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 8px 32px #0006;
    animation: confirmationFadeIn .2s ease-out
}

@keyframes confirmationFadeIn {
    0% {
        opacity: 0;
        transform: scale(.9) translateY(-10px)
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

.mobile-confirmation-header h3 {
    margin: 0 0 16px;
    color: var(--color-text-primary);
    font-size: 18px;
    font-weight: 700
}

.mobile-confirmation-content p {
    margin: 0 0 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.4
}

.mobile-confirmation-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.mobile-confirmation-cancel {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease
}

.mobile-confirmation-cancel:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary)
}

.mobile-confirmation-confirm {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    gap: 6px
}

.mobile-confirmation-confirm:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px)
}

.connect-tab-container {
    color: #fff
}

.connect-notification {
    position: relative;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn .3s ease-in-out
}

.connect-notification.success {
    background-color: #00f5d433;
    border: 1px solid #00f5d4;
    color: #00f5d4
}

.connect-notification.error {
    background-color: #ff3b3033;
    border: 1px solid #ff3b30;
    color: #ff3b30
}

.connect-notification.pending {
    background-color: #ffc40033;
    border: 1px solid #ffc400;
    color: #ffc400
}

.connect-notification-content {
    display: flex;
    align-items: center;
    gap: 8px
}

.connect-notification-close {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0 8px
}

.connect-notification.success .connect-notification-close {
    color: #00f5d4
}

.connect-notification.error .connect-notification-close {
    color: #ff3b30
}

.connect-notification.pending .connect-notification-close {
    color: #ffc400
}

.connect-accounts-section {
    padding: 24px;
    background-color: #1e202a;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 255, 255, .05)
}

.connect-accounts-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 16px;
    font-weight: 600;
    margin-top: 0
}

.connect-discord-card {
    background-color: #1e202a;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, .05)
}

.connect-discord-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.connect-discord-info {
    display: flex;
    align-items: center;
    gap: 12px
}

.connect-discord-icon {
    font-size: 24px;
    color: #5865f2
}

.connect-discord-name {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600
}

.connect-discord-status {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600
}

.connect-discord-status.connected {
    background-color: #00f5d426;
    color: #00f5d4
}

.connect-discord-status.not-connected {
    background-color: #ffffff26;
    color: #ffffffb3
}

.connect-discord-user-info {
    background-color: #0003;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 16px
}

.connect-discord-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #5865F2
}

.connect-discord-avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #5865f2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700
}

.connect-discord-user-details {
    flex: 1
}

.connect-discord-username {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px
}

.connect-discord-discriminator {
    color: #ffffff80
}

.connect-discord-connected-date {
    color: #fff6;
    font-size: 12px;
    margin-top: 4px
}

.connect-discord-description {
    color: #ffffffb3;
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 16px
}

.connect-discord-button {
    background-color: #5865f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: background-color .2s ease
}

.connect-discord-button:hover {
    background-color: #4752c4
}

.connect-discord-button:disabled {
    background-color: #5865f24d;
    cursor: not-allowed
}

.connect-discord-disconnect {
    background-color: transparent;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .5);
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all .2s ease
}

.connect-discord-disconnect:hover {
    background-color: #ff3b301a
}

.connect-discord-disconnect:disabled {
    opacity: .5;
    cursor: not-allowed
}

.connect-discord-reminder {
    background-color: #5865f21a;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(88, 101, 242, .2);
    margin-top: 16px
}

.connect-discord-reminder-text {
    color: #fffc;
    margin: 0;
    font-size: 14px;
    text-align: center
}

.connect-discord-server-link {
    color: #5865f2;
    text-decoration: underline;
    font-weight: 700
}

.connect-discord-server-link:hover {
    color: #4752c4;
    text-decoration: none
}

.connect-disconnect-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000b3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn .2s ease-in-out
}

.connect-disconnect-modal {
    background-color: #1e202a;
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px #00000080;
    border: 1px solid rgba(255, 255, 255, .1);
    animation: slideIn .2s ease-in-out
}

.connect-disconnect-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.connect-disconnect-modal-icon {
    color: #fc0;
    font-size: 24px
}

.connect-disconnect-modal-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600
}

.connect-disconnect-modal-text {
    color: #ffffffb3;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5
}

.connect-disconnect-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.connect-disconnect-modal-cancel {
    background-color: #ffffff1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease
}

.connect-disconnect-modal-cancel:hover {
    background-color: #ffffff26
}

.connect-disconnect-modal-confirm {
    background-color: #ff3b3033;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .5);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease
}

.connect-disconnect-modal-confirm:hover {
    background-color: #ff3b304d
}

.connect-loading {
    padding: 24px 0;
    text-align: center
}

.connect-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 245, 212, .2);
    border-top: 3px solid #00f5d4;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 1s linear infinite
}

.connect-error {
    padding: 16px;
    background-color: #ff3b301a;
    border-radius: 8px;
    margin-bottom: 24px;
    color: #ff3b30;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.connect-error-close {
    background: transparent;
    border: none;
    color: #ff3b30;
    font-size: 16px;
    cursor: pointer
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: scale(.9)
    }
    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media (max-width: 768px) {
    .connect-tab-container {
        padding: 16px 0
    }
    .connect-discord-card {
        padding: 16px
    }
    .connect-discord-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start
    }
    .connect-discord-user-info {
        flex-direction: column;
        text-align: center;
        gap: 12px
    }
    .connect-disconnect-modal {
        padding: 20px;
        margin: 16px
    }
    .connect-disconnect-modal-actions {
        flex-direction: column;
        gap: 8px
    }
    .connect-disconnect-modal-cancel,
    .connect-disconnect-modal-confirm {
        width: 100%
    }
}

.refer-tab-container {
    color: #fff
}

.refer-admin-viewing-indicator {
    background-color: #ffa50026;
    border: 1px solid rgba(255, 165, 0, .3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px
}

.refer-admin-viewing-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: orange;
    font-weight: 600;
    font-size: 14px
}

.refer-admin-viewing-icon {
    font-size: 18px
}

.refer-notification {
    position: relative;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn .3s ease-in-out
}

.refer-notification.success {
    background-color: #00f5d433;
    border: 1px solid #00f5d4;
    color: #00f5d4
}

.refer-notification.error {
    background-color: #ff3b3033;
    border: 1px solid #ff3b30;
    color: #ff3b30
}

.refer-notification-content {
    display: flex;
    align-items: center
}

.refer-notification-icon {
    margin-right: 12px;
    font-size: 16px
}

.refer-notification-close {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 0 8px
}

.refer-notification.success .refer-notification-close {
    color: #00f5d4
}

.refer-notification.error .refer-notification-close {
    color: #ff3b30
}

.refer-link-section {
    background-color: #00f5d40d;
    border: 1px solid rgba(0, 245, 212, .2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative
}

.refer-link-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px
}

.refer-link-title {
    font-size: 18px;
    margin: 0;
    color: #fff
}

.refer-partner-badge {
    background-color: #00f5d426;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #00f5d4;
    display: flex;
    align-items: center
}

.refer-partner-badge-icon {
    margin-right: 6px
}

.refer-link-input-container {
    display: flex;
    align-items: center;
    background-color: #0000004d;
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 16px
}

.refer-link-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    outline: none;
    padding: 8px 0
}

.refer-link-input::placeholder {
    color: #ffffff80
}

.refer-link-input:disabled {
    color: #ffffff80
}

.refer-copy-button {
    background-color: #00f5d41a;
    color: #00f5d4;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    margin-left: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color .2s
}

.refer-copy-button:disabled {
    background-color: #00f5d40d;
    color: #00f5d44d;
    cursor: not-allowed
}

.refer-copy-button-icon {
    margin-right: 8px
}

.refer-link-description {
    font-size: 14px;
    color: #fff9;
    margin: 0 0 16px
}

.refer-partner-program {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #00f5d426;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(0, 245, 212, .4)
}

.refer-partner-program-text {
    color: #00f5d4;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

.refer-partner-benefits {
    margin-top: 12px;
    font-size: 12px;
    color: #00f5d4e6;
    padding: 16px;
    background-color: #00f5d40d;
    border-radius: 6px;
    border: 1px solid rgba(0, 245, 212, .2)
}

.refer-partner-benefits-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 13px
}

.refer-partner-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.refer-partner-benefits-item {
    display: flex;
    align-items: center
}

.refer-partner-benefits-bullet {
    width: 4px;
    height: 4px;
    background-color: #00f5d4;
    border-radius: 50%;
    margin-right: 8px
}

.refer-partner-bonus-section {
    background-color: #ffd7000d;
    border: 1px solid rgba(255, 215, 0, .2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative
}

.refer-partner-bonus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px
}

.refer-partner-bonus-title {
    font-size: 18px;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px
}

.refer-partner-bonus-crown {
    color: gold;
    font-size: 16px
}

.refer-partner-bonus-content {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.refer-partner-bonus-amount {
    text-align: center;
    padding: 20px;
    background-color: #ffd7001a;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, .3)
}

.refer-partner-bonus-label {
    font-size: 14px;
    color: #fff9;
    margin-bottom: 8px
}

.refer-partner-bonus-value {
    font-size: 32px;
    font-weight: 700;
    color: gold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.refer-partner-wagering-section {
    background-color: #0003;
    border-radius: 12px;
    padding: 16px
}

.refer-partner-wagering-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.refer-partner-wagering-label {
    font-size: 14px;
    color: #fff9
}

.refer-partner-wagering-status {
    font-size: 14px;
    font-weight: 700
}

.refer-partner-wagering-complete {
    color: #00f5d4;
    display: flex;
    align-items: center;
    gap: 4px
}

.refer-partner-wagering-progress {
    color: gold
}

.refer-partner-wagering-bar {
    width: 100%;
    height: 8px;
    background-color: #ffffff1a;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px
}

.refer-partner-wagering-fill {
    height: 100%;
    background: linear-gradient(90deg, gold, #00f5d4);
    border-radius: 4px;
    transition: width .3s ease
}

.refer-partner-wagering-details {
    font-size: 12px;
    color: #ffffff80;
    text-align: center
}

.refer-partner-bonus-action {
    text-align: center
}

.refer-partner-claim-button {
    background-color: gold;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
    position: relative;
    overflow: hidden;
    min-width: 200px
}

.refer-partner-claim-button:disabled {
    background-color: #ffd7004d;
    color: #00000080;
    cursor: not-allowed
}

.refer-partner-claim-button:hover:not(:disabled) {
    background-color: #ffed4e
}

.refer-partner-bonus-warning {
    background-color: #ffa5001a;
    border: 1px solid rgba(255, 165, 0, .3);
    border-radius: 8px;
    padding: 12px 16px;
    color: orange;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600
}

.refer-partner-bonus-info {
    font-size: 14px;
    color: #fff9;
    text-align: center;
    padding: 12px;
    background-color: #ffd7000d;
    border-radius: 8px
}

.refer-account-status {
    background-color: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 24px
}

.refer-account-status.referred {
    background-color: #00f5d40d;
    border: 1px solid rgba(0, 245, 212, .2)
}

.refer-account-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px
}

.refer-account-status.not-referred .refer-account-status-header {
    margin-bottom: 16px
}

.refer-account-status.referred .refer-account-status-header {
    margin-bottom: 0
}

.refer-account-status-info {
    display: flex;
    align-items: center
}

.refer-account-status-icon {
    background-color: #ffffff1a;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px
}

.refer-account-status.referred .refer-account-status-icon {
    background-color: #00f5d41a
}

.refer-account-status-icon svg {
    font-size: 16px;
    color: #fff
}

.refer-account-status.referred .refer-account-status-icon svg {
    color: #00f5d4
}

.refer-account-status-label {
    font-size: 14px;
    color: #fff9;
    margin-bottom: 4px
}

.refer-account-status-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff
}

.refer-account-status-badge {
    background-color: #ffffff1a;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center
}

.refer-account-status.referred .refer-account-status-badge {
    background-color: #00f5d426;
    border: 1px solid rgba(0, 245, 212, .4);
    color: #00f5d4
}

.refer-account-status-badge-icon {
    margin-right: 6px;
    font-size: 10px
}

.refer-username-form {
    background-color: #0003;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 8px
}

.refer-username-form-label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 8px
}

.refer-username-form-input-container {
    display: flex;
    align-items: center
}

.refer-username-form-input {
    flex: 1;
    background-color: #ffffff1a;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    outline: none;
    margin-right: 8px;
    transition: border-color .2s
}

.refer-username-form-input::placeholder {
    color: #fff6
}

.refer-username-form-submit.MuiButton-root {
    background-color: #00f5d4cc;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
    position: relative;
    overflow: hidden
}

.refer-username-form-submit.Mui-disabled {
    background-color: #00f5d44d;
    color: #00000080;
    cursor: not-allowed
}

.refer-username-form-error {
    color: #ff3b30;
    font-size: 13px;
    padding: 8px 0
}

.refer-username-form-success {
    color: #00f5d4;
    font-size: 13px;
    padding: 8px 0;
    font-weight: 700
}

.refer-username-form-info {
    font-size: 13px;
    color: #fff9;
    margin-top: 12px
}

.refer-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px
}

.refer-stat-card {
    background-color: #0000004d;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.refer-stat-icon {
    background-color: #00f5d41a;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px
}

.refer-stat-icon svg {
    font-size: 20px;
    color: #00f5d4
}

.refer-stat-label {
    font-size: 14px;
    color: #fff9;
    margin-bottom: 8px;
    text-align: center
}

.refer-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center
}

.refer-stat-sol-icon {
    height: 20px;
    margin-right: 6px;
    position: relative;
    top: -1px
}

.refer-stat-time {
    font-size: 12px;
    color: #fff6;
    margin-top: 4px
}

.refer-unclaimed-section {
    background-color: #0000004d;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    position: relative
}

.refer-unclaimed-label {
    font-size: 14px;
    color: #fff9;
    margin-bottom: 4px
}

.refer-unclaimed-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center
}

.refer-unclaimed-processing {
    font-size: 14px;
    color: #00f5d4;
    margin-top: 8px;
    animation: pulse 1.2s infinite
}

.refer-unclaimed-time {
    font-size: 12px;
    color: #fff6;
    margin-top: 8px;
    display: flex;
    align-items: center
}

.refer-unclaimed-time.with-processing {
    margin-top: 4px
}

.refer-unclaimed-time-icon {
    margin-right: 6px;
    font-size: 10px
}

.refer-claim-button {
    background-color: #00f5d4;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s;
    position: relative;
    overflow: hidden
}

.refer-claim-button:disabled {
    background-color: #00f5d44d;
    color: #00000080;
    cursor: not-allowed
}

.refer-layers-section {
    background-color: #0000004d;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px
}

.refer-layers-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 16px;
    color: #fff
}

.refer-layers-image-container {
    text-align: center;
    margin-bottom: 16px
}

.refer-layers-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 16px
}

.refer-layers-info {
    margin-top: 16px;
    font-size: 14px;
    color: #fff9;
    padding: 12px;
    border-radius: 8px;
    background-color: #ffffff0d
}

.refer-layers-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px
}

.refer-layers-info-item:last-child {
    margin-bottom: 0
}

.refer-layers-info-icon {
    color: #00f5d4;
    margin-right: 8px
}

.refer-layers-highlight {
    color: #ffc107;
    font-weight: 700
}

.refer-faq-section {
    background-color: #0000004d;
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px
}

.refer-faq-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 16px;
    color: #fff
}

.refer-faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.refer-faq-item {
    background-color: #00f5d40d;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
    border: 1px solid rgba(0, 245, 212, .2)
}

.refer-faq-question {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background-color: #00f5d40d;
    transition: background-color .2s ease
}

.refer-faq-question.expanded {
    background-color: #00f5d41a;
    border-bottom: 1px solid rgba(0, 245, 212, .2)
}

.refer-faq-question-text {
    margin: 0;
    color: #fff;
    font-weight: 700;
    font-size: 16px
}

.refer-faq-arrow {
    transition: transform .3s ease;
    font-size: 18px;
    font-weight: 700;
    margin-left: 12px;
    -webkit-user-select: none;
    user-select: none;
    color: #00f5d4
}

.refer-faq-arrow.expanded {
    transform: rotate(180deg)
}

.refer-faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all .3s ease;
    padding: 0 16px
}

.refer-faq-answer.expanded {
    max-height: 1000px;
    opacity: 1;
    padding: 16px
}

.refer-faq-answer-text {
    margin: 0;
    line-height: 1.5;
    color: #fffc;
    font-size: 15px
}

.refer-loading {
    padding: 24px 0;
    text-align: center
}

.refer-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 245, 212, .2);
    border-top: 3px solid #00f5d4;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 1s linear infinite
}

.refer-error {
    padding: 24px;
    text-align: center;
    background-color: #ff3b301a;
    border-radius: 8px;
    margin: 24px 0
}

.refer-error-message {
    margin-bottom: 16px;
    color: #ff3b30
}

.refer-retry-button {
    background-color: #00f5d4cc;
    color: #000;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer
}

@keyframes pulse {
    0% {
        opacity: .6
    }
    50% {
        opacity: 1
    }
    to {
        opacity: .6
    }
}

@keyframes shimmer {
    0% {
        transform: translate(-100%) skew(-20deg)
    }
    to {
        transform: translate(300%) skew(-20deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 768px) {
    .refer-tab-container {
        padding: 16px 0
    }
    .refer-link-section,
    .refer-account-status,
    .refer-unclaimed-section,
    .refer-layers-section,
    .refer-faq-section {
        padding: 16px
    }
    .refer-stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px
    }
    .refer-unclaimed-section {
        flex-direction: column;
        gap: 16px;
        text-align: center
    }
    .refer-claim-button {
        width: 100%
    }
}

.refer-section {
    background-color: #0000004d;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px
}

.refer-section-header {
    margin-bottom: 20px
}

.refer-section-title {
    font-size: 18px;
    margin: 0 0 8px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px
}

.refer-admin-icon {
    font-size: 16px;
    color: orange
}

.refer-section-subtitle {
    font-size: 14px;
    color: #fff9;
    margin: 0
}

.refer-conversion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 20px
}

.refer-conversion-card {
    background-color: #ffffff0d;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    overflow: hidden
}

.refer-conversion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px
}

.refer-conversion-icon {
    font-size: 20px;
    background-color: #00f5d41a;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.refer-conversion-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0
}

.refer-conversion-stats {
    text-align: center
}

.refer-conversion-percentage {
    font-size: 32px;
    font-weight: 700;
    color: #00f5d4;
    margin-bottom: 8px
}

.refer-conversion-details {
    font-size: 14px;
    color: #fff9;
    line-height: 1.4
}

.refer-conversion-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #00f5d414;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid rgba(0, 245, 212, .2)
}

.refer-conversion-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.refer-conversion-summary-label {
    font-size: 12px;
    color: #fff9;
    text-align: center
}

.refer-conversion-summary-value {
    font-size: 18px;
    font-weight: 700;
    color: #00f5d4
}

@media (max-width: 450px) {
    .refer-link-input {
        font-size: 12px;
        width: 100%
    }
    .refer-copy-button {
        font-size: 12px;
        margin-left: 0;
        margin-top: 8px
    }
    .refer-link-input-container {
        flex-direction: column;
        align-items: flex-start
    }
    .refer-account-status-header,
    .refer-link-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px
    }
}

@media (max-width: 768px) {
    .refer-conversion-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }
    .refer-conversion-summary {
        flex-direction: column;
        gap: 16px
    }
    .refer-conversion-summary-item {
        flex-direction: row;
        gap: 8px
    }
}

.refer-players-empty {
    text-align: center;
    padding: 20px;
    color: #fff9
}

.refer-players-empty-text {
    font-size: 14px
}

.refer-players-list-container {
    background-color: #0003;
    border-radius: 8px;
    padding: 4px
}

.refer-players-table-wrapper {
    max-height: 300px;
    overflow-y: auto
}

.refer-players-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent
}

.refer-players-table-header {
    background: #ffffff0d;
    padding: 10px;
    text-align: left;
    font-weight: 600;
    color: #ffffffb3;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.refer-players-table-header-player {
    text-align: left
}

.refer-players-table-header-joined {
    text-align: right
}

.refer-players-table-row {
    transition: background-color .2s ease
}

.refer-players-table-row-even {
    background-color: #0000001a
}

.refer-players-table-row:hover {
    background-color: #ffffff0d
}

.refer-players-table-cell {
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 14px
}

.refer-players-table-cell-player {
    text-align: left
}

.refer-players-table-cell-joined {
    text-align: right;
    color: #fff9;
    font-size: 12px
}

.refer-players-player-info {
    display: flex;
    align-items: center;
    gap: 8px
}

.refer-players-level-badge {
    flex-shrink: 0
}

.refer-players-username {
    font-weight: 400;
    color: #fff
}

.refer-players-username-level20 {
    font-weight: 700;
    color: #00f5d4
}

.ping-banner {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    width: 100%;
    max-height: 21px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    opacity: 0;
    transform: translateY(-100%);
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: all .3s ease-in-out
}

.ping-banner.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto
}

.ping-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 1;
    pointer-events: none
}

@media (max-width: 768px) {
    .ping-banner,
    .ping-indicator {
        top: 60px
    }
}

@media (max-width: 480px) {
    .ping-banner,
    .ping-indicator {
        top: 56px
    }
}

.thumbnails-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.thumbnails-section:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #15161d 0%, transparent 100%);
    pointer-events: none;
    z-index: 2
}

@media (max-width: 768px) {
    .thumbnails-section:after {
        display: none
    }
}

.thumbnails-section::-webkit-scrollbar {
    display: none
}

.standard-chart-thumbnail {
    width: 64px;
    height: 76px;
    border-radius: 4px;
    border: 2px solid var(--color-border);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    margin: 0 1px;
    position: relative;
    --slide-start-offset: 60px
}

.standard-chart-card {
    aspect-ratio: 1/1;
    background-color: transparent;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.standard-chart-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    max-height: 100%
}

@media (max-width: 768px) {
    .thumbnails-section {
        padding: 0;
        overflow-x: auto;
        justify-content: flex-start;
        flex-direction: row-reverse;
        scroll-behavior: smooth
    }
    .standard-chart-thumbnail {
        width: 50px;
        height: 62px;
        border: 1px solid var(--color-border);
        --slide-start-offset: 50px
    }
    .standard-chart-card {
        max-width: 100%;
        max-height: 100%;
        overflow: hidden
    }
    .standard-chart-card img {
        image-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        object-fit: contain
    }
}

@media (max-width: 480px) {
    .standard-chart-card {
        aspect-ratio: 1/1;
        max-width: 100vw;
        max-height: 100vh
    }
}

.sidebet-button,
.sidebet-countdown,
.sidebet-won,
.sidebet-lost,
.sidebet-container,
.countdown-circle,
.countdown-text,
.sidebet-info,
.countdown-info-title,
.countdown-info-amount,
.result-circle,
.result-icon,
.result-info,
.result-title,
.result-amount,
.payout-circle,
.sidebet-text-primary,
.sidebet-text-secondary,
.bet-button,
.bet-button-text,
.bet-button-amount,
.sidebet-info-title,
.sidebet-info-amount {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none
}

.sidebet-info-title,
.sidebet-info-amount,
.bet-button-text,
.bet-button-amount,
.countdown-info-title,
.countdown-info-amount,
.result-title,
.result-amount {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.sidebet-button {
    background: #854d0e !important;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
    animation: pulse 3s infinite
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 6px #00000040, 0 0 0 2px #ffa5000d
    }
    50% {
        box-shadow: 0 4px 8px #0000004d, 0 0 0 2px #ffa50026
    }
    to {
        box-shadow: 0 4px 6px #00000040, 0 0 0 2px #ffa5000d
    }
}

.sidebet-button:hover {
    box-shadow: 0 5px 10px #00000059, 0 0 0 2px #ffa5004d
}

.sidebet-button:active {
    transform: scale(.95);
    box-shadow: 0 2px 4px #0000004d, 0 0 0 2px #ffa50033
}

.sidebet-button:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    background: linear-gradient(to bottom, #f97316, #fdba74) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 1
}

.sidebet-text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: 2
}

.sidebet-text-primary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000;
    padding: 2px 6px;
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 2
}

.animation-top {
    animation: sideBetFadeSlideTop 3s ease-in-out infinite
}

.animation-bottom {
    animation: sideBetFadeSlideBottom 3s ease-in-out infinite
}

@keyframes sideBetFadeSlideTop {
    0%,
    40% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
    45%,
    50% {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 8px))
    }
    50%,
    90% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px))
    }
    95%,
    to {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
}

@keyframes sideBetFadeSlideBottom {
    0%,
    40% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px))
    }
    45%,
    50% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
    50%,
    90% {
        opacity: 1;
        transform: translate(-50%, -50%)
    }
    95%,
    to {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 8px))
    }
}

.sidebet-text-secondary {
    color: #fdba74 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center
}

.payout-circle {
    transition: transform .15s ease-in-out
}

.payout-circle:active {
    transform: scale(.95)
}

.payout-circle:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    background: linear-gradient(to bottom, #f97316, #fdba74) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1
}

.bet-button {
    background: linear-gradient(to bottom, #facc15, #fef08a, #ca8a04);
    box-shadow: 0 2px 5px #0000004d, 0 4px #b27b04;
    transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out
}

.bet-button:active {
    transform: translateY(-50%) translateY(4px) !important;
    box-shadow: 0 1px 2px #0003, 0 0 #b27b04 !important;
    background: linear-gradient(to bottom, #ca8a04, #fef08a, #facc15) !important
}

.bet-button-text {
    font-weight: 700;
    color: #713f12;
    font-family: DynaPuff, sans-serif;
    line-height: 1 !important;
    margin-bottom: 1px !important;
    letter-spacing: .5px;
    transition: transform .12s ease-out
}

.bet-button-amount {
    font-weight: 700;
    color: #713f12;
    font-family: DynaPuff, sans-serif;
    line-height: 1 !important;
    transition: transform .12s ease-out
}

.bet-button:active .bet-button-text,
.bet-button:active .bet-button-amount {
    transform: translateY(2px)
}

.sidebet-info-title {
    color: #fff;
    font-family: DynaPuff, sans-serif;
    letter-spacing: .3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    margin-bottom: 0;
    line-height: 1.2
}

.sidebet-info-amount {
    color: gold;
    font-weight: 700;
    font-family: DynaPuff, sans-serif;
    letter-spacing: .5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    line-height: 1.2
}

.countdown-circle {
    background: #7c2d12
}

.countdown-text {
    font-family: DynaPuff, sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    z-index: 1
}

.countdown-info-title {
    font-family: DynaPuff, sans-serif;
    margin-bottom: 0;
    letter-spacing: .2px;
    white-space: nowrap
}

.countdown-info-amount {
    font-weight: 700;
    font-family: DynaPuff, sans-serif;
    letter-spacing: .2px;
    white-space: nowrap
}

.text-white {
    color: #fff
}

.text-orange {
    color: #fb923c
}

.text-green {
    color: #22c55e
}

.countdown-progress {
    animation: countdown-sweep 10s linear forwards
}

.countdown-progress-paused {
    stroke-dashoffset: 0
}

@keyframes countdown-sweep {
    0% {
        stroke-dashoffset: 0
    }
    to {
        stroke-dashoffset: 283
    }
}

.result-circle {
    background: #1e312f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    position: relative;
    flex-shrink: 0;
    min-width: 50px;
    min-height: 50px
}

.result-circle:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    z-index: 1
}

.sidebet-won .result-circle:before {
    background: linear-gradient(to bottom, #22c55e, #86efac) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude
}

.sidebet-lost .result-circle {
    background: #7f1d1d
}

.sidebet-lost .result-circle:before {
    background: linear-gradient(to bottom, #ef4444, #fca5a5) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude
}

.result-icon {
    font-size: 24px;
    font-weight: 700;
    position: relative;
    z-index: 2
}

.sidebet-won .result-icon {
    color: #22c55e
}

.sidebet-lost .result-icon {
    color: #ef4444
}

.result-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.result-title {
    font-size: 13px;
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.result-amount {
    font-size: 14px;
    font-weight: 700;
    font-family: DynaPuff, sans-serif
}

.sidebet-won .result-amount {
    color: #22c55e
}

.sidebet-lost .result-amount {
    color: #ff4d4d
}

.sidebet-minimized-tab {
    background: #854d0e !important;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out, left .2s ease-in-out;
    animation: pulse 3s infinite;
    position: relative
}

.sidebet-minimized-tab.opening {
    animation: tab-open .3s ease-out forwards, pulse 3s infinite
}

.sidebet-minimized-tab:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 12px 12px 0;
    border: 2px solid transparent;
    background: linear-gradient(to bottom, #f97316, #fdba74) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -1
}

@keyframes tab-open {
    0% {
        bottom: 25px;
        left: 0
    }
    to {
        bottom: 20px;
        left: 20px
    }
}

.sidebet-minimized-tab:hover {
    left: 5px;
    box-shadow: 3px 6px 12px #00000059, 0 0 0 2px #ffa50040
}

.sidebet-minimized-tab:active {
    transform: scale(.95);
    left: 2px
}

.sidebet-emoji {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    padding-left: 2px;
    transform: translate(-50%);
    z-index: -10
}

:root {
    --color-background: #15161d;
    --color-foreground: #f8f8fc;
    --color-card: #1e202a;
    --color-card-foreground: #ffffff;
    --color-popover: #1e202a;
    --color-popover-foreground: #ffffff;
    --color-border: #383943;
    --color-input: #383943;
    --color-ring: #ffc700;
    --color-muted: #272935;
    --color-muted-foreground: #a1a5ba;
    --color-primary: #ffc700;
    --color-primary-foreground: #15161d;
    --color-primary-hover: #e6b400;
    --color-primary-active: #cca000;
    --color-secondary: #ef7104;
    --color-secondary-foreground: #15161d;
    --color-secondary-hover: #f29138;
    --color-secondary-active: #e05600;
    --color-accent: #ffc700;
    --color-accent-foreground: #15161d;
    --color-destructive: #ff3b5d;
    --color-destructive-foreground: #ffffff;
    --color-success: #19b55a;
    --color-success-foreground: #15161d;
    --color-warning: #ffb52e;
    --color-warning-foreground: #15161d;
    --color-candlestick-up: #00c950;
    --color-candlestick-down: #fb2c36;
    --color-hover: #272935;
    --yellow500: #FFC700;
    --green500: #22C55E;
    --green700: #15803D;
    --green900: #14532d
}

body {
    margin: 0;
    background-color: var(--color-background)
}

.level-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 16px 8px
}

.level-badge-xs {
    height: 16px
}

.level-badge-small {
    height: 20px
}

.level-badge-medium {
    height: 24px
}

.level-badge-large {
    height: 34px
}

.level-badge-xlarge {
    height: 41px
}

.level-badge-text {
    color: var(--color-card-foreground);
    font-weight: "bold";
    white-space: "nowrap";
    margin-left: 4px
}

.level-badge-text-xs {
    font-size: 10px
}

.level-badge-text-small,
.level-badge-text-medium {
    font-size: 12px
}

.level-badge-text-large {
    font-size: 14px
}

.level-badge-text-xlarge {
    font-size: 16px
}

img.level-icon-xs {
    width: 14px;
    height: 14px
}

img.level-icon-small {
    width: 16px;
    height: 16px
}

img.level-icon-medium {
    width: 20px;
    height: 20px
}

img.level-icon-large {
    width: 24px;
    height: 24px
}

img.level-icon-xlarge {
    width: 48px;
    height: 48px
}

.layout-horizontal {
    position: relative;
    display: flex;
    flex-direction: row;
    height: 100%
}

.layout-vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%
}

*::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width)
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color)
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-thumb-border-radius)
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-color)
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track-color)
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color)
}

.overflow-scroll {
    overflow-x: hidden;
    overflow-y: auto
}

.overflow-auto {
    overflow: auto
}

.overflow-x-auto {
    overflow-x: auto;
    overflow-y: hidden
}

.overflow-y-auto {
    overflow-x: hidden;
    overflow-y: auto
}

.overflow-scroll-hidden {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.overflow-scroll-hidden::-webkit-scrollbar {
    display: none
}

.row,
.column {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%
}

.row {
    flex-direction: row;
    align-items: center;
    gap: 10px
}

.column {
    flex-direction: column
}

.chat-messages-area {
    height: auto;
    flex-grow: 1;
    flex-basis: 0;
    min-height: 0;
    justify-content: flex-start;
    gap: 5px
}

.chat-messages-area>* {
    margin-top: 0;
    margin-bottom: 0;
    flex-grow: 0;
    flex-shrink: 0;
    height: auto
}

.chat-input-wrapper {
    height: auto;
    flex-shrink: 0
}

.app-header {
    height: 80px;
    background-color: var(--color-black);
    justify-content: space-between
}

.sidebar-header {
    padding: 1rem .625rem;
    border-bottom: 1px solid var(--color-border)
}

.viewport-container {
    position: relative;
    height: 100vh
}

.sticky-container {
    position: -webkit-sticky;
    position: sticky;
    flex-shrink: 0;
    z-index: 2
}

.soapy-container {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden
}

.standard-chart-container {
    height: calc(100vh - 460px);
    min-height: 150px;
    width: 100%;
    position: relative;
    display: block;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden
}

.standard-chart-container.border-profit {
    border: 4px solid #22C55E !important;
    box-shadow: 0 0 10px #22c55e66, 0 0 20px #86efac33 !important
}

.standard-chart-container.border-loss {
    border: 4px solid #DC2626 !important;
    box-shadow: 0 0 10px #dc262666, 0 0 20px #f8717133 !important
}

.standard-chart-container.border-neutral {
    border: 4px solid var(--color-border) !important;
    box-shadow: none !important
}

@media (max-width: 768px) {
    .standard-chart-container {
        height: calc(100vh - 490px)
    }
    .standard-chart-container.border-profit,
    .standard-chart-container.border-loss,
    .standard-chart-container.border-neutral {
        border-width: 2px !important
    }
}

.standard-chart-container canvas {
    display: block;
    image-rendering: pixelated;
    image-rendering: crisp-edges
}

.sidebar-wrapper-fixed-width {
    background-color: var(--color-background);
    width: 320px;
    flex-shrink: 0;
    height: 100%;
    border-right: 1px solid var(--color-border);
    position: relative;
    z-index: 0
}

@media (max-width: 768px) {
    .sidebar-container {
        position: absolute !important;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 10
    }
}

.app-header {
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background);
    height: 80px
}

.header-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch
}

.desktop-header {
    display: flex
}

.mobile-header {
    display: none
}

.header-section-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 100%;
    flex-shrink: 0;
    width: 304px
}

.header-section-main {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
    flex: 1
}

.header-section-main-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex: 1
}

.header-section-main-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 15px
}

.header-section-main-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    flex: 1
}

.header-row {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header-section {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%
}

.header-text-link {
    color: #fff;
    cursor: pointer;
    font-size: 14px
}

.header-text-link:hover {
    text-decoration: underline
}

.header-section button,
.header-section .header-text-link,
.header-row-top button,
.header-row-bottom button {
    display: flex;
    align-items: center
}

.header-section-left>picture {
    height: 100%;
    display: flex;
    align-items: center
}

.mobile-header {
    justify-content: space-between;
    align-items: center
}

.mobile-header-section {
    flex: 1;
    display: flex;
    align-items: center
}

.mobile-header-left {
    justify-content: flex-start;
    flex-shrink: 0;
    min-width: 71px
}

.mobile-header-center {
    justify-content: center
}

.mobile-header-right {
    justify-content: flex-end;
    flex-shrink: 0;
    min-width: 48px
}

.mobile-logo {
    width: 63px;
    height: 49px
}

.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    transition: all .3s ease
}

.hamburger-menu:hover {
    opacity: .7
}

@media (max-width: 1350px) {
    .desktop-header {
        display: none
    }
    .mobile-header {
        display: flex
    }
}

@media (max-width: 768px) {
    .app-header {
        padding: 0 10px;
        height: 60px
    }
}

@media (max-width: 480px) {
    .app-header {
        padding: 0 8px;
        height: 56px
    }
    .mobile-logo {
        width: 63px;
        height: 49px
    }
    .hamburger-menu {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px
    }
    .hamburger-line {
        width: 18px;
        min-width: 18px;
        min-height: 2px;
        flex-shrink: 0
    }
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000b3;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 3;
    animation: fadeIn .2s ease-out
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.mobile-nav-menu {
    position: fixed;
    z-index: 1000;
    background-color: var(--color-background);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: none
}

@media (max-width: 460px) {
    .mobile-nav-menu {
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        width: 100vw !important;
        min-width: 100vw;
        max-width: 100vw;
        border-top: 1px solid var(--color-border);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(0);
        height: auto;
        box-shadow: 0 -4px 20px #0000004d
    }
}

@media (min-width: 461px) {
    .mobile-nav-menu {
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 400px;
        border-left: 1px solid var(--color-border);
        box-shadow: -8px 0 24px #000c;
        transform: translate(0);
        transition: transform .3s ease-out
    }
}

.mobile-nav-menu .draggable-area {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none
}

.mobile-nav-menu .draggable-area:active {
    cursor: grabbing
}

@media (min-width: 461px) {
    .mobile-nav-menu .draggable-area,
    .mobile-nav-menu .draggable-area:active {
        cursor: default
    }
}

.mobile-nav-menu .drag-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
    transition: all .2s ease;
    will-change: background-color
}

.mobile-nav-menu .drag-handle:hover {
    opacity: .8
}

.mobile-nav-menu .drag-handle:active {
    transform: scaleY(1.2)
}

.mobile-nav-menu .drag-handle-bar {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    transition: background-color .2s ease
}

@media (min-width: 461px) {
    .mobile-nav-menu .drag-handle {
        display: none
    }
}

.mobile-nav-menu.expanded,
.mobile-nav-menu[style*="98vh"] {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.mobile-nav-menu[style*="40vh"],
.mobile-nav-menu[style*="30vh"] {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important
}

@media (max-width: 480px) {
    .mobile-nav-menu[style*="40vh"] .mobile-nav-items .mobile-nav-item:nth-child(n+4),
    .mobile-nav-menu[style*="30vh"] .mobile-nav-items .mobile-nav-item:nth-child(n+4) {
        display: none
    }
    .mobile-nav-menu[style*="40vh"] .mobile-nav-social,
    .mobile-nav-menu[style*="30vh"] .mobile-nav-social {
        display: none
    }
}

@media (max-width: 480px) {
    .mobile-nav-menu[style*="98vh"] .mobile-nav-items {
        margin: 0 8px 20px
    }
}

@media (max-width: 460px) {
    .mobile-nav-menu .mobile-nav-items {
        padding: 0;
        margin: 16px
    }
    .mobile-nav-menu .drag-handle {
        padding: 16px 0 12px
    }
    .mobile-nav-menu .mobile-nav-item {
        min-height: 44px
    }
}

.mobile-nav-menu {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch
}

.mobile-nav-menu .mobile-nav-items {
    will-change: transform
}

@media (max-width: 480px) and (min-height: 800px) {
    .mobile-nav-menu[style*="98vh"] .mobile-nav-item {
        margin-bottom: 16px
    }
}

.mobile-nav-username-section {
    margin-bottom: 12px
}

.mobile-nav-username-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    background-color: transparent;
    color: var(--color-foreground);
    font-size: 18px;
    font-weight: 600;
    text-transform: none;
    min-height: auto;
    border-radius: 4px;
    transition: all .2s ease
}

.mobile-nav-username-btn:hover {
    background-color: var(--color-muted);
    padding: 8px 12px;
    margin: -8px -12px
}

.mobile-nav-level-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 12px
}

.mobile-nav-level-xp-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.mobile-nav-level-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin: 0
}

.mobile-nav-xp-text {
    font-size: 14px;
    color: var(--color-muted-foreground);
    font-weight: 500;
    line-height: 1;
    margin: 0
}

.mobile-nav-close {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--color-muted-foreground);
    z-index: 1;
    transition: all .2s ease
}

.mobile-nav-close:hover {
    color: var(--color-foreground);
    background-color: var(--color-muted)
}

.mobile-nav-header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    opacity: .3
}

.mobile-nav-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-foreground);
    font-family: DynaPuff, sans-serif
}

.mobile-nav-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted-foreground);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all .2s ease;
    width: 36px;
    height: 36px
}

.mobile-nav-close:hover {
    color: var(--color-foreground);
    background-color: var(--color-hover);
    transform: scale(1.1)
}

.mobile-nav-user-info {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-card);
    position: relative;
    display: flex;
    flex-direction: column
}

.mobile-nav-user-info:before {
    content: "";
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-primary) 50%, transparent 100%);
    opacity: .2
}

.mobile-nav-user-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px
}

.mobile-nav-level-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

.mobile-nav-level-badge .level-icon {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3))
}

.mobile-nav-progress-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0
}

.mobile-nav-level-text {
    background: linear-gradient(to right, #51a2ff, #fbedb9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin: 0
}

.mobile-nav-xp-text {
    font-size: 11px;
    color: var(--color-muted-foreground);
    font-weight: 500;
    line-height: 1;
    margin: 0;
    padding-right: 4px
}

.mobile-nav-progress-container {
    width: 100%;
    height: 8px;
    background-color: var(--color-muted);
    border-radius: 4px;
    overflow: hidden;
    position: relative
}

.mobile-nav-balance {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background)
}

.mobile-nav-balance-label {
    color: var(--color-muted-foreground);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.mobile-nav-balance-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background-color: var(--color-card);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: all .2s ease
}

.mobile-nav-balance-amount:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px #0000001a
}

.mobile-nav-actions {
    padding: 16px;
    display: flex;
    gap: 16px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background)
}

.mobile-nav-action-btn {
    flex: 1;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 8px;
    transition: all .2s ease
}

.mobile-nav-withdraw {
    background-color: var(--color-card);
    color: var(--color-foreground);
    border: 1px solid var(--color-border)
}

.mobile-nav-withdraw:hover {
    background-color: var(--color-muted);
    transform: translateY(-1px)
}

.mobile-nav-deposit {
    background-color: #22c55e;
    color: #fff;
    border: 1px solid #22c55e
}

.mobile-nav-deposit:hover {
    background-color: #16a34a;
    transform: translateY(-1px)
}

.mobile-nav-game-mode {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-background)
}

.mobile-nav-game-mode-btn {
    width: 100%;
    padding: 12px 16px;
    background-color: transparent;
    border: 2px solid #f59e0b;
    color: #f59e0b;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 8px;
    transition: all .2s ease
}

.mobile-nav-game-mode-btn:hover {
    background-color: #f59e0b1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px #f59e0b33
}

.mobile-nav-items {
    padding: 0;
    background-color: var(--color-background);
    flex: 1
}

.mobile-nav-item {
    width: 100%;
    padding: 12px 16px;
    justify-content: flex-start;
    color: var(--color-muted-foreground);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-radius: 0;
    transition: all .2s ease;
    border-bottom: 1px solid transparent
}

.mobile-nav-item:hover {
    background-color: var(--color-muted);
    color: var(--color-foreground);
    border-bottom-color: var(--color-primary)
}

.mobile-nav-item.mobile-nav-logout {
    color: #ef4444;
    margin-top: 8px;
    border-top: 1px solid var(--color-border);
    padding-top: 16px
}

.mobile-nav-item.mobile-nav-logout:hover {
    background-color: #ef44441a;
    color: #dc2626
}

.mobile-nav-social {
    padding: 16px;
    display: flex;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--color-card) 0%, var(--color-background) 100%);
    border-top: 1px solid var(--color-border);
    margin-top: auto
}

.mobile-nav-social-link {
    width: 48px;
    height: 48px;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    color: var(--color-foreground);
    border-radius: 50%;
    transition: all .2s ease
}

.mobile-nav-social-link:hover {
    background-color: var(--color-muted);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0003
}

.mobile-nav-social-icon {
    width: 20px;
    height: 20px
}

@media (max-width: 600px) {
    .header-section-main {
        flex-shrink: 1;
        min-width: 0
    }
    .header-section-left {
        flex-shrink: 0
    }
}

.dw-action-button {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 12px;
    background-color: var(--color-primary);
    color: var(--color-card-foreground);
    cursor: pointer;
    transition: background-color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center
}

.dw-action-button:hover:not(:disabled) {
    background-color: var(--color-primary-active)
}

.dw-action-button:disabled {
    background-color: #666;
    cursor: not-allowed;
    opacity: .7
}

.dw-amount-input-section {
    margin-bottom: 16px
}

.dw-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.dw-amount-label {
    margin: 0;
    font-size: 14px;
    color: #aaa
}

.dw-balance-info {
    text-align: right
}

.dw-balance-currency {
    margin: 0 0 2px;
    font-size: 12px;
    color: #aaa
}

.dw-balance-amount {
    margin: 0;
    font-size: 14px;
    color: #aaa
}

.dw-amount-input-container {
    display: flex;
    align-items: center;
    background-color: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 6px 8px;
    transition: border-color .2s ease;
    gap: 8px
}

.dw-amount-input-container:focus-within {
    border-color: var(--color-primary)
}

.dw-amount-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--color-card-foreground);
    font-size: 16px;
    font-weight: 700;
    outline: none;
    min-width: 0
}

.dw-amount-input::placeholder {
    color: var(--color-muted-foreground)
}

.dw-input-usd-value-right {
    font-size: 12px;
    color: var(--color-muted-foreground);
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 4px
}

.dw-amount-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0
}

.dw-amount-control-button {
    background-color: var(--color-card);
    border: none;
    border-radius: 4px;
    color: var(--color-card-foreground);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    transition: background-color .2s ease;
    white-space: nowrap
}

.dw-amount-control-button:hover {
    background-color: #444
}

.dw-increment-button {
    background-color: #333
}

.dw-increment-button:hover {
    background-color: #444
}

.dw-amount-input-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.dw-practice-token-notice {
    margin: 16px 0 24px;
    text-align: center;
    padding: 10px;
    background-color: var(--color-card);
    border-radius: 6px
}

.dw-practice-token-notice p {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 700;
    margin: 0
}

.dw-regular-content {
    margin-bottom: 16px
}

.dw-fee-notice {
    margin: 0 0 16px;
    font-size: 12px;
    color: var(--color-muted-foreground);
    text-align: center
}

.dw-promo-code-trigger {
    margin: 8px 0;
    padding: 0;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    color: var(--color-muted-foreground);
    transition: color .2s ease
}

.dw-promo-code-trigger:hover {
    color: #fff
}

.dw-promo-code-link {
    color: var(--color-primary);
    font-weight: 700
}

.dw-promo-code-section {
    margin: 8px 0
}

.dw-promo-code-input-container {
    display: flex;
    border-radius: 6px;
    border: 1px solid var(--color-primary);
    overflow: hidden;
    background-color: var(--color-card);
    margin-bottom: 8px
}

.dw-promo-code-input {
    flex: 1;
    border: none;
    padding: 10px 12px;
    background-color: transparent;
    color: var(--color-card-foreground);
    font-size: 14px;
    outline: none;
    min-width: 0
}

.dw-promo-code-input::placeholder {
    color: var(--color-muted-foreground)
}

.dw-promo-code-input:disabled {
    opacity: .6
}

.dw-promo-code-apply-button {
    background-color: var(--color-primary);
    border: none;
    color: #000;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .2s ease
}

.dw-promo-code-apply-button:hover:not(:disabled) {
    background-color: var(--color-primary-active)
}

.dw-promo-code-apply-button:disabled {
    opacity: .6;
    cursor: not-allowed
}

.dw-promo-code-status {
    margin: 0 0 8px;
    font-size: 12px;
    text-align: center
}

.dw-promo-code-status.success {
    color: var(--color-success)
}

.dw-promo-code-status.error {
    color: var(--color-destructive)
}

.dw-promo-code-follow-text {
    margin: 8px 0;
    font-size: 12px;
    color: var(--color-muted-foreground);
    text-align: center
}

.dw-token-icon-image {
    width: 90%;
    height: 90%;
    object-fit: contain
}

.dw-token-ticker-text {
    font-size: 10px;
    color: var(--color-card-foreground)
}

.dw-social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px
}

.dw-discord-container {
    position: relative
}

.dw-discord-pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(114, 137, 218, .6);
    animation: pulse-discord 2s infinite;
    top: -4px;
    left: -4px
}

.dw-discord-icon {
    width: 16px;
    height: 16px;
    cursor: pointer
}

.dw-social-icon {
    font-size: 16px;
    color: var(--color-muted-foreground);
    cursor: pointer
}

.dw-token-button-container {
    position: relative;
    cursor: pointer
}

.dw-token-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-card-foreground);
    transition: all .2s ease
}

.dw-token-sol-image {
    width: 70%;
    height: 70%;
    object-fit: contain
}

.dw-token-free-text {
    color: var(--color-primary);
    font-size: 10px
}

.dw-token-ticker-small {
    font-size: 8px
}

.dw-token-selection-indicator {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translate(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%
}

@keyframes pulse-discord {
    0% {
        box-shadow: 0 0 #7289dab3
    }
    70% {
        box-shadow: 0 0 0 4px #7289da00
    }
    to {
        box-shadow: 0 0 #7289da00
    }
}

@media (max-width: 768px) {
    .dw-button {
        padding: 6px;
        font-size: .75rem;
        width: 66px;
        height: 28px
    }
    .dw-dropdown {
        width: 95vw;
        max-width: 300px
    }
    .dw-dropdown.deposit,
    .dw-dropdown.withdraw {
        position: fixed;
        top: 60px;
        left: 50%;
        transform: translate(-50%);
        z-index: 1000;
        margin: 0;
        width: 90vw;
        max-width: 400px;
        max-height: calc(90vh - 60px);
        overflow-y: auto
    }
    .dw-dropdown.deposit:before,
    .dw-dropdown.withdraw:before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #00000080;
        z-index: -1
    }
}

@media (max-width: 480px) {
    .dw-dropdown.deposit,
    .dw-dropdown.withdraw {
        top: 56px;
        max-height: calc(90vh - 56px)
    }
}

.dw-button-container {
    position: relative
}

.dw-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 300px;
    background-color: var(--color-card);
    border-radius: 8px;
    box-shadow: 0 4px 20px #00000080;
    border: 1px solid #2A2A2A;
    z-index: 100;
    color: var(--color-card-foreground);
    overflow: hidden
}

.dw-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #2A2A2A
}

.dw-dropdown-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary)
}

.dw-dropdown-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-muted-foreground);
    font-size: 16px;
    padding: 4px;
    border-radius: 4px;
    transition: color .2s ease
}

.dw-dropdown-close:hover {
    color: #fff
}

.dw-dropdown-content {
    padding: 12px 16px
}

.dw-tokens-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.dw-tokens-header p {
    margin: 0;
    font-size: 14px;
    color: var(--color-muted-foreground)
}

.dw-token-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px
}

@keyframes modalSlideIn {
    0% {
        opacity: 0;
        transform: scale(.9) translateY(-20px)
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate(100%);
        opacity: 0
    }
    to {
        transform: translate(0);
        opacity: 1
    }
}

.withdraw-button {
    position: relative;
    background-color: var(--color-muted);
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-size: .875rem;
    color: #9f9fa9;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 88px;
    height: 32px;
    gap: 8px;
    flex-shrink: 0
}

.withdraw-button:hover {
    background-color: var(--color-hover)
}

.withdraw-button span {
    white-space: nowrap
}

@media (max-width: 768px) {
    .withdraw-button {
        padding: 6px;
        font-size: .75rem;
        height: 28px
    }
}

.withdraw-limit-notice {
    margin: 0 0 16px;
    text-align: center
}

.withdraw-limit-notice p {
    margin: 0;
    font-size: 12px;
    color: var(--color-muted-foreground);
    font-style: italic;
    line-height: 1.4
}

.dw-dropdown.withdraw {
    --color-primary: #FF4D4D;
    --color-primary-active: #E63946
}

.trade-controls {
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 16px 0;
    gap: 16px;
    font-family: DynaPuff, sans-serif;
    color: #aaa;
    max-width: 400px
}

.trade-controls.chat-open {
    max-width: 350px
}

.trade-controls-container {
    display: flex;
    flex-direction: column;
    background: transparent;
    gap: 8px;
    font-family: DynaPuff, sans-serif;
    color: #fff;
    width: 100%;
    max-width: none
}

.trade-controls-container.chat-open {
    margin-left: -150px;
    margin-right: -150px
}

.coin-selector-section {
    display: none
}

.coin-dropdown-container {
    position: relative;
    display: inline-block;
    width: auto
}

.low-free-warning-container {
    position: absolute;
    right: -8px;
    top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000
}

.low-free-warning-icon {
    color: #fbb90f
}

.ms-16 {
    font-size: 16px;
    line-height: 16px
}

.ms-fill {
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24
}

.ms-rounded {
    font-family: Material Symbols Rounded
}

.coin-dropdown-tooltip.free-balance-tooltip {
    color: #ffd54f;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.4
}

.coin-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-foreground);
    font-family: DynaPuff, sans-serif;
    font-size: 12px;
    cursor: pointer;
    transition: all .2s ease;
    min-height: 28px;
    min-width: 70px;
    width: auto
}

.coin-dropdown-trigger:hover:not(.disabled) {
    background: var(--color-hover);
    border-color: var(--color-border)
}

.coin-dropdown-trigger.disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--color-muted);
    border-color: var(--color-border)
}

.coin-dropdown-trigger.compact {
    padding: 4px 6px;
    font-size: 11px;
    min-height: 28px;
    min-width: 36px;
    justify-content: center
}

.coin-info {
    display: flex;
    align-items: center;
    gap: 6px
}

.coin-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%
}

.coin-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.coin-balance {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 14px
}

.coin-ticker {
    color: var(--color-foreground);
    font-weight: 500;
    font-size: 14px
}

.dropdown-arrow {
    color: var(--color-muted-foreground);
    transition: color .2s ease
}

.coin-dropdown-trigger:hover:not(.disabled) .dropdown-arrow {
    color: var(--color-foreground)
}

.coin-dropdown-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%);
    background-color: var(--color-card);
    color: var(--color-destructive);
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    border: 1px solid var(--color-border);
    margin-bottom: 6px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 6px 18px #00000080;
    max-width: 300px;
    white-space: normal
}

.trade-controls-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 8px;
    width: 100%;
    min-height: auto;
    overflow: visible
}

.controls-row {
    display: flex;
    gap: 16px;
    width: 100%
}

.auto-rounds-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 16px
}

.buttons-container {
    display: flex;
    align-items: center;
    gap: 16px;
    width: -webkit-fit-content;
    width: fit-content
}

.scroll-down-icon {
    width: 20px;
    height: 20px;
    animation: scroll-bounce 2s ease-in-out infinite
}

.mobile-controls-top-row,
.mobile-auto-buttons,
.mobile-buy-controls {
    display: none
}

.auto-rounds-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative
}

.trade-controls-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 8px;
    width: 100%;
    min-height: auto
}

.buttons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    position: relative
}

.scroll-icon-row {
    display: flex;
    justify-content: center;
    width: 100%
}

@keyframes scroll-bounce {
    0%,
    to {
        transform: translateY(0)
    }
    50% {
        transform: translateY(4px)
    }
}

.buy-section,
.sell-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    min-height: 28px;
    position: relative
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--color-background, #1A1A1A);
    padding: 4px 8px 4px 0;
    position: relative;
    z-index: 2;
    flex-shrink: 0
}

.quick-buttons-row,
.control-buttons-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    justify-content: flex-end;
    flex-shrink: 1;
    min-width: 0
}

.control-buttons-row {
    padding-left: 8px;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.control-buttons-row::-webkit-scrollbar {
    display: none
}

.control-btn,
.percentage-btn,
.price-target-btn,
.auto-toggle-btn {
    background: var(--color-muted);
    color: #aaa;
    padding: 8px;
    font-size: .875rem;
    font-family: DynaPuff, sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s ease;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    min-height: 28px
}

.control-buttons-container .control-btn {
    padding: 8px;
    font-size: .875rem;
    min-height: 28px
}

.control-btn:hover:not(.disabled),
.percentage-btn:hover:not(:disabled),
.price-target-btn:hover:not(.disabled),
.auto-toggle-btn:hover:not(.disabled) {
    background: #ffffff1a;
    color: #fff;
    transform: translateY(-1px)
}

.control-btn.active,
.percentage-btn.active,
.price-target-btn.active {
    background: #fff3;
    color: var(--color-foreground)
}

.control-btn.uppercase {
    text-transform: uppercase
}

.control-btn.disabled,
.percentage-btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.auto-toggle-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #b794f6;
    padding: 8px
}

.auto-toggle-btn.active {
    background: #9d4edd;
    color: #fff
}

.auto-icon {
    font-size: .875rem
}

.amount-input-section {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.trade-controls-amount-input-container {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color .2s ease, width .3s ease;
    height: 60px;
    padding: 0 16px
}

.trade-controls-amount-input-container:focus-within {
    border-color: #333
}

.trade-controls-amount-input-container.autobuy-mode {
    border-color: #333;
    background: var(--color-background)
}

.buy-amount-input,
.sell-amount-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    font-family: DynaPuff, sans-serif;
    text-align: left;
    outline: none;
    padding: 0;
    font-weight: 500;
    line-height: 1.2
}

.buy-amount-input.autobuy-input {
    color: #fff
}

.clear-button {
    border: 1px solid transparent;
    color: #aaa;
    font-size: 12px;
    font-family: DynaPuff, sans-serif;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
    -webkit-user-select: none;
    user-select: none;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center
}

.unit-indicator {
    font-size: 12px;
    color: #fff;
    margin-right: 6px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0
}

.input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto
}

.control-buttons-container {
    display: flex;
    gap: 4px;
    align-items: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
    transition: none;
    z-index: auto;
    white-space: nowrap
}

.sell-controls-layout {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0 16px;
    height: 60px;
    transition: border-color .2s ease
}

.sell-controls-layout:focus-within {
    border-color: #333
}

.sell-controls-layout .auto-toggle-btn {
    flex-shrink: 0
}

.auto-buttons-container {
    display: flex;
    gap: 4px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    white-space: nowrap;
    align-items: center;
    margin-right: -4px
}

.sell-control-buttons-container {
    display: flex;
    gap: 4px;
    background: transparent;
    transition: none;
    white-space: nowrap;
    align-items: center
}

.sell-input-container {
    flex: 1;
    min-width: 0
}

.sell-input-container .trade-controls-amount-input-container {
    border: none;
    background: transparent;
    padding: 0
}

@media (max-width: 1350px) {
    .sell-controls-layout {
        flex-direction: row-reverse;
        height: 44px;
        padding: 8px
    }
}

.sell-control-buttons-container .control-btn,
.sell-control-buttons-container .percentage-btn,
.sell-control-buttons-container .price-target-btn {
    padding: 8px;
    font-size: .875rem;
    min-height: 28px
}

.lightning-active {
    background: linear-gradient(180deg, #fb2c36, #ff6467) !important;
    color: #fff !important;
    border-color: #fb2c36 !important
}

.lightning-active:hover:not(.disabled) {
    background: linear-gradient(180deg, #e9252f, #f0565a) !important;
    color: #fff !important;
    transform: translateY(-1px)
}

.lightning-active:disabled {
    background: #fb2c364d !important;
    color: #ffffff80 !important;
    border-color: #fb2c364d !important;
    cursor: not-allowed !important;
    transform: none !important
}

.position-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    padding: 16px 0;
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
    margin: 8px 0
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0
}

.stat-label {
    color: #777;
    font-size: 13px
}

.stat-value {
    color: #fff;
    font-weight: 500
}

.pnl-row {
    font-weight: 600;
    font-size: 15px
}

.pnl-row.positive {
    color: #00c137
}

.pnl-row.negative {
    color: #ff4d4d
}

.pnl-row.neutral {
    color: #777
}

.pnl-amount,
.pnl-percent {
    font-size: 14px
}

.max-bet-warning {
    font-size: 13px;
    color: #ffcc80;
    text-align: center;
    padding: 8px 12px;
    background: #ff98001a;
    border-radius: 6px;
    margin: 8px 0
}

.max-bet-warning-inline {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: #fff;
    padding: 6px 10px;
    white-space: nowrap
}

@media (max-width: 560px) {
    .max-bet-warning-inline {
        top: calc(100% + 4px)
    }
}

.max-bet-warning-inline.max-reached {
    color: #00c137
}

.max-bet-warning-inline.max-win-hit {
    color: #eab308;
    background: #713f12;
    border-radius: 4px;
    padding: 4px
}

.max-bet-warning-desktop {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 12px;
    color: #fff;
    white-space: nowrap
}

.max-bet-warning-desktop.max-reached {
    color: #00c137
}

.max-bet-warning-desktop.max-win-hit {
    color: #eab308;
    background: #713f12;
    border-radius: 4px;
    padding: 4px
}

.max-win-hit-indicator {
    font-size: 12px;
    color: #eab308;
    background: #713f12;
    border: 1px solid #EAB308;
    border-radius: 4px;
    padding: 6px 10px;
    white-space: nowrap;
    font-weight: 600;
    margin-left: 12px
}

.max-bet-warning-inline.mobile-only {
    display: none
}

.button-section {
    display: flex;
    flex: 1
}

.button-section.buy-button-section {
    justify-content: flex-end
}

.button-section.sell-button-section {
    justify-content: flex-start
}

.button-section.center-button-section {
    justify-content: center
}

@media (min-width: 1351px) {
    .button-section {
        flex: none
    }
    .button-section.buy-button-section,
    .button-section.sell-button-section {
        justify-content: center
    }
    .sell-input-container .trade-controls-amount-input-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px
    }
    .sell-input-container .trade-controls-amount-input-container .unit-indicator.percent-input {
        order: 2;
        font-size: 16px
    }
    .sell-input-container .trade-controls-amount-input-container span {
        order: 3
    }
    .sell-input-container .trade-controls-amount-input-container .sell-slider {
        order: 1
    }
}

@media (max-width: 430px) {
    .button-section {
        flex: 1;
        min-width: 0
    }
    .button-section.buy-button-section,
    .button-section.sell-button-section {
        justify-content: center
    }
}

@media (min-width: 431px) and (max-width: 1350px) {
    .button-section {
        flex: none
    }
    .button-section.buy-button-section,
    .button-section.sell-button-section {
        justify-content: center
    }
}

.trade-button {
    padding: 12px 20px;
    font-size: 16px;
    font-family: DynaPuff, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s ease;
    transform: translateY(-2px);
    box-shadow: 0 4px #fff3;
    -webkit-user-select: none;
    user-select: none;
    min-height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.trade-button:active:not(.disabled) {
    transform: translateY(0);
    box-shadow: 0 2px #fff3
}

.trade-button:hover:not(.disabled) {
    transform: translateY(-3px);
    box-shadow: 0 5px #fff3
}

.sell-progress-bar {
    display: flex;
    gap: 2px;
    height: 8px;
    background: #333;
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0
}

.progress-segment {
    flex: 1;
    background: #555;
    transition: background-color .2s ease;
    border-radius: 1px
}

.progress-segment.filled {
    background: #ff4d4d
}

.progress-segment.pending {
    background: #fa0
}

.position-max-bet-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    font-family: DynaPuff, sans-serif;
    font-weight: 500;
    text-align: center;
    background: #ffffff0d;
    border-radius: 6px;
    margin: 4px 0;
    border: 1px solid rgba(255, 255, 255, .1)
}

.position-max-bet-row.max-reached {
    color: #ff6b6b;
    background: #ff6b6b1a;
    border-color: #ff6b6b4d
}

.autobets-controls {
    background: #9c27b00d;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px
}

.autobets-controls.enabled {
    border-color: #9c27b0;
    background: #9c27b01a
}

.autobets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.autobets-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid #9C27B0;
    color: #9c27b0;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: DynaPuff, sans-serif;
    font-size: 12px;
    transition: all .2s ease
}

.autobets-toggle:hover {
    background: #9c27b01a
}

.autobets-toggle.active {
    background: #9c27b0;
    color: #fff
}

.toggle-indicator {
    font-weight: 600;
    font-size: 10px
}

.toggle-indicator.on {
    color: #00c137
}

.toggle-indicator.off {
    color: #ff4d4d
}

.continue-btn {
    background: #00c137;
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: DynaPuff, sans-serif;
    font-size: 11px;
    cursor: pointer;
    transition: all .2s ease
}

.continue-btn:hover {
    background: #00d33c
}

.rounds-counter {
    font-size: 12px;
    color: #ce93d8;
    font-weight: 500
}

.autobets-settings {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.autobets-setting {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.autobets-setting label {
    font-size: 12px;
    color: #ce93d8;
    min-width: 100px
}

.autobets-input-group {
    display: flex;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid #9C27B0;
    padding-bottom: 2px
}

.autobets-input {
    background: transparent;
    border: none;
    color: #ce93d8;
    font-size: 12px;
    font-family: DynaPuff, sans-serif;
    text-align: right;
    outline: none;
    width: 60px
}

.autobets-input.rounds-input {
    width: 40px;
    border-bottom: 1px solid #9C27B0;
    padding-bottom: 2px
}

.currency-label,
.multiplier-label {
    font-size: 11px;
    color: #ce93d8
}

.price-target-buttons {
    display: flex;
    gap: 4px;
    margin-top: 4px
}

.price-target-btn {
    flex: 1;
    padding: 4px 6px;
    background: #9d4edd1a;
    border: 1px solid rgba(157, 78, 221, .3);
    color: #b794f6;
    font-size: 10px;
    border-radius: 3px
}

.price-target-btn.active {
    background: #9d4edd;
    color: #fff
}

.autobets-controls[data-fixed=true] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 80%;
    max-width: 500px;
    margin: 0 auto 16px;
    border-radius: 12px;
    box-shadow: 0 0 10px #9d4edd4d;
    background: #1a1a1a
}

.autobets-controls[data-chat-open=true] {
    margin-left: 150px;
    margin-right: -150px
}

.warning-area {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ff98001a;
    border: 1px solid rgba(255, 152, 0, .3);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px
}

.warning-icon {
    font-size: 20px;
    flex-shrink: 0
}

.warning-content {
    flex: 1
}

.warning-title {
    font-size: 13px;
    font-weight: 600;
    color: #ff9800;
    margin-bottom: 4px
}

.warning-message {
    font-size: 11px;
    color: #ffcc80;
    line-height: 1.3
}

.free-token-warning {
    background: #fbb90f1a;
    border-color: #fbb90f4d
}

.free-token-warning .warning-title {
    color: #fbb90f
}

.free-token-warning .warning-message {
    color: #ffd54f
}

.tournament-warning {
    background: #ff57221a;
    border-color: #ff57224d
}

.level-warning {
    background: #ffc1071a;
    border-color: #ffc1074d
}

.acknowledge-btn {
    background: #ff9800;
    border: none;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: DynaPuff, sans-serif;
    font-size: 10px;
    cursor: pointer;
    margin-top: 8px
}

.refill-progress,
.level-progress {
    margin-top: 8px
}

.progress-label {
    font-size: 10px;
    color: #ffcc80;
    margin-bottom: 4px
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: #ffffff1a;
    border-radius: 2px;
    overflow: hidden
}

.progress-fill {
    height: 100%;
    background: #fbb90f;
    transition: width .3s ease
}

.admin-controls {
    border: 1px solid #FF5722;
    border-radius: 8px;
    padding: 12px;
    background: #ff57220d;
    margin-top: 16px
}

.admin-controls-header {
    text-align: center;
    color: #ff5722;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 12px
}

.admin-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px
}

.admin-btn {
    flex: 1;
    min-width: 80px;
    background: transparent;
    border: 1px solid #FF5722;
    color: #ff5722;
    padding: 6px 8px;
    font-size: 10px;
    font-family: DynaPuff, sans-serif;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s ease
}

.admin-btn:hover {
    background: #ff57221a
}

.admin-btn.start {
    border-color: #00c137;
    color: #00c137
}

.admin-btn.start:hover {
    background: #00c1371a
}

.admin-btn.stop,
.admin-btn.reset {
    border-color: #ff4d4d;
    color: #ff4d4d
}

.admin-btn.stop:hover,
.admin-btn.reset:hover {
    background: #ff4d4d1a
}

.admin-btn.pause,
.admin-btn.resume {
    border-color: #ff9800;
    color: #ff9800
}

.admin-btn.pause:hover,
.admin-btn.resume:hover {
    background: #ff98001a
}

.admin-info {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #ff8a65
}

.sell-slider {
    flex: 1;
    min-width: 50px;
    height: 6px;
    background: #ef444433;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    accent-color: #EF4444
}

.sell-slider::-webkit-slider-track {
    height: 6px;
    background: #ef444433;
    border-radius: 8px
}

.sell-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    border-radius: 50%;
    cursor: pointer
}

.sell-slider::-moz-range-track {
    height: 6px;
    background: #ef444433;
    border-radius: 8px;
    border: none
}

.sell-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    border: none
}

.sell-slider:disabled {
    opacity: .5;
    cursor: not-allowed
}

.amount-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-family: DynaPuff, sans-serif;
    outline: none;
    width: 100%
}

.amount-input::placeholder {
    color: #555
}

@media (max-width: 1350px) {
    .auto-rounds-row {
        position: static;
        order: -100;
        justify-content: center;
        margin-bottom: 16px
    }
    .mobile-controls-top-row {
        order: -99
    }
    .trade-controls-container {
        font-size: 14px;
        gap: 4px;
        max-width: 100vw;
        overflow-x: hidden;
        height: auto;
        display: flex;
        flex-direction: column
    }
    .trade-controls-container.chat-open {
        margin-left: 0;
        margin-right: 0
    }
    .trade-controls-main {
        gap: 12px;
        padding: 4px 0;
        min-height: 200px
    }
    .controls-row {
        display: flex;
        flex-direction: column;
        gap: 8px
    }
    .mobile-controls-top-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px
    }
    .mobile-auto-buttons {
        display: flex !important;
        gap: 4px
    }
    .mobile-buy-controls {
        display: flex !important;
        gap: 4px;
        justify-content: flex-end;
        max-width: 60%
    }
    .sell-controls-layout .auto-buttons-container,
    .trade-controls-amount-input-container .control-buttons-container {
        display: none
    }
    .sell-controls-layout {
        flex-direction: row-reverse
    }
    .sell-input-container {
        flex: 1
    }
    .sell-control-buttons-container {
        flex-shrink: 0
    }
    .buttons-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px
    }
    .trade-controls-amount-input-container {
        height: 44px;
        padding: 8px
    }
    .buy-section .input-actions {
        gap: 4px
    }
    .buy-amount-input,
    .sell-amount-input {
        font-size: 12px
    }
    .coin-dropdown-trigger {
        padding: 6px;
        font-size: 11px;
        min-height: 24px;
        min-width: 60px
    }
    .coin-dropdown-trigger.compact {
        padding: 3px 4px;
        font-size: 10px;
        min-height: 24px;
        min-width: 32px
    }
    .coin-balance,
    .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-colorPrimary.MuiInputBase-formControl.MuiInputBase-sizeSmall.css-2vleek-MuiInputBase-root-MuiOutlinedInput-root,
    .unit-indicator.percent-input {
        font-size: 12px
    }
    .sell-progress-bar {
        height: 3px
    }
    .warning-area,
    .autobets-controls {
        padding: 8px
    }
    .control-btn,
    .percentage-btn,
    .price-target-btn,
    .auto-toggle-btn,
    .sell-control-buttons-container .control-btn,
    .sell-control-buttons-container .percentage-btn {
        padding: 6px;
        font-size: .75rem;
        min-height: 24px
    }
    .buttons-row .MuiButton-root {
        font-size: .75rem;
        padding: 6px 12px
    }
    .max-bet-warning-inline {
        font-size: 10px;
        padding: 4px 6px
    }
    .max-bet-warning-inline.max-reached,
    .max-bet-warning-inline.max-win-hit,
    .max-bet-warning-desktop {
        font-size: 10px
    }
    .max-win-hit-indicator:not(.mobile-only) {
        font-size: 10px
    }
    .max-win-hit-indicator.mobile-only {
        font-size: 10px
    }
    .max-bet-warning-inline.mobile-only {
        font-size: 10px;
        padding: 4px 6px
    }
    .max-bet-warning-inline.mobile-only.max-reached,
    .max-bet-warning-inline.mobile-only.max-win-hit {
        font-size: 10px
    }
    .buy-section,
    .sell-section {
        gap: 8px
    }
}

@media (min-width: 1350px) and (max-width: 1440px) {
    .control-btn,
    .percentage-btn,
    .price-target-btn,
    .auto-toggle-btn {
        padding: 6px;
        font-size: .8rem;
        min-height: 26px
    }
    .coin-dropdown-trigger {
        padding: 6px;
        font-size: 11px;
        min-height: 26px;
        min-width: 65px
    }
    .coin-dropdown-trigger.compact {
        padding: 4px 5px;
        font-size: 10px;
        min-height: 26px;
        min-width: 34px
    }
    .coin-balance {
        font-size: 13px
    }
    .auto-toggle-btn {
        padding: 6px;
        gap: 3px
    }
    .auto-icon {
        font-size: .8rem
    }
    .percentage-btn,
    .control-buttons-container .control-btn,
    .sell-control-buttons-container .control-btn,
    .sell-control-buttons-container .percentage-btn {
        padding: 6px;
        font-size: .8rem;
        min-height: 26px
    }
}

@media (min-width: 1200px) {
    .trade-controls-main {
        gap: 16px;
        padding: 4px 0
    }
    .amount-input-container {
        min-height: 72px;
        padding: 20px 24px
    }
    .buy-amount-input,
    .sell-amount-input {
        font-size: 24px
    }
    .trade-button {
        min-height: 72px;
        font-size: 20px
    }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .currency-icon,
    .coin-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges
    }
}

.control-btn:focus-visible,
.percentage-btn:focus-visible,
.auto-toggle-btn:focus-visible,
.clear-button:focus-visible {
    outline: 2px solid #9C27B0;
    outline-offset: 2px
}

.amount-input:focus-visible {
    outline: none
}

.autobets-controls {
    transition: all .3s ease
}

.autobets-controls.enabled {
    animation: pulse-purple 2s infinite
}

@keyframes pulse-purple {
    0% {
        box-shadow: 0 0 #9c27b066
    }
    70% {
        box-shadow: 0 0 0 10px #9c27b000
    }
    to {
        box-shadow: 0 0 #9c27b000
    }
}

* {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease
}

.coin-dropdown-menu {
    position: absolute;
    z-index: 100;
    margin-top: 4px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 20px #00000080;
    min-width: 160px;
    max-height: 200px;
    overflow-y: auto;
    right: 0
}

.coin-dropdown-menu.left-0 {
    left: 0;
    right: auto
}

.coin-dropdown-menu.right-0 {
    right: 0;
    left: auto
}

.coin-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px;
    color: var(--color-foreground);
    border-radius: 4px
}

.coin-option:hover:not(.disabled) {
    background: var(--color-hover)
}

.coin-option.selected {
    background: var(--color-hover);
    color: var(--color-foreground)
}

.coin-option.disabled {
    opacity: .5;
    cursor: not-allowed
}

.coin-option-info {
    display: flex;
    align-items: center;
    gap: 8px
}

.dropdown-divider {
    border-top: 1px solid var(--color-border);
    margin: 4px 0
}

.dropdown-disabled-message {
    padding: 8px;
    font-size: 11px;
    text-align: center;
    border-top: 1px solid var(--color-border);
    background: var(--color-card)
}

.error-text {
    color: var(--color-destructive)
}

.warning-text {
    color: #ffa726
}

.autobets-rounds-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #9d4edd1a;
    border: 1px solid rgba(157, 78, 221, .3);
    border-radius: 8px;
    width: -webkit-fit-content;
    width: fit-content;
    margin: 0 auto;
    gap: 16px
}

.auto-enabled-group {
    display: flex;
    align-items: center
}

.auto-enabled-label {
    font-size: 12px;
    color: #b794f6;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    flex-shrink: 0
}

@keyframes pulse {
    0%,
    to {
        opacity: 1
    }
    50% {
        opacity: .6
    }
}

.rounds-group {
    display: flex;
    align-items: center;
    gap: 8px
}

.count-input-group {
    display: flex;
    align-items: center;
    gap: 4px
}

.rounds-count {
    font-size: 14px;
    color: #e2e8f0;
    font-weight: 600;
    min-width: 20px;
    text-align: center
}

.rounds-separator {
    font-size: 14px;
    color: #b794f6;
    font-weight: 500
}

.rounds-input-container {
    display: flex;
    align-items: center
}

.rounds-input {
    width: 50px;
    background: #9d4edd33;
    border: 1px solid rgba(157, 78, 221, .4);
    color: #e2e8f0;
    text-align: center;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 4px
}

.rounds-input:focus {
    outline: none;
    border-color: #9d4edd;
    box-shadow: 0 0 0 2px #9d4edd33
}

.rounds-label {
    font-size: 12px;
    color: #b794f6;
    font-weight: 500
}

.pnl-group {
    display: flex;
    align-items: center
}

.pnl-display {
    font-size: 12px;
    color: #e2e8f0;
    font-weight: 500;
    flex-shrink: 0
}

.pnl-chip {
    background-color: #22c55e0d;
    border: 1px solid #166534;
    color: #22c55e;
    padding: 4px 8px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500
}

.pnl-chip.negative {
    background-color: #ef44440d;
    border: 1px solid #991b1b;
    color: #ef4444
}

.admin-toggle-floating-button {
    position: fixed;
    bottom: 90px;
    right: 20px;
    z-index: 1000
}

.admin-toggle-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f44, #c22);
    border: 2px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 0 4px 12px #ff44444d;
    -webkit-user-select: none;
    user-select: none
}

.admin-toggle-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 20px #f446;
    background: linear-gradient(135deg, #f55, #d33)
}

.admin-toggle-btn:active {
    transform: translateY(0) scale(.95);
    transition: all .1s ease
}

.admin-toggle-btn.active {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px #22c55e4d
}

.admin-toggle-btn.active:hover {
    background: linear-gradient(135deg, #34d399, #059669);
    box-shadow: 0 8px 20px #22c55e66
}

@media (max-width: 1350px) {
    .admin-toggle-floating-button {
        bottom: 90px;
        right: 16px
    }
    .admin-toggle-btn {
        width: 48px;
        height: 48px;
        font-size: 20px
    }
}

@media (max-height: 600px) {
    .admin-toggle-floating-button {
        bottom: 16px
    }
}

.trade-controls-container.unauthenticated {
    cursor: not-allowed
}

.trade-controls-container.unauthenticated * {
    cursor: not-allowed !important
}

.trade-controls-container.unauthenticated button,
.trade-controls-container.unauthenticated input,
.trade-controls-container.unauthenticated .control-btn,
.trade-controls-container.unauthenticated .percentage-btn,
.trade-controls-container.unauthenticated .price-target-btn,
.trade-controls-container.unauthenticated .auto-toggle-btn,
.trade-controls-container.unauthenticated .trade-button,
.trade-controls-container.unauthenticated .clear-button,
.trade-controls-container.unauthenticated .coin-dropdown-trigger,
.trade-controls-container.unauthenticated .buy-amount-input,
.trade-controls-container.unauthenticated .sell-amount-input,
.trade-controls-container.unauthenticated .rounds-input {
    pointer-events: none !important
}

.trade-controls-container.unauthenticated .section-title,
.trade-controls-container.unauthenticated .stat-label,
.trade-controls-container.unauthenticated .stat-value,
.trade-controls-container.unauthenticated .pnl-row,
.trade-controls-container.unauthenticated .max-bet-warning-inline,
.trade-controls-container.unauthenticated .max-bet-warning-desktop,
.trade-controls-container.unauthenticated .rounds-label,
.trade-controls-container.unauthenticated .unit-indicator,
.trade-controls-container.unauthenticated .coin-ticker,
.trade-controls-container.unauthenticated .coin-balance {
    cursor: default !important
}

.leaderboard-container {
    color: #fff;
    padding: 20px;
    background-color: var(--color-card);
    border-radius: 8px;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 24px #0000004d;
    max-width: 1200px;
    width: 100%
}

.leaderboard-header-title {
    color: var(--color-foreground);
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 20px;
    text-align: center
}

.leaderboard-tabs-container {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
    flex-wrap: wrap
}

.leaderboard-tab-button {
    background-color: #031b0fb3;
    border: 1px solid rgba(0, 245, 212, .3);
    color: #fff;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s
}

.leaderboard-tab-button:hover {
    background-color: #00f5d41a;
    border-color: #00f5d480
}

.leaderboard-tab-button.active {
    background-color: #00f5d4;
    border-color: #00f5d4;
    color: #031b0f
}

.reset-time-notice {
    background-color: var(--color-muted);
    color: var(--color-muted-foreground);
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    margin-bottom: 16px
}

.leaderboard-table-container {
    max-width: 100%;
    border: 1px solid rgba(0, 245, 212, .1);
    border-radius: 6px
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
    table-layout: fixed
}

.leaderboard-table th,
.leaderboard-table td {
    padding: 12px 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.leaderboard-table th {
    background-color: #031b0fcc;
    color: #fff9;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 245, 212, .1);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1
}

.leaderboard-table td {
    border-bottom: 1px solid rgba(0, 245, 212, .05)
}

.leaderboard-table tr:last-child td {
    border-bottom: none
}

.leaderboard-table tr:hover td {
    background-color: #00f5d408
}

.leaderboard-table tr.current-user-row td {
    background-color: #00f5d414;
    font-weight: 700
}

.leaderboard-table tr.current-user-bottom td {
    background-color: #00f5d414;
    font-weight: 700;
    border-top: 2px solid rgba(0, 245, 212, .3)
}

.pnl-value {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    font-family: monospace
}

.pnl-value.positive {
    color: #00f5d4
}

.pnl-value.negative {
    color: #f05
}

.sol-logo-leaderboard {
    width: 14px;
    height: 14px;
    margin: 0 4px
}

.leaderboard-message {
    text-align: center;
    padding: 24px;
    font-style: italic;
    color: #ffffff80
}

.leaderboard-message.error-message {
    background-color: #f053;
    border: 1px solid #ff0055;
    padding: 16px;
    border-radius: 8px;
    margin: 24px 0;
    color: #fff
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    border-top-color: #00f5d4;
    animation: leaderboard-spin 1s linear infinite
}

@keyframes leaderboard-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (max-width: 768px) {
    .leaderboard-container {
        padding: 16px;
        margin: 0 10px
    }
    .leaderboard-header-title {
        font-size: 20px
    }
    .leaderboard-tabs-container {
        gap: 4px
    }
}

.leaderboard-new-container {
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    opacity: 1
}

.leaderboard-title-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
}

.leaderboard-title-with-icon {
    display: flex;
    align-items: center;
    gap: 12px
}

.leaderboard-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffc700;
    margin: 0;
    font-family: DynaPuff, sans-serif;
    text-shadow: -1px -1px 0 #383943, 1px -1px 0 #383943, -1px 1px 0 #EF4444, 1px 1px 0 #EF4444, -1px 0 0 #383943, 1px 0 0 #383943, 0 -1px 0 #383943, 0 1px 0 #EF4444
}

.leaderboard-date {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    margin: 0
}

.leaderboard-subtitle {
    font-size: 14px;
    color: #ccc;
    text-align: left;
    margin-bottom: 24px
}

.info-icon {
    opacity: .7;
    cursor: pointer;
    position: relative;
    display: inline-block
}

.info-icon:hover {
    opacity: 1
}

.info-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translate(-50%);
    background-color: #15161d;
    color: #f8f8fc;
    text-align: center;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid rgba(248, 248, 252, .2);
    box-shadow: 0 4px 12px #0000004d;
    transition: opacity .3s ease, visibility .3s ease
}

.info-tooltip:before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #15161D transparent transparent transparent
}

.info-icon:hover .info-tooltip {
    visibility: visible;
    opacity: 1
}

.time-period-filter {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 16px;
    transition: all .3s ease-in-out;
    gap: 12px
}

.time-period-buttons {
    display: flex;
    gap: 8px;
    background: #15161d99;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid rgba(248, 248, 252, .1);
    width: -webkit-fit-content;
    width: fit-content;
    transition: all .3s ease-in-out
}

.time-period-button {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-family: DynaPuff, sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    white-space: nowrap;
    transform: translateY(0);
    opacity: 1;
    position: relative;
    overflow: hidden
}

.time-period-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 199, 0, .3), transparent);
    transition: left .6s ease
}

.time-period-button:hover {
    background: #f8f8fc1a;
    color: #f8f8fc;
    transform: translateY(-1px)
}

.time-period-button:hover:before {
    left: 100%
}

.time-period-button.active {
    background: #ffc700;
    color: #15161d;
    font-weight: 700;
    box-shadow: 0 2px 8px #ffc7004d;
    transform: translateY(-1px)
}

.time-period-button.active:hover {
    background: gold;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #ffc70066
}

.admin-reverse-btn {
    background: #ef44441a;
    border: 1px solid rgba(239, 68, 68, .3);
    color: #ef4444;
    font-family: DynaPuff, sans-serif;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.admin-reverse-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(239, 68, 68, .2), transparent);
    transition: left .6s ease
}

.admin-reverse-btn:hover {
    background: #ef444426;
    border-color: #ef444480;
    color: #f87171;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px #ef444433
}

.admin-reverse-btn:hover:before {
    left: 100%
}

.admin-reverse-btn.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px #ef444466
}

.admin-reverse-btn.active:hover {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #ef444480
}

.leaderboard-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: all .3s ease-in-out;
    min-height: 400px
}

.podium-with-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.podium-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    padding: 16px;
    transition: all .4s ease-in-out;
    transform: translateY(0);
    opacity: 1;
    min-height: 200px
}

.podium-container.extended-padding {
    padding: 16px
}

.podium-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 8px;
    border-radius: 24px;
    width: 180px;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: #0000001a;
    border: 2px solid transparent;
    background-clip: padding-box;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease;
    transition: transform .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
    transition: transform .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease;
    overflow: hidden
}

.podium-card:hover {
    transform: translateY(-4px);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px #0000004d
}

.podium-card:after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), rgba(255, 255, 255, .2), rgba(255, 255, 255, .1), transparent);
    transform: skew(-15deg);
    transition: left .6s ease;
    pointer-events: none;
    z-index: 1;
    opacity: 0
}

.podium-card:hover:after {
    left: 100%;
    opacity: 1;
    transition: left .6s ease, opacity .3s ease;
    transition-delay: .1s
}

.podium-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 24px;
    padding: 2px;
    -moz-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -moz-mask-composite: subtract;
    -webkit-mask-composite: xor;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    pointer-events: none;
    transition: background .3s ease
}

.podium-card.first-place {
    background: linear-gradient(180deg, #ffc7001a, #9700);
    transform: scale(1.08);
    transform-origin: center center;
    will-change: transform
}

.podium-card.first-place:hover {
    transform: scale(1.08) translateY(-4px);
    background: linear-gradient(180deg, #ffc70026, #9977000d);
    box-shadow: 0 12px 40px #f5af0033
}

.podium-card.first-place:before {
    background: linear-gradient(180deg, #f5af00, #8f6600)
}

.podium-card.first-place:hover:before {
    background: linear-gradient(180deg, gold, #b8860b)
}

.podium-card.second-place {
    background: linear-gradient(180deg, #cad5e20d, #6f757c00)
}

.podium-card.second-place:hover {
    background: linear-gradient(180deg, #cad5e21a, #6f757c0d);
    box-shadow: 0 8px 32px #cad5e226
}

.podium-card.second-place:before {
    background: linear-gradient(180deg, #CAD5E2 0%, transparent 100%)
}

.podium-card.second-place:hover:before {
    background: linear-gradient(180deg, #e6f0ff, #e6f0ff1a)
}

.podium-card.third-place {
    background: linear-gradient(180deg, #a65f000d, #40250000)
}

.podium-card.third-place:hover {
    background: linear-gradient(180deg, #a65f001a, #4025000d);
    box-shadow: 0 8px 32px #a65f0026
}

.podium-card.third-place:before {
    background: linear-gradient(180deg, #A65F00 0%, transparent 100%)
}

.podium-card.third-place:hover:before {
    background: linear-gradient(180deg, peru, #cd853f1a)
}

.podium-position {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: orange
}

.podium-card.first-place .podium-position {
    color: gold;
    font-size: 20px
}

.podium-card.second-place .podium-position {
    color: silver;
    font-size: 19px
}

.podium-card.third-place .podium-position {
    color: #cd7f32;
    font-size: 18px
}

.podium-pnl {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 28px;
    font-weight: 700;
    color: #f8f8fc
}

.podium-card.first-place .podium-pnl {
    font-size: 32px
}

.podium-card.second-place .podium-pnl {
    font-size: 30px
}

.podium-card.third-place .podium-pnl {
    font-size: 28px
}

.podium-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 16px
}

.podium-player {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center
}

.podium-player .player-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.podium-card.first-place .podium-player .player-name {
    font-size: 18px
}

.podium-card.second-place .podium-player .player-name {
    font-size: 17px
}

.podium-player .player-level {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border-radius: 0;
    font-size: 12px
}

.podium-card.placeholder {
    opacity: .5;
    background: #15161d4d
}

.podium-card.placeholder .podium-position {
    color: #666
}

.placeholder-pnl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
    font-weight: 700;
    color: #666
}

.placeholder-text {
    font-size: 32px;
    color: #555;
    font-weight: 300
}

.placeholder-level {
    display: flex;
    align-items: center;
    justify-content: center
}

.placeholder-badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f8f8fc1a;
    box-sizing: border-box;
    flex-shrink: 0;
    display: inline-block;
    min-width: 20px;
    min-height: 20px
}

.placeholder-name {
    color: #666;
    font-style: italic;
    font-size: 14px
}

.sol-icon {
    width: 16px;
    height: 16px;
    margin-right: 2px
}

.podium-pnl .sol-icon {
    width: 24px;
    height: 24px;
    margin-right: 4px
}

.podium-card.first-place .podium-pnl .sol-icon {
    width: 28px;
    height: 28px
}

.podium-card.second-place .podium-pnl .sol-icon {
    width: 26px;
    height: 26px
}

.leaderboard-table-container {
    background: #1e202acc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    opacity: 1
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    table-layout: fixed
}

.leaderboard-table th {
    background: #ffffff0d;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #888;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.leaderboard-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 14px
}

.leaderboard-table tr:hover {
    background: #ffffff0d
}

.leaderboard-table tr.current-user {
    background: #00f5d41a;
    border: 1px solid rgba(0, 245, 212, .3)
}

.player-info {
    display: flex;
    align-items: center;
    gap: 8px
}

.player-level-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px
}

.pnl-display {
    display: flex;
    align-items: center;
    gap: 4px
}

.pnl-display .positive {
    color: #00c137
}

.pnl-display .negative {
    color: #ff4d4d
}

.leaderboard-table .no-player-row {
    background: #ffffff05;
    border: 1px solid rgba(255, 255, 255, .05)
}

.leaderboard-table .no-player-row td {
    text-align: center;
    padding: 20px;
    color: #888;
    font-style: italic;
    font-size: 14px
}

.leaderboard-table th:nth-child(1),
.leaderboard-table td:nth-child(1) {
    width: 15%;
    text-align: center
}

.leaderboard-table th:nth-child(2),
.leaderboard-table td:nth-child(2) {
    width: 55%;
    text-align: left
}

.leaderboard-table th:nth-child(3),
.leaderboard-table td:nth-child(3) {
    width: 30%;
    text-align: left
}

@-moz-document url-prefix() {
    .podium-card {
        will-change: transform;
        transform: translateZ(0)
    }
    .podium-card.first-place {
        transform: scale(1.08) translateZ(0)
    }
    .podium-card:hover {
        transform: translateY(-4px) translateZ(0)
    }
    .podium-card.first-place:hover {
        transform: scale(1.08) translateY(-4px) translateZ(0)
    }
}

@supports not ((-webkit-mask: none) or (mask: none)) {
    .podium-card.first-place:before {
        border: 2px solid #F5AF00;
        background: none
    }
    .podium-card.second-place:before {
        border: 2px solid #CAD5E2;
        border-bottom: none;
        background: none
    }
    .podium-card.third-place:before {
        border: 2px solid #A65F00;
        border-bottom: none;
        background: none
    }
}

@media (max-width: 768px) {
    .leaderboard-new-container {
        min-height: 500px
    }
    .leaderboard-header {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        align-items: center
    }
    .leaderboard-subtitle {
        font-size: 13px
    }
    .time-period-filter {
        margin: 0;
        padding: 16px
    }
    .time-period-buttons {
        width: -webkit-fit-content;
        width: fit-content;
        justify-content: center
    }
    .time-period-button {
        font-size: 12px;
        padding: 8px 12px
    }
    .admin-reverse-btn {
        font-size: 14px;
        padding: 6px 10px;
        min-width: 36px
    }
    .podium-container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 16px
    }
    .podium-container.extended-padding {
        padding: 16px
    }
    .podium-card {
        width: 240px;
        transform: none !important
    }
    .podium-card.first-place {
        transform: none !important;
        order: 1
    }
    .podium-card.second-place {
        order: 2
    }
    .podium-card.third-place {
        order: 3
    }
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 8px 12px;
        font-size: 12px
    }
    .leaderboard-table th:nth-child(1),
    .leaderboard-table td:nth-child(1) {
        width: 15%;
        padding: 8px 4px
    }
    .leaderboard-table th:nth-child(2),
    .leaderboard-table td:nth-child(2) {
        width: 55%
    }
    .leaderboard-table th:nth-child(3),
    .leaderboard-table td:nth-child(3) {
        width: 30%;
        text-align: center
    }
    .placeholder-text {
        font-size: 28px
    }
    .placeholder-name {
        font-size: 12px
    }
}

@media (max-width: 450px) {
    .leaderboard-new-container {
        overflow-x: hidden
    }
    .podium-card {
        width: 200px !important;
        padding: 32px 6px
    }
    .leaderboard-table th,
    .leaderboard-table td {
        padding: 6px 8px;
        font-size: 11px
    }
    .leaderboard-table th:nth-child(1),
    .leaderboard-table td:nth-child(1) {
        padding: 6px 2px
    }
}

.timer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 56px;
    transition: all .3s ease-in-out;
    transform: translateY(0);
    opacity: 1
}

.timer-container.transitioning {
    opacity: 0;
    transform: translateY(-10px)
}

.leaderboard-time {
    font-size: 20px;
    color: #fefce8;
    font-weight: 600;
    transition: all .3s ease
}

.leaderboard-time.critical {
    font-size: 22px;
    color: #ff4d4d;
    font-weight: 700;
    animation: pulse 2s infinite
}

.leaderboard-time.fresh {
    font-size: 22px;
    color: #ffc700;
    font-weight: 700
}

.time-segments {
    display: flex;
    align-items: center;
    gap: 8px
}

.time-segment {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: #15161dcc;
    border-radius: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(254, 252, 232, .2);
    min-width: 50px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: all .3s ease
}

.time-segment:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #fefce826
}

@keyframes timeSegmentGlow {
    0% {
        box-shadow: 0 0 5px #fefce81a
    }
    to {
        box-shadow: 0 0 15px #fefce833
    }
}

.time-value {
    font-size: 24px;
    font-weight: 700;
    color: #fefce8;
    line-height: 1;
    font-family: DynaPuff, monospace
}

.time-label {
    font-size: 12px;
    font-weight: 500;
    color: #fefce8;
    opacity: .7;
    line-height: 1
}

.leaderboard-time.critical .time-segment {
    background: #ff4d4d26;
    border-color: #ff4d4d4d;
    box-shadow: 0 0 15px #ff4d4d33
}

.leaderboard-time.critical .time-value,
.leaderboard-time.critical .time-label {
    color: #ff4d4d
}

.leaderboard-time.fresh .time-segment {
    background: #ffc70026;
    border-color: #ffc70066;
    box-shadow: 0 0 15px #ffc70033
}

.leaderboard-time.fresh .time-value,
.leaderboard-time.fresh .time-label {
    color: #ffc700
}

@keyframes pulse {
    0% {
        opacity: 1
    }
    50% {
        opacity: .7
    }
    to {
        opacity: 1
    }
}

.yesterday-results-text {
    font-size: 24px;
    color: #fefce8;
    font-weight: 600;
    text-align: center;
    padding: 16px 56px;
    border-radius: 8px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: DynaPuff, sans-serif
}

@media (max-width: 768px) {
    .timer-container {
        margin: 32px
    }
    .leaderboard-time.critical,
    .leaderboard-time.fresh {
        font-size: 16px
    }
    .info-tooltip {
        top: 30px;
        bottom: auto;
        left: auto;
        right: 0;
        transform: none
    }
    .info-tooltip:before {
        bottom: auto;
        top: -5px;
        left: auto;
        right: 8px;
        margin-left: 0;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent #15161D transparent
    }
}

.experience-info {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
    min-width: 165px;
    max-width: 320px
}

.experience-info:hover {
    background-color: #232329;
    border-color: #3f3f46
}

.experience-info--compact {
    max-width: 240px;
    gap: 8px;
    padding: 4px 8px
}

.experience-info--mobile {
    min-width: 160px;
    max-width: 200px;
    gap: 6px;
    padding: 4px 6px
}

.experience-info__badge {
    flex-shrink: 0
}

.level-badge-transparent {
    background: transparent !important;
    border: none;
    padding: 0
}

.level-badge-only {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0;
    min-width: auto
}

.level-badge-transparent .level-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3))
}

.level-badge-only.level-badge-medium .level-icon {
    width: 28px;
    height: 28px
}

.level-badge-only.level-badge-large .level-icon {
    width: 32px;
    height: 32px
}

.level-badge-only.level-badge-small .level-icon {
    width: 20px;
    height: 20px
}

.experience-info__progress {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.experience-info__progress-text {
    flex-shrink: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #fff
}

.experience-info__level-text {
    background: linear-gradient(to right, #51a2ff, #fbedb9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: .875rem;
    font-weight: 600
}

.experience-info__current-xp {
    color: #51a2ff
}

.experience-info__separator {
    color: #666;
    margin: 0 2px
}

.experience-info__max-xp {
    color: #aaa
}

.experience-info__xp-label {
    color: #888;
    font-size: 11px;
    margin-left: 4px
}

.xp-progress-bar {
    flex: 1;
    min-width: 80px
}

.xp-progress-bar__container {
    width: 100%
}

.xp-progress-bar__track {
    width: 100%;
    height: 6px;
    background-color: #333;
    border-radius: 3px;
    overflow: hidden
}

.xp-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #56e9ff, #fbedb9);
    border-radius: 3px;
    transition: width .3s ease
}

.xp-progress-bar__labels {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 10px;
    color: #aaa
}

.xp-tooltip {
    position: absolute;
    top: 100%;
    right: 0%;
    margin-top: 8px;
    background-color: var(--color-card);
    border: 1px solid #27272A;
    border-radius: 8px;
    padding: 16px;
    z-index: 1000;
    box-shadow: 0 4px 12px #00000080;
    width: 280px;
    color: #fff
}

.xp-tooltip__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #27272A
}

.xp-tooltip__title {
    font-weight: 600;
    font-size: 14px;
    color: #fff
}

.xp-tooltip__progress-info {
    margin-bottom: 12px
}

.xp-tooltip__progress-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px
}

.xp-tooltip__label {
    color: #aaa
}

.xp-tooltip__value {
    color: #fff;
    font-weight: 600
}

.xp-tooltip__progress-bar {
    display: flex;
    align-items: center;
    gap: 8px
}

.xp-tooltip__progress-track {
    flex: 1;
    height: 8px;
    background-color: #333;
    border-radius: 4px;
    overflow: hidden
}

.xp-tooltip__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #56e9ff, #fbedb9);
    border-radius: 4px;
    transition: width .3s ease
}

.xp-tooltip__percentage {
    font-size: 11px;
    color: #51a2ff;
    font-weight: 600;
    min-width: 40px;
    text-align: right
}

.xp-tooltip__details {
    margin-bottom: 12px
}

.xp-tooltip__detail-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px
}

.xp-tooltip__detail-label {
    color: #aaa
}

.xp-tooltip__detail-value {
    color: #fff;
    font-weight: 600
}

.xp-tooltip__info {
    padding: 12px;
    background-color: #1a1a1a;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4
}

.xp-tooltip__info-title {
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px
}

.xp-tooltip__info-text {
    color: #aaa;
    margin-bottom: 8px
}

.xp-tooltip__highlight {
    color: #0f0;
    font-weight: 600
}

.xp-tooltip__highlight-sol {
    color: #fbb90f;
    font-weight: 600
}

.xp-tooltip__info-note {
    color: #ddd;
    font-size: 11px;
    font-style: italic
}

@media (max-width: 768px) {
    .experience-info {
        min-width: 140px;
        max-width: 180px;
        gap: 6px;
        padding: 4px 8px
    }
    .experience-info__progress {
        gap: 6px
    }
    .experience-info__progress-text,
    .experience-info__level-text {
        font-size: .6875rem
    }
    .xp-progress-bar {
        min-width: 60px
    }
    .xp-progress-bar__track {
        height: 4px
    }
    .xp-tooltip {
        width: 260px;
        padding: 12px
    }
    .xp-tooltip__info {
        padding: 8px
    }
    .level-badge-only.level-badge-medium .level-icon {
        width: 24px;
        height: 24px
    }
    .level-badge-only.level-badge-large .level-icon {
        width: 28px;
        height: 28px
    }
}

@media (prefers-color-scheme: dark) {
    .experience-info:hover {
        background-color: #232329;
        border-color: #3f3f46
    }
}

@media (prefers-contrast: high) {
    .experience-info {
        border-width: 2px
    }
    .xp-progress-bar__track {
        border: 1px solid #666
    }
    .xp-tooltip {
        border-width: 2px
    }
}

@media (prefers-reduced-motion: reduce) {
    .experience-info,
    .xp-progress-bar__fill,
    .xp-tooltip__progress-fill {
        transition: none
    }
}

.deposit-button {
    position: relative;
    background-color: var(--green700);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-size: .875rem;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 32px;
    transition: background-color .2s ease;
    z-index: 1
}

.deposit-button:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(to bottom, var(--green700), var(--green900));
    border-radius: 6px;
    z-index: -1
}

.deposit-button:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--green700);
    border-radius: 6px;
    z-index: -1
}

.deposit-button:hover {
    background-color: #16a34a
}

.deposit-button:hover:after {
    background: #16a34a
}

.deposit-button span {
    white-space: nowrap
}

.dw-dropdown.deposit {
    --color-primary: #FFC107;
    --color-primary-active: #E6AD06
}

.chat-message-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--color-foreground)
}

.chat-ui-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden
}

.chat-admin-message {
    position: relative;
    margin: 8px 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px #0006;
    animation: slideInAnnouncement .5s cubic-bezier(.34, 1.56, .64, 1);
    background: linear-gradient(135deg, var(--color-card) 0%, #252732 30%, var(--color-muted) 70%, var(--color-card) 100%);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.chat-admin-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 8px;
    background: #00000026;
    position: relative;
    z-index: 2
}

.chat-admin-message-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--color-primary);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4)
}

.chat-admin-message-icon {
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffc700"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>') no-repeat center;
    background-size: contain;
    animation: pulse 2.5s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(255, 199, 0, .2))
}

.chat-admin-message-sender {
    font-weight: 400;
    color: var(--color-muted-foreground);
    text-shadow: none;
    font-size: 14px;
    opacity: .6;
    text-transform: lowercase
}

.chat-admin-message-content {
    padding: 4px 20px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-foreground);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    word-break: break-word;
    position: relative;
    z-index: 2;
    font-weight: 500
}

.chat-admin-message-progress-background {
    height: 5px;
    background: #0000004d;
    position: relative;
    overflow: hidden;
    z-index: 2;
    border-radius: 0 0 12px 12px
}

.chat-admin-message-progress-fill {
    height: 100%;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-secondary) 100%);
    width: 100%;
    animation: progressBarCountdown linear forwards;
    position: relative;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 0 10px #ffc70066
}

@keyframes progressBarCountdown {
    0% {
        width: 100%
    }
    to {
        width: 0%
    }
}

@keyframes slideInAnnouncement {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(.9);
        filter: blur(5px)
    }
    60% {
        transform: translateY(5px) scale(1.02)
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px)
    }
}

@keyframes pulse {
    0%,
    to {
        transform: scale(1) rotate(0);
        opacity: 1
    }
    50% {
        transform: scale(1.15) rotate(5deg);
        opacity: .8
    }
}

.chat-admin-message.removing {
    animation: slideOutAnnouncement .4s cubic-bezier(.55, 0, 1, .45) forwards
}

@keyframes slideOutAnnouncement {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px)
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(.95);
        filter: blur(3px)
    }
}

.chat-admin-message:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px #00000080;
    transition: all .3s cubic-bezier(.4, 0, .2, 1)
}

.chat-admin-message:hover .chat-admin-message-progress-fill {
    box-shadow: 0 0 15px #ffc70099
}

@media (max-width: 768px) {
    .chat-admin-message {
        margin: 6px 12px;
        border-radius: 10px
    }
    .chat-admin-message-header {
        padding: 12px 16px 6px
    }
    .chat-admin-message-content {
        padding: 4px 16px 12px;
        font-size: 13px
    }
    .chat-admin-message-title {
        font-size: 12px;
        gap: 6px
    }
    .chat-admin-message-icon {
        width: 14px;
        height: 14px
    }
    .chat-admin-message-sender {
        font-size: 10px
    }
}

.sidebar-chat .chat-admin-message {
    margin: 4px 8px;
    border-radius: 8px
}

.sidebar-chat .chat-admin-message-header {
    padding: 10px 12px 6px
}

.sidebar-chat .chat-admin-message-content {
    padding: 4px 12px 10px;
    font-size: 12px;
    line-height: 1.3
}

.sidebar-chat .chat-admin-message-title {
    font-size: 12px;
    gap: 4px
}

.sidebar-chat .chat-admin-message-icon {
    width: 12px;
    height: 12px
}

.sidebar-chat .chat-admin-message-sender {
    font-size: 10px
}

.chat-cosmetics-container {
    position: absolute;
    box-shadow: 0 10px 25px #00000040;
    z-index: 20;
    border-radius: 6px;
    background-color: #222;
    border: 1px solid #333333;
    width: 90%;
    max-width: 240px;
    max-height: 400px;
    bottom: 52px;
    left: 5%
}

.chat-cosmetics-tabs {
    display: flex;
    border-bottom: 1px solid #333333
}

.chat-cosmetics-tab {
    flex: 1;
    padding: 8px 0;
    font-size: 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: DynaPuff, sans-serif;
    transition: all .2s ease
}

.chat-cosmetics-tab--emojis {
    color: #aaa
}

.chat-cosmetics-tab--emojis.active {
    background-color: #2a2a2a;
    color: #fff
}

.chat-cosmetics-tab--badges {
    color: #aaa
}

.chat-cosmetics-tab--badges.active {
    background-color: #2a2a2a;
    color: #fff
}

.chat-cosmetics-badge-update-message {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    color: #00c137;
    background-color: #1a1a1a
}

.chat-cosmetics-content {
    padding: 8px;
    overflow-y: auto;
    max-height: 350px
}

.chat-cosmetics-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96px
}

.chat-cosmetics-loading-text {
    color: #aaa;
    font-size: 12px
}

.chat-cosmetics-emojis-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px
}

.chat-cosmetics-emoji-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #333333;
    height: 64px
}

.chat-cosmetics-emoji-item--unlocked {
    background-color: #2a2a2a;
    opacity: 1
}

.chat-cosmetics-emoji-item--locked {
    background-color: #1a1a1a;
    opacity: .5
}

.chat-cosmetics-emoji-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    max-width: 100%
}

.chat-cosmetics-emoji-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #000000b3;
    width: 18px;
    height: 18px
}

.chat-cosmetics-emoji-lock-icon {
    font-size: 14px
}

.chat-cosmetics-badges-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px
}

.chat-cosmetics-badge-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #333333;
    height: 60px
}

.chat-cosmetics-badge-item--unlocked {
    background-color: #2a2a2a;
    opacity: 1
}

.chat-cosmetics-badge-item--active {
    background-color: #00c137;
    opacity: 1
}

.chat-cosmetics-badge-item--locked {
    background-color: #1a1a1a;
    opacity: .5
}

.chat-cosmetics-badge-content {
    display: flex;
    align-items: center;
    width: 100%
}

.chat-cosmetics-badge-preview {
    padding: 2px 6px;
    border-radius: 2px;
    margin-right: 12px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    background: var( --badge-gradient, linear-gradient(90deg, #fb2c36 0%, #ffc700 100%))
}

.chat-cosmetics-badge-icon {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    display: inline-block;
    margin-left: -2px;
    vertical-align: middle
}

.chat-cosmetics-badge-name {
    font-weight: 700;
    font-size: 12px
}

.chat-cosmetics-badge-name--active {
    color: #fff
}

.chat-cosmetics-badge-name--inactive {
    color: #aaa
}

.chat-cosmetics-badge-lock {
    position: absolute;
    bottom: 4px;
    right: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #000000b3;
    width: 18px;
    height: 18px
}

.chat-cosmetics-badge-lock-icon {
    font-size: 14px
}

.chat-cosmetics-remove-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #2a2a2a;
    border: 1px solid #333333
}

.chat-cosmetics-remove-badge-text {
    text-align: center;
    font-size: 12px;
    color: #ff4d4d
}

.chat-cosmetics-no-badges {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    color: #aaa
}

.chat-cosmetics-no-badges-message {
    margin-bottom: 4px
}

.chat-help-modal {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 25px #00000040;
    max-width: 90%;
    z-index: 10;
    bottom: 70px;
    background-color: #1e1e24;
    border: 1px solid #333333;
    color: #fff;
    width: 300px;
    max-width: 90vw
}

.chat-help-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px
}

.chat-help-modal-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    margin: 0
}

.chat-help-modal-close {
    font-size: 12px;
    color: #aaa;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px;
    transition: background-color .2s ease
}

.chat-help-modal-close:hover {
    background-color: #ffffff1a
}

.chat-help-modal-commands {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.chat-help-modal-command {
    font-size: 12px
}

.chat-help-modal-command-text {
    font-family: monospace;
    color: #4adedb;
    margin-bottom: 2px;
    display: block
}

.chat-help-modal-command-description {
    color: #ccc;
    font-size: 11px
}

.chat-help-modal-footer {
    margin-top: 12px;
    padding-top: 8px;
    font-size: 12px;
    text-align: center;
    border-top: 1px solid #333333;
    color: #888
}

.chat-input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box
}

.chat-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: transparent
}

.chat-footer-left {
    display: flex;
    align-items: center;
    opacity: 0;
}

.chat-footer-right {
    display: flex;
    align-items: center;
    gap: 12px
}

.chat-footer-rules-button {
    background: none;
    border: none;
    color: var(--color-muted-foreground);
    font-size: .75rem;
    cursor: pointer;
    font-family: DynaPuff, sans-serif;
    transition: color .2s ease
}

.chat-footer-rules-button:hover {
    color: var(--color-foreground)
}

.chat-footer-icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .2s ease
}

.chat-footer-icon-button:hover {
    opacity: .7
}

.chat-footer-icon {
    height: 13.3px;
    width: 13.3px;
    filter: brightness(0) saturate(100%) invert(71%) sepia(8%) saturate(1074%) hue-rotate(199deg) brightness(92%) contrast(86%)
}

.chat-input-form {
    display: flex;
    padding: 8px 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden
}

.chat-input-container {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%
}

.chat-input-field {
    width: 100%;
    max-width: 100%;
    padding: 10px 40px 10px 12px;
    border-radius: 6px;
    border: 1px solid #444444;
    outline: none;
    background-color: var(--color-background);
    color: #fff;
    font-family: DynaPuff, sans-serif;
    font-size: 16px;
    -webkit-appearance: none;
    transition: border-color .2s ease;
    box-sizing: border-box;
    min-width: 0
}

.chat-input-field:focus {
    border-color: #00c137
}

.chat-input-field::placeholder {
    color: #999;
    animation: blink 1s infinite
}

@keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.chat-input-emoji-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .7;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    padding: 4px;
    transition: opacity .2s ease
}

.chat-input-emoji-button:hover {
    opacity: 1
}

.chat-input-emoji-icon {
    width: 20px;
    height: 20px
}

.chat-message-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    overflow-x: hidden;
    box-sizing: border-box
}

.chat-system-message {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 6px 8px;
    overflow-x: hidden;
    box-sizing: border-box
}

.chat-system-message-username {
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -2%;
    color: #f44;
    font-weight: 600;
    margin-bottom: 2px
}

.chat-system-message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -2%;
    color: #f44;
    font-style: italic
}

.chat-message-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
    max-width: 100%
}

.chat-message-username {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -2%;
    color: var(--color-foreground);
    cursor: pointer;
    transition: -webkit-text-decoration .2s ease;
    transition: text-decoration .2s ease;
    transition: text-decoration .2s ease, -webkit-text-decoration .2s ease
}

.chat-message-username:hover {
    text-decoration: underline
}

.chat-message-username--system,
.chat-message-username--self {
    cursor: default
}

.chat-message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: -2%;
    color: #9ca3af
}

.chat-timeout-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    background-color: #000000b3
}

.chat-timeout-modal-content {
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 10px 25px #00000040;
    max-width: 320px;
    width: 100%;
    background-color: #222;
    border: 1px solid #333333
}

.chat-timeout-modal-title {
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.chat-timeout-buttons-grid {
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
}

.chat-timeout-button {
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background-color: #333;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    border: none;
    cursor: pointer;
    transition: background-color .2s ease
}

.chat-timeout-button:hover {
    background-color: #444
}

.chat-timeout-button--custom {
    grid-column: span 2
}

.chat-timeout-button--permanent {
    grid-column: span 2;
    background-color: #ff4d4d
}

.chat-timeout-button--permanent:hover {
    background-color: #e63946
}

.chat-timeout-custom-section {
    margin-bottom: 16px
}

.chat-timeout-custom-input {
    padding: 8px;
    width: 100%;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
    background-color: #333;
    color: #fff;
    border: 1px solid #444444;
    font-family: DynaPuff, sans-serif
}

.chat-timeout-custom-input::placeholder {
    color: #aaa
}

.chat-timeout-custom-actions {
    display: flex;
    gap: 8px
}

.chat-timeout-custom-apply {
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background-color: #00c137;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    border: none;
    cursor: pointer;
    flex: 1;
    transition: background-color .2s ease
}

.chat-timeout-custom-apply:hover {
    background-color: #00a02e
}

.chat-timeout-custom-back {
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background-color: #333;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    border: none;
    cursor: pointer;
    flex: 1;
    transition: background-color .2s ease
}

.chat-timeout-custom-back:hover {
    background-color: #444
}

.chat-timeout-cancel {
    display: flex;
    justify-content: center
}

.chat-timeout-cancel-button {
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    background-color: #333;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: background-color .2s ease
}

.chat-timeout-cancel-button:hover {
    background-color: #444
}

.chat-user-modal {
    position: absolute;
    box-shadow: 0 10px 25px #00000040;
    overflow: hidden;
    z-index: 10;
    bottom: 70px;
    left: 20px;
    background-color: #1e1e24;
    border: 1px solid #333333;
    border-radius: 8px;
    width: 220px
}

.chat-user-modal-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #333333
}

.chat-user-modal-badge {
    flex-shrink: 0;
    margin-right: 8px
}

.chat-user-modal-username {
    font-size: 14px;
    font-weight: 500;
    color: #fff
}

.chat-user-modal-discord-section {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    background-color: #7289da1a;
    border-bottom: 1px solid #333333
}

.chat-user-modal-discord-icon {
    width: 16px;
    height: 16px;
    fill: #7289da;
    margin-right: 8px
}

.chat-user-modal-discord-username {
    color: #7289da
}

.chat-user-modal-verified-section {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 12px;
    color: gold;
    border-bottom: 1px solid #333333;
    background-color: #ffd7001a
}

.chat-user-modal-verified-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px
}

.chat-user-modal-action {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-family: DynaPuff, sans-serif;
    border: none;
    background: none;
    cursor: pointer;
    transition: background-color .2s ease;
    border-bottom: 1px solid #333333
}

.chat-user-modal-action:last-child {
    border-bottom: none
}

.chat-user-modal-action--timeout {
    color: #ff4d4d;
    background-color: #ff4d4d0d
}

.chat-user-modal-action--timeout:hover {
    background-color: #ff4d4d1a
}

.chat-user-modal-action--untimeout {
    color: #00c137;
    background-color: #00c1370d
}

.chat-user-modal-action--untimeout:hover {
    background-color: #00c1371a
}

.chat-user-modal-action--mute {
    color: #ddd;
    background-color: transparent
}

.chat-user-modal-action--mute:hover {
    background-color: #ffffff0d
}

.chat-user-modal-action--mute-primary {
    color: #ff4d4d;
    background-color: #ff4d4d0d
}

.chat-user-modal-action--mute-primary:hover {
    background-color: #ff4d4d1a
}

.chat-user-modal-action--cancel {
    color: #aaa;
    background-color: transparent
}

.chat-user-modal-action--cancel:hover {
    background-color: #ffffff0d
}

.chat-user-modal-action-content {
    display: flex;
    align-items: center
}

.chat-user-modal-action-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px
}

.chat-user-modal-custom-timeout {
    padding: 12px;
    border-bottom: 1px solid #333333
}

.chat-user-modal-custom-input-group {
    display: flex;
    gap: 8px;
    align-items: center
}

.chat-user-modal-custom-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #444444;
    background-color: #2a2a2a;
    color: #fff;
    font-size: 12px;
    font-family: DynaPuff, sans-serif;
    outline: none;
    transition: border-color .2s ease
}

.chat-user-modal-custom-input:focus {
    border-color: #00c137
}

.chat-user-modal-custom-input::placeholder {
    color: #888
}

.chat-user-modal-custom-select {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #444444;
    background-color: #2a2a2a;
    color: #fff;
    font-size: 12px;
    font-family: DynaPuff, sans-serif;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease;
    min-width: 80px
}

.chat-user-modal-custom-select:focus {
    border-color: #00c137
}

.chat-user-modal-custom-select option {
    background-color: #2a2a2a;
    color: #fff
}

.chat-user-modal-custom-preview {
    margin-top: 8px;
    padding: 6px 8px;
    background-color: #00c1371a;
    border-radius: 4px;
    font-size: 11px;
    color: #00c137;
    text-align: center;
    font-family: DynaPuff, sans-serif
}

.chat-user-modal-action:disabled {
    opacity: .5;
    cursor: not-allowed;
    background-color: #ff4d4d05 !important
}

.chat-user-modal-action:disabled:hover {
    background-color: #ff4d4d05 !important
}

.social-button {
    position: relative;
    border-radius: 16px;
    width: 32px;
    height: 32px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex: none;
    order: 0;
    color: var(--color-foreground);
    text-decoration: none;
    border: 1px solid transparent;
    background: linear-gradient(var(--color-muted), var(--color-muted)) padding-box, linear-gradient(to top, #3b82f6, #28282f) border-box
}

.social-button svg {
    width: 24px;
    height: 24px;
    z-index: 1
}

.social-button svg:not([viewBox="0 0 71 55"]) {
    transform: scale(1.1)
}

@media (max-width: 768px) {
    .chat-timeout-modal-content {
        margin: 16px;
        padding: 16px
    }
    .chat-timeout-buttons-grid {
        gap: 6px
    }
    .chat-timeout-button {
        padding: 6px;
        font-size: 11px
    }
    .chat-user-modal {
        width: 200px;
        left: 10px
    }
    .chat-user-modal-action {
        padding: 8px 10px;
        font-size: 11px
    }
}

.chat-toggle-button {
    transition: left .3s ease-in-out
}

.chat-toggle-button:hover {
    background-color: #2a2a2a !important
}

.chat-notification-bubble {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #fbb90f;
    color: #000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 4px #0003;
    border: 1px solid #E8AA0C;
    z-index: 100;
    font-family: DynaPuff, sans-serif
}

@keyframes popOut {
    0% {
        opacity: 0;
        transform: translate(-20px) scale(.8);
        transform-origin: left center
    }
    60% {
        opacity: 1;
        transform: translate(3px) scale(1.03);
        transform-origin: left center
    }
    to {
        opacity: 1;
        transform: translate(0) scale(1);
        transform-origin: left center
    }
}

@keyframes popIn {
    0% {
        opacity: 1;
        transform: translate(0) scale(1);
        transform-origin: left center
    }
    to {
        opacity: 0;
        transform: translate(-20px) scale(.8);
        transform-origin: left center
    }
}

.chat-message-preview-enter {
    animation: popOut .4s cubic-bezier(.175, .885, .32, 1.275) forwards
}

.chat-message-preview-exit {
    animation: popIn .3s ease-in forwards
}

.chat-message-preview {
    font-family: DynaPuff, sans-serif;
    will-change: transform, opacity
}

.soapy-container.sidebar-chat {
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0
}

.sidebar-chat .MuiTextField-root,
.sidebar-chat .MuiOutlinedInput-root,
.sidebar-chat .MuiOutlinedInput-input,
.sidebar-chat .chat-message-container,
.sidebar-chat .chat-input-form,
.sidebar-chat .chat-admin-message {
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word
}

.sidebar-chat .soapy-container .chat-ui-container .chat-messages-area {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column
}

.soapy-container.sidebar-chat .MuiStack-root,
.soapy-container.sidebar-chat .MuiBox-root,
.soapy-container.sidebar-chat .MuiTextField-root,
.soapy-container.sidebar-chat .MuiOutlinedInput-root,
.soapy-container.sidebar-chat .MuiOutlinedInput-input {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box
}

.soapy-container.sidebar-chat .chat-message-text,
.soapy-container.sidebar-chat .chat-message-username,
.soapy-container.sidebar-chat .chat-admin-message-content {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%
}

.soapy-container.sidebar-chat .chat-input-field input,
.soapy-container.sidebar-chat .MuiOutlinedInput-input {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%
}

.h-full.column {
    height: 100%;
    display: flex;
    flex-direction: column
}

.sidebar-chat .soapy-container,
.sidebar-chat .soapy-container .chat-ui-container {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden
}

.sidebar-container,
.sidebar-container *,
.chat-ui-container,
.chat-ui-container *,
.chat-messages-area,
.chat-messages-area *,
.chat-message,
.chat-message * {
    -webkit-user-select: text !important;
    user-select: text !important
}

.chat-ui-container button,
.chat-ui-container .username-element,
.chat-ui-container .chat-level-badge,
.chat-ui-container .chat-timestamp,
.chat-ui-container .chat-user-modal,
.chat-ui-container .chat-timeout-modal,
.chat-ui-container .chat-help-modal,
.chat-ui-container .chat-cosmetics-container,
.chat-ui-container .social-button,
.chat-ui-container .chat-footer-icon-button,
.chat-ui-container .chat-input-emoji-button {
    -webkit-user-select: none !important;
    user-select: none !important
}

.game-mode-button {
    position: relative;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #272935;
    color: #a1a5ba;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    min-width: 80px;
    text-align: center
}

.game-mode-button.active {
    background: #272935;
    color: #fff;
    position: relative;
    z-index: 1
}

.game-mode-button.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(to bottom, #f97316, #ffc700);
    border-radius: 6px;
    z-index: -1
}

.battle-lobby-page {
    width: 100%;
    height: 100%;
    padding: 20px 20px 100px;
    box-sizing: border-box;
    overflow-y: auto;
    position: relative;
    background-color: var(--color-background)
}

.battles-header {
    width: 100%;
    margin-bottom: 24px
}

.battles-header__main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: clamp(12px, 2.5vw, 16px);
    padding-top: 16px
}

.battles-header-create-btn {
    background: #ffc700 !important;
    color: #000 !important;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: clamp(12px, 2vw, 14px);
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    font-family: DynaPuff, sans-serif
}

.battles-header-create-btn:hover:not(:disabled) {
    background: #e6b800 !important;
    transform: translateY(-1px)
}

.battles-header-create-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none
}

.battles-title {
    flex: 0 0 auto
}

.battles-title__header {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 8px)
}

.battles-title__heading {
    margin: 0;
    font-size: clamp(14px, 3vw, 32px);
    font-weight: 700;
    color: #ffc700;
    font-family: DynaPuff, sans-serif;
    text-shadow: -1px -1px 0 #383943, 0 -1px 0 #383943, 1px -1px 0 #383943, -1px 1px 0 #ef4444, 0 1px 0 #ef4444, 1px 1px 0 #ef4444, -1px 0 0 #943e43, 1px 0 0 #943e43
}

.battles-title__countdown {
    font-size: clamp(12px, 2vw, 20px);
    font-weight: 700;
    color: #ca8a04;
    font-family: DynaPuff, sans-serif;
    margin-left: clamp(2px, .8vw, 4px)
}

.battles-title__countdown-text {
    font-size: clamp(8px, 1.2vw, 12px);
    font-weight: 500;
    color: #a78a00;
    opacity: .9;
    margin-left: clamp(1px, .4vw, 2px)
}

.battles-round-count {
    font-size: clamp(12px, 2vw, 20px);
    color: #ca8a04;
    font-family: DynaPuff, sans-serif;
    font-weight: 700
}

.battles-title__subtitle {
    margin: clamp(3px, 1vw, 5px) 0 0 0;
    font-size: clamp(8px, 1.2vw, 16px);
    color: var(--color-muted-foreground);
    font-family: DynaPuff, sans-serif
}

.battles-header__stats {
    display: flex;
    align-items: flex-start;
    gap: clamp(12px, 2.5vw, 32px);
    flex-shrink: 0
}

.battles-header__stats-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(2px, .8vw, 4px)
}

.battles-header__stats-value {
    font-size: clamp(12px, 1.8vw, 20px);
    font-weight: 700;
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.battles-header__stats-label {
    font-size: clamp(10px, 1.2vw, 16px);
    color: var(--color-muted-foreground);
    font-family: DynaPuff, sans-serif
}

.battles-pending-rewards {
    flex: 0 0 auto;
    text-align: center;
    font-family: DynaPuff, sans-serif
}

.battles-pending-rewards__title {
    font-size: 16px;
    color: #fff;
    margin-bottom: 5px
}

.battles-pending-rewards__list {
    font-size: 14px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center
}

.battles-pending-rewards__list--mobile {
    font-size: 12px;
    gap: 6px
}

.battles-pending-rewards__item--bronze {
    color: #cd7f32
}

.battles-pending-rewards__item--silver {
    color: silver
}

.battles-pending-rewards__item--gold {
    color: gold
}

.battles-user-stats {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: DynaPuff, sans-serif
}

.battles-user-stats__stat {
    text-align: center
}

.battles-user-stats__value {
    font-size: 20px;
    font-weight: 700;
    color: #fff
}

.battles-user-stats__label {
    font-size: 14px;
    color: #888
}

.battles-user-stats__value--animating {
    transition: all .3s ease
}

.battles-user-stats__value--increase {
    color: #10b981 !important;
    animation: pulseGreen .8s ease-out
}

.battles-user-stats__value--decrease {
    color: #ef4444 !important;
    animation: pulseRed .8s ease-out
}

@keyframes pulseGreen {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(16, 185, 129, 0)
    }
    20% {
        transform: scale(1.05);
        text-shadow: 0 0 8px rgba(16, 185, 129, .4)
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 12px rgba(16, 185, 129, .6)
    }
    to {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(16, 185, 129, 0)
    }
}

@keyframes pulseRed {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(239, 68, 68, 0)
    }
    20% {
        transform: scale(1.05);
        text-shadow: 0 0 8px rgba(239, 68, 68, .4)
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 12px rgba(239, 68, 68, .6)
    }
    to {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(239, 68, 68, 0)
    }
}

.battles-top-players {
    width: 100%;
    display: none;
    justify-content: space-around;
    gap: 15px;
    margin-bottom: 20px
}

.battles-top-player {
    flex: 1;
    border: 2px solid;
    border-radius: 16px;
    padding: 8px 24px;
    height: 40px;
    font-family: DynaPuff, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: -.02em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
    background-color: var(--color-background)
}

.battles-top-player__rank {
    font-size: 14px;
    font-weight: 400
}

.battles-top-player__level {
    display: flex;
    align-items: center;
    justify-content: center
}

.battles-top-player__level--mobile {
    display: none
}

.battles-top-player__level span:last-child {
    color: #e0e0e0
}

.battles-top-player__username {
    font-size: 14px;
    font-weight: 400;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
    text-align: center
}

.battles-top-player__points {
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 2px
}

.battles-top-player__points span:last-child {
    color: #e0e0e0
}

.battles-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0;
    box-sizing: border-box
}

.battles-grid__loading,
.battles-grid__error {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 16px
}

.battles-grid__error {
    color: #ef4444
}

.battles-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: #888
}

.battles-grid__empty h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px
}

.battles-grid__empty p {
    font-size: 14px;
    margin: 0
}

.battles-loader-card {
    width: 100%;
    text-decoration: none
}

.battles-loader-border {
    padding: 2px;
    border-radius: 14px
}

.battles-loader-body {
    background-color: #1a1b24;
    border-radius: 12px;
    height: 275px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    font-family: DynaPuff, sans-serif
}

.battles-loader-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
    align-items: center;
    justify-content: center
}

.battles-loader-rectangle {
    width: 100%;
    height: 100%;
    background-color: #1e202a;
    border-radius: 8px
}

.battles-loader-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    font-family: DynaPuff, sans-serif
}

.battles-card {
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    gap: 16px;
    min-height: 200px;
    width: 100%;
    box-sizing: border-box
}

.battles-card:hover {
    border-color: #3f3f46;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #0000004d
}

.battles-card__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.battles-card__header {
    border-bottom: 1px solid #27272a;
    padding-bottom: 8px
}

.battles-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    font-family: DynaPuff, sans-serif
}

.battles-card__stage {
    font-size: 12px;
    font-weight: 500;
    font-family: DynaPuff, sans-serif
}

.battles-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.battles-card__info-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px
}

.battles-card__info-label {
    color: #888
}

.battles-card__info-value {
    color: #fff;
    font-weight: 500
}

.battles-card__chart-placeholder {
    flex: 1;
    background: #0a0a0b;
    border: 1px solid #27272a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px
}

.battles-card__chart-placeholder-text {
    color: #666;
    text-align: center;
    font-size: 12px
}

.battles-card__chart-placeholder-text small {
    font-size: 10px;
    color: #555
}

.battles-card__join-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    font-size: 14px
}

.battles-card__join-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-1px)
}

.battles-card__status {
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    background: #27272a;
    color: #888
}

.battles-card__status--live {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff
}

.battles-card__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.battles-card__leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #27272a
}

.battles-card__leaderboard-header h4 {
    margin: 0;
    font-size: 14px;
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.battles-card__round-info {
    font-size: 11px;
    color: #10b981;
    font-weight: 500
}

.battles-card__leaderboard {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.battles-card__player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px
}

.battles-card__player-rank {
    color: #a0a0a0;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
    margin-right: 8px
}

.battles-card__player-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-right: 5px
}

.battles-card__player-name {
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0
}

.battles-card__player-points {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0
}

.battles-card-player-badge .level-badge {
    min-width: unset;
    width: 18px;
    height: 18px
}

.battles-card-player-badge .level-badge.level-badge-only {
    width: 16px;
    height: 16px
}

.battles-card-container {
    width: 100%;
    text-decoration: none
}

.battles-card-border {
    padding: 2px;
    border-radius: 14px;
    perspective: 1000px;
    transform-style: preserve-3d;
    cursor: pointer
}

.battles-card-container .battles-card-border {
    cursor: default
}

.battles-card-border--live {
    background: linear-gradient(to top, gold, #383943)
}

.battles-card-border--waiting {
    background: linear-gradient(to top, #22c55e, #383943)
}

.battles-card-body {
    background-color: #1a1b24;
    border-radius: 12px;
    transition: all .2s ease;
    position: relative;
    height: 275px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    font-family: DynaPuff, sans-serif
}

.battles-card-content {
    flex: 1;
    display: flex;
    overflow: hidden;
    box-sizing: border-box
}

.battles-card-content--live {
    flex-direction: row;
    padding: 0
}

.battles-card-content--waiting {
    flex-direction: column;
    padding: 0
}

.battles-card-live-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #1a1b24
}

.battles-card-chart-full {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: 6px;
    overflow: hidden
}

.battles-card-chart {
    flex: .55;
    position: relative;
    background-color: #101013;
    border-radius: 6px;
    overflow: visible;
    margin-right: 10px
}

.battles-card-chart-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 12px;
    text-align: center;
    flex-direction: column
}

.battles-card-chart-placeholder small {
    font-size: 10px;
    color: #555
}

.battles-card-scoreboard-overlay {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translate(-50%);
    width: 250px;
    height: calc(100% - 16px);
    background: transparent;
    border-radius: 6px;
    padding: 8px 8px 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none
}

.battles-card-scoreboard-overlay .battles-card-leaderboard-wrapper {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center
}

.battles-card-scoreboard-overlay .battles-card-spectate-btn {
    margin-top: auto
}

.battles-card-scoreboard-overlay .battles-round-count {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.battles-card-right {
    flex: .45;
    display: flex;
    flex-direction: column;
    color: #fff
}

.battles-card-prize {
    margin: 0;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: -1px -1px 0 #383943, 0px -1px 0 #383943, 1px -1px 0 #383943, -1px 0px 0 #2D4A3A, 1px 0px 0 #2D4A3A, -1px 1px 0 #22C55E, 0px 1px 0 #22C55E, 1px 1px 0 #22C55E
}

.battles-card-scoreboard-overlay .battles-card-prize {
    font-size: clamp(16px, 3vw, 22px);
    padding-bottom: 6px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: -1px -1px 0 #383943, 0px -1px 0 #383943, 1px -1px 0 #383943, -1px 0px 0 #2D4A3A, 1px 0px 0 #2D4A3A, -1px 1px 0 #22C55E, 0px 1px 0 #22C55E, 1px 1px 0 #22C55E
}

.battles-card-leaderboard {
    flex-grow: 1;
    overflow-y: auto;
    font-size: 12px
}

.battles-card-scoreboard-overlay .battles-card-leaderboard {
    font-size: 10px
}

.battles-card-player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px
}

.battles-card-scoreboard-overlay .battles-card-player {
    margin-bottom: 4px;
    padding: 2px 0
}

.battles-card-player-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    margin-right: 8px
}

.battles-card-scoreboard-overlay .battles-card-player-left {
    margin-right: 4px
}

.battles-card-player-rank {
    color: #a0a0a0;
    width: 20px;
    text-align: right;
    flex-shrink: 0;
    margin-right: 8px;
    font-size: 14px
}

.battles-card-scoreboard-overlay .battles-card-player-rank {
    width: 16px;
    font-size: 12px;
    margin-right: 4px
}

.battles-card-player-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-right: 5px
}

.battles-card-scoreboard-overlay .battles-card-player-badge {
    width: 20px;
    height: 20px;
    margin-right: 3px
}

.battles-card-player-name {
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    font-size: 14px
}

.battles-card-scoreboard-overlay .battles-card-player-name {
    font-size: 12px;
    font-weight: 400
}

.battles-card-player-points {
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px
}

.battles-card-scoreboard-overlay .battles-card-player-points {
    font-size: 12px
}

.battles-card-player-badge .level-badge {
    min-width: unset;
    width: 24px;
    height: 24px
}

.battles-card-player-badge .level-badge.level-badge-only {
    width: 24px;
    height: 24px
}

.battles-card-scoreboard-overlay .battles-card-player-badge .level-badge,
.battles-card-scoreboard-overlay .battles-card-player-badge .level-badge.level-badge-only {
    width: 20px;
    height: 20px
}

.battles-card-waiting {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    background-color: #101013;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    width: 100%;
    height: 100%
}

.battles-card-waiting-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #15161d99, #1e202a99);
    z-index: 1;
    border-radius: 12px
}

.battles-card-waiting-content {
    z-index: 2;
    color: #fff
}

.battles-card-waiting-title {
    font-size: clamp(14px, 2.5vw, 18px);
    margin-bottom: clamp(3px, 1vw, 5px)
}

.battles-card-waiting-amount {
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    text-shadow: -1px -1px 0 #383943, 0px -1px 0 #383943, 1px -1px 0 #383943, -1px 0px 0 #2D4A3A, 1px 0px 0 #2D4A3A, -1px 1px 0 #22C55E, 0px 1px 0 #22C55E, 1px 1px 0 #22C55E
}

.battles-card-join-btn {
    width: 100%;
    height: 48px;
    margin-top: 20px;
    padding: 8px;
    border-radius: 12px;
    border-top: 1.5px solid #FFFFFF66;
    background: linear-gradient(180deg, #16a34a, #4ade80);
    box-shadow: 0 8px #166534;
    color: #052e16;
    font-weight: 700;
    font-size: clamp(14px, 2.5vw, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    border: none;
    text-decoration: none
}

.battles-card-join-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #16a34a, #4ade80);
    transform: translateY(-2px);
    box-shadow: 0 10px #166534
}

.battles-card-join-btn:active:not(:disabled) {
    background: linear-gradient(180deg, #15803d, #22c55e);
    transform: translateY(2px);
    box-shadow: 0 6px #166534
}

.battles-card-join-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 8px #166534
}

.battles-card-spectate-btn {
    width: 100%;
    height: 48px;
    margin-top: 20px;
    padding: 8px;
    border-radius: 12px;
    border-top: 1.5px solid #FFFFFF66;
    background: linear-gradient(180deg, gold, #ffed4e);
    box-shadow: 0 8px #b8860b;
    color: #8b4513;
    font-weight: 700;
    font-size: clamp(14px, 2.5vw, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    border: none;
    text-decoration: none
}

.battles-card-spectate-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, gold, #ffed4e);
    transform: translateY(-2px);
    box-shadow: 0 10px #b8860b
}

.battles-card-spectate-btn:active:not(:disabled) {
    background: linear-gradient(180deg, #daa520, gold);
    transform: translateY(2px);
    box-shadow: 0 6px #b8860b
}

.battles-card-spectate-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 8px #b8860b
}

.battles-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    font-family: DynaPuff, sans-serif
}

.battles-card-players {
    display: flex;
    gap: 6px
}

.battles-card-player-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 1px 2px #0003
}

.battles-card-status-section {
    display: flex;
    align-items: center;
    gap: 8px
}

.battles-card-spectators {
    font-size: 12px;
    color: #fff;
    font-weight: 700
}

.battles-card-status {
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
    white-space: nowrap
}

.battles-card-status-dots {
    display: inline-block;
    margin-left: 2px
}

.battles-card-status-dot {
    display: inline-block;
    opacity: 0;
    animation: dotAccumulate 2s infinite
}

.battles-card-status-dot:nth-child(1) {
    animation-delay: 0s
}

.battles-card-status-dot:nth-child(2) {
    animation-delay: .5s
}

.battles-card-status-dot:nth-child(3) {
    animation-delay: 1s
}

@keyframes dotAccumulate {
    0%,
    24% {
        opacity: 0
    }
    25%,
    74% {
        opacity: 1
    }
    75%,
    to {
        opacity: 0
    }
}

.battle-page {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background)
}

.battle-content {
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: DynaPuff, sans-serif;
    flex: 1;
    border-radius: 16px;
    background: linear-gradient(to top, #22c55e, #383943);
    padding: 2px;
    overflow: hidden;
    margin-bottom: 8px
}

.battle-content-inner {
    width: 100%;
    height: 100%;
    background-color: var(--color-background);
    border-radius: 14px;
    overflow: hidden
}

.battle-content h2 {
    color: #ffc700;
    margin-bottom: 10px
}

.battle-content p {
    color: #888;
    font-size: 14px
}

.battle-chart-container {
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 0;
    flex: 1
}

.battle-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: none !important;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.battle-trade-controls-container {
    width: 100%;
    margin-top: 8px;
    flex-shrink: 0
}

@media (max-width: 768px) {
    .battle-page {
        padding: 16px;
        height: 100vh;
        display: flex;
        flex-direction: column
    }
    .battle-trade-controls-container {
        margin-top: 8px;
        flex-shrink: 0
    }
    .battle-content {
        border-radius: 12px;
        height: 40vh;
        max-height: 320px;
        min-height: 240px;
        flex: none
    }
    .battle-content-inner {
        border-radius: 10px
    }
    .battle-chart-container {
        border-radius: 12px
    }
}

@media (max-width: 480px) {
    .battle-page {
        padding: 12px;
        height: 100vh;
        display: flex;
        flex-direction: column
    }
    .battle-trade-controls-container {
        margin-top: 8px;
        flex-shrink: 0
    }
    .battle-content {
        border-radius: 12px;
        height: 35vh;
        max-height: 280px;
        min-height: 220px;
        flex: none
    }
    .battle-content-inner {
        border-radius: 10px
    }
    .battle-chart-container {
        border-radius: 12px
    }
}

@media (max-width: 768px) {
    .battles-header__main {
        gap: clamp(8px, 2vw, 16px);
        align-items: center
    }
    .battles-header-create-btn {
        order: 1;
        margin-top: 5px
    }
    .battles-user-stats {
        gap: 10px
    }
    .battles-top-players {
        gap: 8px
    }
    .battles-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }
    .battles-card {
        flex-direction: column;
        gap: 12px
    }
    .battles-card__right {
        flex: none
    }
    .battles-card__player {
        grid-template-columns: 20px 35px 1fr 45px 40px;
        gap: 6px;
        font-size: 10px
    }
    .battles-card-content--live {
        padding: 8px
    }
    .battles-card-chart {
        margin-right: 6px
    }
    .battles-card-prize {
        font-size: 14px
    }
    .battles-card-leaderboard {
        font-size: 11px
    }
}

@media (max-width: 480px) {
    .battle-lobby-page {
        padding: 15px
    }
    .battles-user-stats {
        gap: 10px
    }
    .battles-top-players {
        gap: 8px
    }
    .battles-card {
        padding: 12px
    }
    .battles-card__title {
        font-size: 16px
    }
    .battles-card__player {
        grid-template-columns: 18px 30px 1fr 40px 35px;
        gap: 4px;
        padding: 4px 6px
    }
    .battles-card-waiting-title {
        font-size: 16px
    }
    .battles-card-waiting-amount {
        font-size: 24px
    }
    .battles-card-join-btn,
    .battles-card-spectate-btn {
        font-size: 16px;
        height: 44px
    }
}

.battles-trade-controls {
    width: 100%;
    background-color: transparent;
    padding: 12px;
    border-radius: 8px;
    font-family: DynaPuff, sans-serif;
    font-size: 14px
}

.battles-trade-controls__row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 12px;
    gap: 12px
}

.battles-buy-controls {
    flex: 1;
    background-color: transparent;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--border, #383943);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden
}

.battles-buy-amount {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 6px 10px;
    min-width: 60px;
    text-align: left
}

.battles-buy-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto
}

.battles-sell-controls {
    flex: 1;
    background-color: transparent;
    padding: 6px;
    border-radius: 6px;
    border: 1px solid var(--border, #383943);
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden
}

.battles-sell-buttons {
    display: flex;
    gap: 4px
}

.battles-sell-slider-container {
    display: flex;
    align-items: center;
    flex-grow: 1;
    margin: 0 8px;
    min-width: 100px
}

.battles-sell-slider {
    width: 100%;
    height: 6px;
    background: #ef444433;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    accent-color: #EF4444
}

.battles-sell-slider::-webkit-slider-track {
    height: 6px;
    background: #ef444433;
    border-radius: 8px
}

.battles-sell-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    border-radius: 50%;
    cursor: pointer
}

.battles-sell-slider::-moz-range-track {
    height: 6px;
    background: #ef444433;
    border-radius: 8px;
    border: none
}

.battles-sell-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    border: none
}

.battles-sell-slider:disabled {
    opacity: .5;
    cursor: not-allowed
}

.battles-sell-percentage {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    padding: 6px 10px;
    min-width: 50px;
    text-align: right
}

.battles-control-button {
    background-color: #2a2d36;
    color: #a0a3af;
    border: none;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none
}

.battles-control-button:hover:not(:disabled) {
    background-color: #353941;
    color: #fff
}

.battles-control-button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.battles-control-button--clear {
    background-color: #1c1f26;
    color: #888
}

.battles-control-button--clear:hover:not(:disabled) {
    color: #ccc
}

.battles-control-button--special {
    background-color: #2a2d36;
    color: #a0a3af
}

.battles-control-button--special:hover:not(:disabled) {
    background-color: #353941
}

.battles-action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 8px
}

.battles-buy-button,
.battles-sell-button {
    flex: 1;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    padding: 14px 0;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: all .1s ease;
    -webkit-user-select: none;
    user-select: none;
    text-transform: uppercase
}

.battles-trade-controls .MuiButton-root {
    font-size: 21px !important
}

@media (max-width: 768px) {
    .battles-trade-controls .MuiButton-root {
        font-size: 21px !important
    }
}

@media (max-width: 480px) {
    .battles-trade-controls .MuiButton-root {
        font-size: 21px !important
    }
}

.battles-buy-button {
    background: linear-gradient(to bottom, #0ede70, #00c950);
    box-shadow: 0 6px #007a1f;
    margin-left: auto;
    max-width: 160px
}

.battles-buy-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #00c950, #00b040)
}

.battles-buy-button:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px #007a1f
}

.battles-sell-button {
    background: linear-gradient(to bottom, #e83b44, #d32f37);
    box-shadow: 0 6px #a01c23;
    max-width: 160px;
    margin-right: auto
}

.battles-sell-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #d32f37, #b82a30)
}

.battles-sell-button:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 2px #a01c23
}

.battles-buy-button:disabled,
.battles-sell-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none
}

.battles-balance-info {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
}

.battles-balance-label {
    margin-right: 4px
}

.battles-balance-value {
    color: #fff;
    font-weight: 600
}

.battles-position-label {
    margin-left: 8px;
    margin-right: 4px
}

.battles-position-value {
    color: #fff;
    font-weight: 600
}

@media (max-width: 768px) {
    .battles-trade-controls {
        padding: 16px
    }
    .battles-trade-controls__row {
        flex-direction: column;
        gap: 16px
    }
    .battles-buy-controls,
    .battles-sell-controls {
        flex-direction: column;
        gap: 12px;
        padding: 12px
    }
    .battles-buy-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-width: none;
        margin-left: 0
    }
    .battles-sell-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px
    }
    .battles-sell-slider-container {
        order: 0;
        margin: 8px 0
    }
    .battles-action-buttons {
        gap: 16px;
        justify-content: space-between;
        margin-top: 16px
    }
    .battles-buy-button,
    .battles-sell-button {
        font-size: 21px;
        padding: 16px 0;
        min-height: 48px
    }
    .battles-balance-info {
        margin-top: 16px;
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .battles-trade-controls {
        padding: 12px
    }
    .battles-trade-controls__row {
        gap: 12px
    }
    .battles-buy-controls,
    .battles-sell-controls {
        padding: 8px;
        gap: 8px
    }
    .battles-control-button {
        padding: 8px 12px;
        font-size: 12px;
        min-height: 36px;
        min-width: 50px
    }
    .battles-buy-amount,
    .battles-sell-percentage {
        font-size: 16px;
        padding: 8px 12px;
        min-height: 36px
    }
    .battles-buy-buttons,
    .battles-sell-buttons {
        gap: 6px
    }
    .battles-sell-slider-container {
        margin: 12px 0
    }
    .battles-action-buttons {
        gap: 12px;
        margin-top: 12px
    }
    .battles-buy-button,
    .battles-sell-button {
        font-size: 21px;
        padding: 14px 0;
        min-height: 48px
    }
    .battles-balance-info {
        margin-top: 12px;
        font-size: 13px;
        line-height: 1.4;
        flex-direction: column;
        align-items: center;
        gap: 4px
    }
    .battles-balance-label,
    .battles-balance-value,
    .battles-position-label,
    .battles-position-value {
        margin: 0
    }
}

.battle-waiting-screen {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #101013;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden
}

.battle-waiting-screen-border {
    background: linear-gradient(to top, #22c55e, #383943);
    padding: 2px;
    border-radius: 16px;
    height: 100%
}

.battle-waiting-screen__inner {
    width: 100%;
    height: 100%;
    background-color: #101013;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.battle-waiting-screen__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #00dc6466, #00c85000 50%);
    z-index: 1;
    border-radius: 14px
}

.battle-waiting-screen__content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    font-family: DynaPuff, sans-serif
}

.battle-waiting-screen__title {
    font-size: clamp(18px, 3.5vw, 28px);
    font-weight: 700;
    margin-bottom: clamp(6px, 1.5vw, 10px);
    color: #fff
}

.battle-waiting-screen__amount {
    font-size: clamp(24px, 6vw, 48px);
    font-weight: 700;
    margin-bottom: clamp(8px, 2vw, 15px);
    color: #00dc64;
    text-shadow: 0 0 20px rgba(0, 220, 100, .5)
}

.battle-waiting-screen__subtitle {
    font-size: clamp(12px, 2vw, 16px);
    color: #a0a0a0;
    font-weight: 500
}

@media (max-width: 768px) {
    .battle-waiting-screen__title {
        font-size: 22px;
        margin-bottom: 8px
    }
    .battle-waiting-screen__amount {
        font-size: 32px;
        margin-bottom: 12px
    }
    .battle-waiting-screen__subtitle {
        font-size: 14px
    }
}

@media (max-width: 480px) {
    .battle-waiting-screen__title {
        font-size: 18px;
        margin-bottom: 6px
    }
    .battle-waiting-screen__amount {
        font-size: 24px;
        margin-bottom: 8px
    }
    .battle-waiting-screen__subtitle {
        font-size: 12px
    }
}

.battle-in-round-screen {
    width: 100%;
    height: 400px;
    position: relative;
    background-color: #0a0a0b;
    border: 1px solid #27272A;
    border-radius: 16px;
    padding: 0;
    box-sizing: border-box;
    font-family: DynaPuff, sans-serif;
    margin: 20px 0;
    overflow: hidden
}

.battle-in-round-chart-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    margin: 0;
    padding: 0
}

.battle-in-round-chart-container>div {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden;
    border-radius: 16px
}

.battle-in-round-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 16px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: none !important;
    image-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.battle-in-round-chart-container * {
    box-sizing: border-box
}

.battle-in-round-leaderboard-simple {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.battle-in-round-player-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .8)
}

.battle-in-round-player-rank {
    color: #a0a0a0;
    font-weight: 700;
    min-width: 25px;
    text-align: left
}

.battle-in-round-player-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px
}

.battle-in-round-player-name {
    color: #fff;
    font-weight: 500;
    min-width: 80px
}

.battle-in-round-player-points {
    color: gold;
    font-weight: 700;
    text-align: right;
    min-width: 60px
}

@media (max-width: 768px) {
    .battle-in-round-screen {
        height: 300px
    }
    .battle-in-round-leaderboard-simple {
        top: 12px;
        right: 12px;
        gap: 6px
    }
    .battle-in-round-player-simple {
        font-size: 12px;
        gap: 6px
    }
    .battle-in-round-player-rank {
        min-width: 20px;
        font-size: 11px
    }
    .battle-in-round-player-badge {
        width: 16px;
        height: 16px
    }
    .battle-in-round-player-name {
        min-width: 60px;
        font-size: 11px
    }
    .battle-in-round-player-points {
        min-width: 50px;
        font-size: 11px
    }
}

@media (max-width: 480px) {
    .battle-in-round-leaderboard-simple {
        top: 8px;
        right: 8px;
        gap: 4px
    }
    .battle-in-round-player-simple {
        font-size: 11px;
        gap: 4px
    }
    .battle-in-round-player-rank {
        min-width: 18px;
        font-size: 10px
    }
    .battle-in-round-player-badge {
        width: 14px;
        height: 14px
    }
    .battle-in-round-player-name {
        min-width: 50px;
        font-size: 10px
    }
    .battle-in-round-player-points {
        min-width: 45px;
        font-size: 10px
    }
}

.battle-lobby-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 40px 0;
    padding: 20px
}

.battle-lobby-action-btn {
    padding: 15px 30px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all .3s ease;
    min-width: 150px
}

.battle-lobby-action-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.battle-lobby-action-btn--join {
    position: fixed;
    bottom: 30px;
    left: var(--sidebar-width, 320px);
    right: 0;
    margin: 0 auto;
    width: 302px;
    height: 60px;
    padding: 0;
    border-radius: 16px;
    border-top: 1.5px solid #FFFFFF66;
    background: linear-gradient(180deg, #ca8a04, #facc15);
    box-shadow: 0 12px #a16207;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: left .45s ease-in-out
}

.battle-lobby-action-btn--join:hover:not(:disabled) {
    background: linear-gradient(180deg, #b8860b, #eab308);
    transform: translateY(-2px);
    box-shadow: 0 14px #a16207
}

.battle-lobby-action-btn--join:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 8px #a16207
}

.battle-lobby-action-btn--create {
    background: linear-gradient(135deg, #2196f3, #1976d2);
    color: #fff
}

.battle-lobby-action-btn--create:hover:not(:disabled) {
    background: linear-gradient(135deg, #1976d2, #1565c0);
    transform: translateY(-2px)
}

.battle-lobby-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: #00000080;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 99999
}

.battle-lobby-modal {
    position: relative;
    background-color: var(--color-background);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 40px #00000080;
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100000;
    transform: translateZ(0);
    transition: all .3s ease-out
}

.battle-lobby-modal-drag-handle {
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none
}

.battle-lobby-modal-drag-handle:active {
    cursor: grabbing
}

.battle-lobby-modal-drag-indicator {
    justify-content: center;
    padding: 12px 0 8px
}

.battle-lobby-modal-drag-indicator-bar {
    width: 40px;
    height: 4px;
    background-color: var(--color-muted-foreground);
    border-radius: 2px;
    transition: background-color .2s ease
}

.battle-lobby-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    margin-bottom: 0
}

@media (max-width: 480px) {
    .battle-lobby-modal-header {
        justify-content: center
    }
    .battle-lobby-modal-close {
        display: none
    }
}

.battle-lobby-modal-close {
    background: none;
    border: none;
    color: var(--color-muted-foreground);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all .2s ease
}

.battle-lobby-modal-close:hover {
    color: var(--color-foreground);
    background-color: var(--color-muted)
}

.battle-lobby-modal-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1
}

.battle-create-desktop-modal {
    padding: 16px 20px;
    width: 100%
}

.battle-lobby-row {
    margin-bottom: 15px;
    padding: 10px 0;
    color: var(--color-foreground);
    text-align: center
}

.battle-lobby-prize-row {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.battle-lobby-prize-value {
    color: var(--color-success);
    font-size: 28px;
    font-weight: 700
}

.battle-lobby-rounds-row>div {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    text-align: left
}

.battle-lobby-player-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.battle-lobby-card {
    background: var(--color-card);
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border)
}

.battle-lobby-wager-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-foreground);
    font-size: 16px
}

.battle-lobby-increment-buttons {
    display: flex;
    gap: 5px
}

.battle-lobby-increment-buttons button {
    padding: 8px 12px;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 14px;
    transition: all .2s ease
}

.battle-lobby-increment-buttons button.small {
    padding: 6px 8px;
    font-size: 12px
}

.battle-lobby-increment-buttons button:hover {
    background: var(--color-hover);
    border-color: var(--color-primary)
}

.battle-lobby-currency-dropdown {
    position: relative
}

.battle-lobby-currency-select {
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    font-size: 16px;
    cursor: pointer;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    transition: all .2s ease
}

.battle-lobby-dropdown-arrow {
    width: 12px;
    height: 12px;
    margin-left: auto;
    color: var(--color-muted-foreground)
}

.battle-lobby-currency-select:hover {
    background: var(--color-muted);
    border-color: var(--color-primary)
}

.battle-lobby-currency-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    z-index: 1000;
    margin-top: 2px;
    box-shadow: 0 4px 12px #0000004d
}

.battle-lobby-currency-option {
    padding: 8px 12px;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all .2s ease
}

.battle-lobby-currency-icon {
    width: 16px;
    height: 16px
}

.battle-lobby-currency-option:hover {
    background: var(--color-hover)
}

.battle-lobby-currency-option:first-child {
    border-radius: 8px 8px 0 0
}

.battle-lobby-currency-option:last-child {
    border-radius: 0 0 8px 8px
}

.battle-lobby-player-buttons {
    display: flex;
    gap: 10px
}

.battle-lobby-player-buttons button {
    width: 30px;
    height: 30px;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease
}

.battle-lobby-player-buttons button:hover {
    background: var(--color-hover);
    border-color: var(--color-primary)
}

.battle-lobby-rounds-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: space-between
}

.battle-lobby-round-btn {
    flex: 1;
    padding: 10px;
    background: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-foreground);
    cursor: pointer;
    font-size: 16px;
    transition: all .2s ease
}

.battle-lobby-round-btn:hover {
    background: var(--color-hover);
    border-color: var(--color-primary)
}

.battle-lobby-round-btn.active {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary)
}

.battle-lobby-create-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    color: var(--color-primary-foreground);
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
    box-shadow: 0 4px 12px #ffc70033
}

.battle-lobby-create-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #ffc7004d
}

.battle-lobby-create-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px #ffc70033
}

.battle-lobby-create-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 12px #ffc7001a
}

.battle-lobby-error-row {
    background: #ff3b5d1a;
    border: 1px solid rgba(255, 59, 93, .3);
    border-radius: 8px;
    padding: 12px;
    color: var(--color-destructive);
    text-align: center;
    font-size: 14px
}

@media (max-width: 440px) {
    .battle-lobby-card {
        flex-wrap: wrap;
        gap: 15px
    }
    .battle-lobby-wager-input {
        flex: 1;
        min-width: 0
    }
    .battle-lobby-increment-buttons {
        flex-shrink: 0
    }
    .battle-lobby-currency-dropdown {
        width: 100%;
        order: 3
    }
    .battle-lobby-currency-select {
        width: 100%;
        justify-content: center
    }
}

.battle-lobby-modal h3 {
    color: #fff;
    margin: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: DynaPuff, sans-serif
}

.battle-lobby-form {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.battle-lobby-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.battle-lobby-form-field label {
    color: #ccc;
    font-weight: 700;
    font-size: 14px
}

.battle-lobby-form-field select,
.battle-lobby-form-field input {
    padding: 10px;
    border: 1px solid #444;
    border-radius: 5px;
    background: #2a2a2a;
    color: #fff;
    font-size: 16px
}

.battle-lobby-form-field select:focus,
.battle-lobby-form-field input:focus {
    outline: none;
    border-color: #2196f3
}

.battle-lobby-modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px
}

.battle-lobby-modal-btn {
    flex: 1;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .3s ease
}

.battle-lobby-modal-btn:disabled {
    opacity: .6;
    cursor: not-allowed
}

.battle-lobby-modal-btn--cancel {
    background: #666;
    color: #fff
}

.battle-lobby-modal-btn--cancel:hover:not(:disabled) {
    background: #555
}

.battle-lobby-modal-btn--create {
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: #fff
}

.battle-lobby-modal-btn--create:hover:not(:disabled) {
    background: linear-gradient(135deg, #45a049, #3d8b40)
}

.battle-lobby-error {
    background: #dc2626;
    color: #fff;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    text-align: center;
    font-weight: 500;
    animation: fadeIn .3s ease
}

.battle-lobby-success {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #032e15;
    color: #b9f8cf;
    border: 1px solid #0D542B;
    padding: 15px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    z-index: 1000;
    box-shadow: 0 4px 12px #0000004d;
    animation: slideInFromLeft .3s ease
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translate(-100%)
    }
    to {
        opacity: 1;
        transform: translate(0)
    }
}

@media (max-width: 768px) {
    .battle-lobby-actions {
        margin: 20px 0;
        padding: 15px
    }
    .battle-lobby-action-btn {
        padding: 12px 24px;
        font-size: 16px;
        min-width: 120px
    }
}

@media (max-width: 480px) {
    .battle-lobby-actions {
        flex-direction: column;
        gap: 15px
    }
    .battle-lobby-action-btn {
        width: 100%;
        min-width: auto
    }
}

.battle-scoreboard {
    width: 100%;
    background-color: #18181b;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 12px;
    margin: 15px 0;
    font-family: DynaPuff, sans-serif
}

.battle-scoreboard__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #27272a
}

.battle-scoreboard__header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    font-weight: 700
}

.battle-scoreboard__player-count {
    font-size: 12px;
    color: #888;
    font-weight: 500
}

.battle-scoreboard__empty {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 14px
}

.battle-scoreboard__list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.battle-scoreboard__player {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background-color: #1c1f26;
    border-radius: 8px;
    transition: background-color .2s ease
}

.battle-scoreboard__player:hover {
    background-color: #22252c
}

.battle-scoreboard__rank {
    color: #ffc700;
    font-weight: 700;
    font-size: 14px;
    min-width: 30px;
    text-align: left
}

.battle-scoreboard__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px
}

.battle-scoreboard__username {
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 8px
}

.battle-scoreboard__points {
    color: #10b981;
    font-weight: 700;
    font-size: 14px;
    text-align: right;
    min-width: 80px
}

@media (max-width: 768px) {
    .battle-scoreboard__header h3 {
        font-size: 16px
    }
    .battle-scoreboard__player {
        padding: 6px 10px
    }
    .battle-scoreboard__rank {
        font-size: 12px;
        min-width: 25px
    }
    .battle-scoreboard__username {
        font-size: 12px
    }
    .battle-scoreboard__points {
        font-size: 12px;
        min-width: 70px
    }
}

@media (max-width: 480px) {
    .battle-scoreboard__header {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start
    }
    .battle-scoreboard__player {
        padding: 6px 8px
    }
    .battle-scoreboard__rank {
        font-size: 11px;
        min-width: 22px
    }
    .battle-scoreboard__username {
        font-size: 11px
    }
    .battle-scoreboard__points {
        font-size: 11px;
        min-width: 60px
    }
}

.battle-loading {
    text-align: center;
    padding: 60px 20px;
    color: #888
}

.battle-loading h2 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: DynaPuff, sans-serif
}

.battle-loading p {
    font-size: 14px;
    margin: 0
}

.battle-error {
    text-align: center;
    padding: 60px 20px;
    color: #ef4444
}

.battle-error h2 {
    color: #ef4444;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: DynaPuff, sans-serif
}

.battle-error p {
    font-size: 14px;
    margin: 0
}

.battle-not-found {
    text-align: center;
    padding: 60px 20px;
    color: #888
}

.battle-not-found h2 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: DynaPuff, sans-serif
}

.battle-not-found p {
    font-size: 14px;
    margin-bottom: 20px
}

.battle-back-button {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    font-family: DynaPuff, sans-serif
}

.battle-back-button:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-1px)
}

.battle-completed {
    text-align: center;
    padding: 60px 20px;
    color: #888
}

.battle-completed h2 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 24px;
    font-family: DynaPuff, sans-serif
}

.battle-completed p {
    font-size: 14px;
    margin: 0
}

.battle-spectator-controls {
    background: #27272acc;
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80px
}

.spectator-message {
    text-align: center;
    color: #888;
    font-family: DynaPuff, sans-serif
}

.spectator-message p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #a1a5ba
}

.join-battle-action-button {
    width: 302px;
    height: 60px;
    padding: 0;
    border-radius: 12px;
    border: none;
    border-top: 1.5px solid #FFFFFF66;
    background: linear-gradient(180deg, #ca8a04, #facc15);
    box-shadow: 0 12px #a16207;
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .1s ease;
    font-family: DynaPuff, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    text-transform: uppercase
}

.join-battle-action-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #b8860b, #eab308);
    transform: translateY(-2px);
    box-shadow: 0 14px #a16207
}

.join-battle-action-button:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 8px #a16207
}

.join-battle-action-button:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none
}

@media (max-width: 768px) {
    .battle-spectator-controls {
        padding: 16px;
        min-height: 70px
    }
    .spectator-message p {
        font-size: 12px;
        margin-bottom: 10px
    }
    .join-battle-action-button {
        width: 290px;
        height: 55px;
        font-size: 22px
    }
}

@media (max-width: 480px) {
    .battle-loading,
    .battle-error,
    .battle-not-found,
    .battle-completed {
        padding: 40px 16px
    }
    .battle-loading h2,
    .battle-error h2,
    .battle-not-found h2,
    .battle-completed h2 {
        font-size: 20px
    }
    .battle-spectator-controls {
        padding: 12px;
        min-height: 60px
    }
    .join-battle-action-button {
        width: 280px;
        height: 50px;
        font-size: 20px
    }
}

@media (max-width: 768px) {
    .battles-top-player {
        padding: 8px 16px;
        gap: 6px;
        height: 36px
    }
    .battles-grid {
        grid-template-columns: 1fr;
        gap: 15px
    }
    .battles-card {
        flex-direction: column;
        gap: 12px;
        min-height: auto
    }
    .battles-card-content--live {
        padding: 0
    }
    .battles-card-chart {
        margin-right: 6px
    }
    .battles-trade-controls {
        padding: 10px;
        font-size: 12px
    }
    .battle-waiting-screen-border {
        margin: 8px 0
    }
    .battle-in-round-screen {
        height: 350px;
        margin: 15px 0
    }
    .battle-scoreboard {
        padding: 12px;
        margin: 15px 0
    }
}

.battles-card-waiting--sol {
    background-image: url(/battle/room_bg_sol.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.battles-card-waiting--free {
    background-image: url(/battle/room_bg_free.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.battles-card-live-container--sol {
    position: relative
}

.battles-card-live-container--sol:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/battle/room_bg_sol.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .4;
    z-index: 0
}

.battles-card-live-container--free {
    position: relative
}

.battles-card-live-container--free:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/battle/room_bg_free.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .4;
    z-index: 0
}

@media (max-width: 768px) {
    .battles-card-waiting--sol,
    .battles-card-waiting--free {
        background-size: 100% auto;
        background-position: center
    }
}

@media (max-width: 480px) {
    .battles-card-waiting--sol,
    .battles-card-waiting--free {
        background-size: 100% auto;
        background-position: center
    }
}

.admin-button {
    background-color: #18181b;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 4px 8px;
    color: #9f9fa9;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 50px;
    max-width: 80px;
    flex-shrink: 0;
    white-space: nowrap
}

.admin-button:hover {
    background-color: #333;
    border-color: #666;
    color: #fff
}

.admin-button--active {
    background-color: #f44 !important;
    color: #fff !important
}

.admin-button--active:hover {
    background-color: #f44 !important;
    border-color: #666 !important;
    color: #fff !important
}

.admin-button__text {
    display: inline
}

.admin-button__icon {
    display: none
}

@media (max-width: 768px) {
    .admin-button__text {
        display: none
    }
    .admin-button__icon {
        display: inline
    }
}

.admin-modal-container {
    min-height: 600px;
    width: 100%
}

.admin-modal-tabs {
    display: flex;
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 4px
}

.admin-modal-tab {
    padding: 12px 16px;
    background-color: transparent;
    color: #ccc;
    border: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    transition: all .2s ease;
    border-bottom: 2px solid transparent
}

.admin-modal-tab:hover:not(.admin-modal-tab--active) {
    background-color: #222;
    color: #fff
}

.admin-modal-tab--active {
    background-color: #444;
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid #4e67f7
}

.admin-modal-content {
    flex: 1;
    padding: 0 4px
}

.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000c;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px
}

.admin-modal-content {
    background-color: #09090b;
    border: 1px solid #27272A;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #27272A;
    background-color: #0f0f0f
}

.admin-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0
}

.admin-modal-close {
    background: none;
    border: none;
    color: #9f9fa9;
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color .2s ease
}

.admin-modal-close:hover {
    color: #fff
}

.admin-modal-body {
    padding: 24px
}

.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #27272A;
    margin-bottom: 24px
}

.admin-tab {
    background: none;
    border: none;
    padding: 12px 16px;
    color: #9f9fa9;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s ease;
    font-size: 14px;
    font-weight: 500
}

.admin-tab:hover {
    color: #fff;
    background-color: #18181b
}

.admin-tab.active {
    color: #fff;
    border-bottom-color: #dc2626
}

.admin-section {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px
}

.admin-section-header {
    margin-bottom: 16px;
    border-bottom: 1px solid #333;
    padding-bottom: 12px
}

.admin-section-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0
}

.admin-section-description {
    color: #9f9fa9;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.admin-form-label {
    color: #ccc;
    font-size: .9rem;
    font-weight: 500
}

.admin-form-input {
    background-color: #222;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    transition: border-color .2s ease
}

.admin-form-input:focus {
    outline: none;
    border-color: #4e67f7;
    box-shadow: 0 0 0 2px #4e67f71a
}

.admin-form-input::placeholder {
    color: #666
}

.admin-button-primary {
    background-color: #4e67f7;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    align-self: flex-start
}

.admin-button-primary:hover:not(:disabled) {
    background-color: #6e87ff;
    transform: translateY(-1px)
}

.admin-button-primary:disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed;
    transform: none
}

.admin-button-secondary {
    background-color: transparent;
    color: #4e67f7;
    border: 1px solid #4e67f7;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease
}

.admin-button-secondary:hover {
    background-color: #4e67f7;
    color: #fff
}

.admin-button-danger {
    background-color: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    align-self: flex-start
}

.admin-button-danger:hover:not(:disabled) {
    background-color: #ef4444;
    transform: translateY(-1px)
}

.admin-button-danger:disabled {
    background-color: #333;
    color: #666;
    cursor: not-allowed;
    transform: none
}

.admin-warning {
    background-color: #422006;
    border: 1px solid #d97706;
    border-radius: 4px;
    padding: 12px;
    color: #fbbf24;
    font-size: 14px;
    margin-bottom: 16px
}

.admin-error {
    background-color: #450a0a;
    border: 1px solid #dc2626;
    border-radius: 4px;
    padding: 12px;
    color: #f87171;
    font-size: 14px;
    margin-bottom: 16px
}

.admin-success {
    background-color: #052e16;
    border: 1px solid #16a34a;
    border-radius: 4px;
    padding: 12px;
    color: #4ade80;
    font-size: 14px;
    margin-bottom: 16px
}

.admin-result-box {
    background-color: #0f1419;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 16px;
    margin-top: 16px;
    color: #ccc;
    line-height: 1.5
}

.admin-result-box strong {
    color: #fff
}

.admin-success-message {
    background-color: #22c55e1a;
    border: 1px solid #22c55e;
    color: #22c55e;
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 14px
}

.admin-error-message {
    background-color: #ef44441a;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 14px
}

.admin-table-container {
    margin-top: 16px;
    border: 1px solid #333;
    border-radius: 6px;
    overflow: hidden
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1a1a1a
}

.admin-table th {
    background-color: #2a2a2a;
    color: #fff;
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid #333
}

.admin-table td {
    padding: 10px 8px;
    color: #ccc;
    font-size: 13px;
    border-bottom: 1px solid #222
}

.admin-table tr:last-child td {
    border-bottom: none
}

.admin-table tr:hover {
    background-color: #222
}

.admin-table-small-text {
    font-size: 11px;
    font-family: monospace;
    color: #888;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@media (max-width: 768px) {
    .admin-modal {
        padding: 10px
    }
    .admin-modal-content {
        max-height: 95vh
    }
    .admin-modal-header {
        padding: 16px 20px
    }
    .admin-modal-body {
        padding: 20px
    }
    .admin-tabs {
        flex-wrap: wrap
    }
    .admin-tab {
        padding: 10px 14px;
        font-size: 13px
    }
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px
}

.admin-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap
}

.admin-button-ghost {
    background: none;
    border: 1px solid #444;
    color: #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease
}

.admin-button-ghost:hover {
    background-color: #333;
    border-color: #666;
    color: #fff
}

.admin-count-badge {
    font-size: 12px;
    color: #888;
    margin-left: 8px;
    font-weight: 400
}

.admin-code-display {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 12px;
    font-family: monospace;
    font-size: 13px;
    overflow-x: auto;
    margin-top: 8px
}

.admin-code-line {
    padding: 4px 0;
    border-bottom: 1px solid #333;
    color: #ccc
}

.admin-code-line:last-child {
    border-bottom: none
}

.admin-codes-list {
    max-height: 300px;
    overflow-y: auto;
    background-color: #222;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 12px
}

.admin-code-item {
    padding: 6px;
    border-bottom: 1px solid #444;
    font-family: monospace;
    font-size: 13px;
    color: #ccc
}

.admin-code-item:last-child {
    border-bottom: none
}

.admin-tab-content {
    padding: 20px
}

.admin-tab-title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 24px;
    border-bottom: 2px solid #444;
    padding-bottom: 12px
}

.admin-result-title {
    color: #4ade80;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px
}

.admin-loading,
.admin-empty {
    text-align: center;
    padding: 20px;
    color: #aaa;
    font-style: italic
}

.admin-tab-content {
    color: #fff
}

.admin-tab-header {
    margin-bottom: 24px;
    text-align: center
}

.admin-tab-header h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px
}

.admin-tab-header p {
    color: #9f9fa9;
    font-size: 14px;
    margin: 0
}

.admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #333;
    padding-bottom: 12px
}

.admin-section-header h4 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0
}

.admin-warning-badge {
    background-color: #dc2626;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px
}

.admin-section-content {
    padding: 0
}

.admin-warning-box {
    background-color: #422006;
    border: 1px solid #d97706;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    color: #fbbf24;
    font-size: 14px;
    line-height: 1.5
}

.admin-warning-box p {
    margin: 0 0 12px
}

.admin-warning-box p:last-child {
    margin-bottom: 0
}

.admin-warning-box ul {
    margin: 12px 0;
    padding-left: 20px
}

.admin-warning-box li {
    margin-bottom: 4px
}

.admin-confirmation-dialog {
    background-color: #3a1818;
    border: 1px solid #dc2626;
    border-radius: 8px;
    padding: 20px;
    margin-top: 16px
}

.admin-confirmation-title {
    color: #f77;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px
}

.admin-confirmation-message {
    color: #f77;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px
}

.admin-confirmation-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.admin-result {
    margin-top: 16px;
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5
}

.admin-result-success {
    background-color: #22c55e1a;
    border: 1px solid #22c55e;
    color: #22c55e
}

.admin-result-error {
    background-color: #ef44441a;
    border: 1px solid #ef4444;
    color: #ef4444
}

.admin-confirmation-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000c;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000
}

.admin-confirmation-content {
    background-color: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    color: #fff
}

.admin-confirmation-content h4 {
    color: #ff6b6b;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 12px
}

.admin-confirmation-content p {
    color: #ccc;
    font-size: 14px;
    margin: 0 0 20px;
    line-height: 1.4
}

.admin-confirmation-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end
}

.admin-info-badge {
    background-color: #3498db;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase
}

.admin-checkbox {
    margin-right: 8px;
    transform: scale(1.2)
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.admin-field label {
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center
}

.admin-input {
    background-color: #222;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    transition: border-color .2s ease
}

.admin-input:focus {
    outline: none;
    border-color: #4e67f7;
    box-shadow: 0 0 0 2px #4e67f71a
}

.admin-input::placeholder {
    color: #666
}

.admin-button-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px
}

.admin-button-success {
    background-color: #27ae60;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease
}

.admin-button-success:hover:not(:disabled) {
    background-color: #2ecc71;
    transform: translateY(-1px)
}

.admin-button-success:disabled {
    background-color: #555;
    cursor: not-allowed
}

.admin-button-warning {
    background-color: #f39c12;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease
}

.admin-button-warning:hover:not(:disabled) {
    background-color: #e67e22;
    transform: translateY(-1px)
}

.admin-button-warning:disabled {
    background-color: #555;
    cursor: not-allowed
}

.admin-result.success {
    background-color: #22c55e1a;
    border: 1px solid #22c55e;
    color: #22c55e;
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5
}

.admin-result.error {
    background-color: #ef44441a;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 12px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5
}

.admin-clear-section {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 24px;
    text-align: center
}

.admin-result-details {
    margin-top: 12px
}

.admin-result-details summary {
    cursor: pointer;
    padding: 8px 0;
    color: #94a3b8;
    font-weight: 500;
    border-bottom: 1px solid #333;
    margin-bottom: 8px
}

.admin-result-details summary:hover {
    color: #fff
}

.admin-result-data {
    background-color: #0f172a;
    border: 1px solid #334155;
    border-radius: 6px;
    padding: 12px;
    overflow-x: auto;
    font-family: Courier New, monospace;
    font-size: 12px;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
    color: #e2e8f0
}

.admin-form textarea {
    resize: vertical;
    min-height: 80px;
    font-family: Courier New, monospace;
    font-size: 13px
}

.admin-warning-badge {
    background-color: #dc2626;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase
}

.admin-result-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px
}

.admin-piggybank-textarea {
    font-family: monospace;
    font-size: 13px
}

.admin-piggybank-help-text {
    color: #9f9fa9;
    font-size: 12px
}

.admin-piggybank-preview {
    background: #2a2a35;
    padding: 16px;
    border-radius: 6px;
    margin-bottom: 16px
}

.admin-piggybank-preview-summary {
    color: #4ade80;
    font-weight: 700;
    margin-bottom: 12px
}

.admin-piggybank-preview-list {
    max-height: 200px;
    overflow-y: auto;
    background-color: #1a1a1a;
    padding: 12px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    border: 1px solid #333
}

.admin-piggybank-preview-item {
    margin-bottom: 4px;
    color: #e2e8f0;
    padding: 2px 0
}

.admin-piggybank-warning {
    color: #ff6b6b;
    margin-bottom: 20px;
    font-weight: 500
}

.admin-piggybank-error-text,
.admin-piggybank-result-text {
    white-space: pre-line
}

.admin-piggybank-result-actions {
    margin-top: 16px
}

.admin-document-editor-description {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5
}

.admin-document-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.admin-document-editor-content {
    min-height: 80px
}

.admin-document-editor-submit {
    margin-top: 12px
}

.admin-document-editor-success {
    margin-top: 16px;
    display: none
}

.admin-document-editor-details {
    margin-top: 12px
}

.admin-document-editor-details-summary {
    cursor: pointer;
    padding: 6px 0
}

.admin-document-editor-data {
    background-color: #222;
    padding: 12px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 12px;
    max-height: 200px;
    overflow: auto
}

.admin-panel {
    background-color: #ff3b3026;
    border: 1px solid rgba(255, 59, 48, .3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px
}

.admin-panel-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 16px;
    color: #ff3b30;
    font-weight: 700
}

.admin-panel .admin-section {
    background-color: #0000004d;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px
}

.admin-panel .admin-section:last-child {
    margin-bottom: 0
}

.admin-panel .admin-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px
}

.admin-panel .admin-section-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700
}

.partner-badge {
    background-color: #00f5d426;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #00f5d4;
    display: flex;
    align-items: center
}

.partner-icon {
    margin-right: 6px
}

.admin-referral-button:disabled {
    cursor: not-allowed;
    opacity: .6
}

.admin-referral-button-primary {
    background-color: #00f5d4b3;
    color: #000;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease
}

.admin-referral-button-primary:hover:not(:disabled) {
    background-color: #00f5d4e6
}

.admin-referral-button-primary:disabled {
    background-color: #00f5d44d;
    color: #00000080
}

.admin-referral-button-danger {
    background-color: #ff3b30b3;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease
}

.admin-referral-button-danger:hover:not(:disabled) {
    background-color: #ff3b30e6
}

.admin-referral-button-danger:disabled {
    background-color: #ff3b304d;
    color: #ffffff80
}

.admin-referral-button-secondary {
    background-color: #ffffff1a;
    color: #fffc;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    margin-top: 0;
    width: auto
}

.admin-referral-button-secondary:hover:not(:disabled) {
    background-color: #fff3;
    border-color: #fff6
}

.admin-panel .admin-result {
    margin-top: 12px;
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500
}

.admin-panel .admin-result.success {
    background-color: #00f5d426;
    color: #00f5d4;
    border: 1px solid rgba(0, 245, 212, .3)
}

.admin-panel .admin-result.error {
    background-color: #ff3b3026;
    color: #ff3b30;
    border: 1px solid rgba(255, 59, 48, .3)
}

.partner-controls {
    width: 100%
}

.partner-type-selector {
    margin-bottom: 12px
}

.partner-label {
    color: #fffc;
    margin-bottom: 8px;
    display: block;
    font-size: 14px
}

.partner-type-buttons {
    display: flex;
    gap: 10px
}

.partner-type-button {
    background-color: #0000004d;
    color: #ffffffb3;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    flex: 1;
    transition: all .2s ease
}

.partner-type-button.active {
    background-color: #00f5d44d;
    color: #00f5d4;
    border-color: #00f5d4
}

.partner-type-button:hover:not(.active) {
    background-color: #ffffff1a;
    border-color: #fff6
}

.user-lookup-controls {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.current-user-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background-color: #0003;
    border-radius: 6px;
    font-size: 14px;
    flex-wrap: wrap
}

.current-user-label {
    color: #ffffffb3;
    font-weight: 500
}

.current-user-id {
    color: #00f5d4;
    font-weight: 700;
    font-family: monospace
}

.lookup-input-container {
    display: flex;
    gap: 8px;
    align-items: center
}

.lookup-input {
    flex: 1;
    padding: 8px 12px;
    background-color: #0000004d;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color .2s
}

.lookup-input:focus {
    border-color: #00f5d4
}

.lookup-input::placeholder {
    color: #ffffff80
}

.admin-modal-dialog,
.admin-modal-dialog * {
    -webkit-user-select: text !important;
    user-select: text !important
}

.game-mode-nav {
    display: flex;
    gap: 8px;
    background: transparent;
    border-radius: 8px;
    padding: 2px;
    margin-right: 16px;
    align-items: center
}

.game-mode-button {
    position: relative;
    width: 112px;
    height: 32px;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #272935;
    color: #a1a5ba;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.game-mode-button:hover {
    color: #fff;
    background: #ffffff1a
}

.game-mode-button.active {
    background: #272935;
    color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 0 0 var(--yellow500)
}

.game-mode-button.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(to top, #ffc700, #f97316);
    border-radius: 6px;
    z-index: -1
}

.game-mode-button.active:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #272935;
    border-radius: 6px;
    z-index: -1
}

.game-mode-button__emoji {
    filter: grayscale(100%) brightness(.5);
    transition: filter .2s ease
}

.game-mode-button.active .game-mode-button__emoji {
    filter: none
}

.game-mode-nav .game-mode-button:first-child {
    margin-right: 0
}

.game-mode-nav .game-mode-button:last-child {
    margin-left: 0
}

@media (max-width: 768px) {
    .game-mode-nav {
        margin-right: 8px
    }
    .game-mode-button {
        padding: 6px 12px;
        font-size: .8125rem;
        min-width: 70px
    }
}

@media (max-width: 480px) {
    .game-mode-nav {
        margin-right: 4px
    }
    .game-mode-button {
        padding: 5px 10px;
        font-size: .75rem;
        min-width: 60px
    }
}

.game-history-container {
    width: 100%;
    margin: 0 auto;
    background-color: transparent;
    color: #fff;
    position: relative;
    min-height: 90px;
    overflow-y: hidden;
    overflow-x: hidden;
    isolation: isolate
}

.game-stats-section {
    margin-bottom: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2
}

.gradient-overlay-left {
    position: absolute;
    top: 4px;
    left: 0;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: linear-gradient(to right, #15161d 70%, #15161d00);
    z-index: 1;
    pointer-events: none
}

.gradient-overlay-edge {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 30px;
    height: calc(100% - 8px);
    background: transparent;
    z-index: 1;
    pointer-events: none;
    display: none
}

.game-stats {
    color: #fff;
    position: relative
}

.game-stats__title {
    white-space: nowrap
}

.game-stats__title-text {
    font-size: 16px !important;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 380px
}

.game-stats__badges {
    display: flex;
    gap: 0px;
    margin-top: 2px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start
}

.game-stats__badge {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 0;
    margin-right: 0
}

.game-stats__badge-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px
}

.game-stats__badge-image {
    width: 36px !important;
    height: 36px !important
}

.game-stats__badge-label {
    position: absolute;
    font-weight: 700;
    font-size: 20px !important;
    color: #fff
}

.game-stats__badge-label--2x {
    color: #fff;
    font-size: 20px !important
}

.game-stats__badge-label--10x {
    color: #fef08a;
    font-size: 18px !important
}

.game-stats__badge-label--50x {
    color: #ffc700;
    font-size: 16px !important
}

.game-stats__badge-count {
    margin-left: 8px;
    font-weight: 400;
    font-size: 24px !important;
    color: #fff;
    min-width: auto
}

.animated-number {
    display: inline-block;
    min-width: 2em;
    overflow: hidden;
    position: relative;
    height: 1.2em
}

@media (max-width: 768px) {
    .game-history-container {
        min-height: 70px
    }
    .game-stats-section {
        width: 140px
    }
    .gradient-overlay-left {
        width: 400px;
        background: linear-gradient(to right, #15161d 70%, #15161d00)
    }
    .gradient-overlay-edge {
        display: block;
        left: 160px;
        width: 50px
    }
    .game-stats__title {
        white-space: normal
    }
    .game-stats__title-text {
        font-size: 12px !important;
        line-height: 1.1;
        margin-bottom: 4px;
        max-width: 140px
    }
    .game-stats__badges {
        gap: 0;
        flex-wrap: nowrap
    }
    .game-stats__badge {
        margin-right: -4px
    }
    .game-stats__badge-icon {
        min-width: 28px
    }
    .game-stats__badge-image {
        width: 28px !important;
        height: 28px !important
    }
    .game-stats__badge-label,
    .game-stats__badge-label--2x,
    .game-stats__badge-label--10x {
        font-size: 12px !important
    }
    .game-stats__badge-label--50x {
        font-size: 11px !important
    }
    .game-stats__badge-count {
        margin-left: 4px;
        font-size: 16px !important;
        min-width: 20px
    }
    .animated-number {
        min-width: 1.5em;
        height: 1.1em
    }
}

.provably-fair-container {
    padding: 24px;
    background-color: var(--color-background);
    border-radius: 8px;
    color: #fff;
    max-width: 900px;
    margin: 0 auto
}

.pf-heading {
    font-size: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid #555555;
    padding-bottom: 8px;
    text-align: center;
    font-weight: 600
}

.pf-section {
    margin-bottom: 32px
}

.pf-section-heading {
    font-size: 18px;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 500
}

.pf-card {
    background-color: #1a1a1a;
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    border: 1px solid #555555
}

.pf-card-heading {
    font-size: 16px;
    margin-bottom: 16px;
    color: #fff;
    font-weight: 500;
    border-bottom: 1px solid #555555;
    padding-bottom: 8px
}

.pf-paragraph {
    margin-bottom: 16px;
    line-height: 1.4;
    color: #ccc;
    font-size: 14px
}

.pf-paragraph-centered {
    line-height: 1.4;
    color: #ccc;
    font-size: 14px;
    text-align: center;
    margin-bottom: 0
}

.pf-paragraph-italic {
    line-height: 1.4;
    color: #ccc;
    font-size: 13px;
    font-style: italic;
    margin-top: 16px;
    text-align: center;
    margin-bottom: 0
}

.pf-list {
    padding-left: 24px;
    margin: 0
}

.pf-list-item {
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 14px
}

.pf-sub-list {
    padding-left: 24px;
    margin-top: 6px;
    margin-bottom: 0
}

.pf-game-item {
    border-radius: 4px;
    padding: 16px;
    background-color: #27272a80;
    margin-bottom: 16px
}

.pf-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px
}

.pf-game-id-container {
    flex: 1
}

.pf-multiplier-badge {
    background-color: #000;
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 8px;
    flex-shrink: 0
}

.pf-multiplier-high {
    color: #22c55e
}

.pf-multiplier-normal {
    color: #fff
}

.pf-button {
    background-color: #22c55e;
    color: #fff;
    border: none;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    font-weight: 500;
    transition: background-color .2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}

.pf-button:hover {
    background-color: #16a34a
}

.pf-link-button {
    display: inline-block;
    background-color: #666;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 16px;
    font-weight: 500;
    transition: background-color .2s ease;
    font-size: 14px
}

.pf-link-button:hover {
    background-color: #555
}

.pf-copy-button {
    background-color: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 6px;
    transition: color .2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    border-radius: 4px
}

.pf-copy-button:hover {
    color: #fff
}

.pf-copy-button.copied {
    color: #22c55e
}

.pf-text-field-container {
    display: flex;
    align-items: center;
    background-color: #000;
    border-radius: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
    min-width: 0
}

.pf-text-value,
.pf-text-value-unavailable {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pf-info-row {
    margin-bottom: 8px
}

.pf-label {
    font-weight: 700;
    margin-bottom: 2px;
    color: #ccc;
    font-size: 12px;
    display: block
}

.pf-verification-section {
    margin-top: 24px;
    text-align: center;
    padding: 16px;
    border-top: 1px solid #555555
}

.pf-verification-text {
    line-height: 1.4;
    color: #ccc;
    font-size: 14px;
    text-align: center;
    margin-bottom: 8px
}

.pf-verify-button-container {
    text-align: center;
    margin-top: 8px
}

.pf-unavailable-text {
    line-height: 1.4;
    color: #ccc;
    font-size: 13px;
    font-style: italic;
    text-align: center;
    margin-bottom: 0
}

@media (max-width: 480px) {
    .provably-fair-container {
        padding: 5px
    }
    .pf-card {
        padding: 10px;
        margin-bottom: 15px
    }
    .pf-section {
        margin-bottom: 20px
    }
    .pf-verification-section {
        padding: 10px;
        margin-top: 15px
    }
    .pf-text-field-container {
        padding: 4px 6px;
        margin-bottom: 6px
    }
    .pf-game-item {
        padding: 10px;
        margin-bottom: 10px
    }
    .pf-label {
        min-width: auto !important;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
    .pf-game-id-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap;
        width: 100%;
        overflow: hidden
    }
    .pf-game-id-row .pf-multiplier-badge {
        align-self: center !important;
        margin-left: 0;
        margin-top: 0;
        flex-shrink: 0;
        white-space: nowrap;
        min-width: -webkit-fit-content;
        min-width: fit-content
    }
    .pf-game-id-row .pf-text-field-container {
        flex: 1;
        min-width: 0;
        overflow: hidden
    }
    .pf-game-id-row>div:first-child {
        flex: 1;
        min-width: 0;
        overflow: hidden
    }
    .pf-game-item .pf-label {
        padding-left: 5px
    }
    .provably-fair-container .MuiPaper-root {
        padding: 10px !important;
        margin-bottom: 10px !important
    }
    .MuiDialogContent-root {
        padding: 5px !important
    }
    @media (max-width: 360px) {
        .pf-game-id-row {
            gap: 4px !important
        }
        .pf-text-field-container {
            padding: 3px 4px;
            margin-bottom: 4px
        }
        .pf-multiplier-badge {
            padding: 4px 6px;
            font-size: 12px;
            white-space: nowrap;
            min-width: -webkit-fit-content;
            min-width: fit-content
        }
        .pf-game-id-row>div:first-child {
            flex: 1;
            min-width: 0;
            overflow: hidden
        }
    }
}

.provably-fair-bottom-sheet {
    z-index: 100000 !important;
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: translateZ(0) !important
}

.provably-fair-bottom-sheet .provably-fair-container {
    padding: 0;
    margin: 0;
    max-width: none;
    border-radius: 0
}

.provably-fair-bottom-sheet .provably-fair-container {
    overflow-y: auto;
    height: 100%
}

.provably-fair-bottom-sheet .MuiBox-root.css-alj1ex,
.provably-fair-bottom-sheet .MuiBox-root[class*=css-alj1ex],
.provably-fair-bottom-sheet .MuiBox-root,
.provably-fair-bottom-sheet .provably-fair-container .MuiBox-root {
    padding-bottom: 0 !important
}

.provably-fair-bottom-sheet .drag-handle {
    transition: all .2s ease;
    will-change: background-color
}

.provably-fair-bottom-sheet .drag-handle:hover {
    opacity: .8
}

.provably-fair-bottom-sheet .drag-handle:active {
    transform: scaleY(1.2)
}

.provably-fair-bottom-sheet.expanded {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.provably-fair-bottom-sheet.expanded .provably-fair-container {
    padding-top: 10px
}

.provably-fair-bottom-sheet[style*="98vh"] {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important
}

.provably-fair-bottom-sheet[style*="98vh"] .provably-fair-container {
    padding-top: 15px
}

.provably-fair-bottom-sheet[style*="40vh"],
.provably-fair-bottom-sheet[style*="30vh"] {
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important
}

.provably-fair-bottom-sheet[style*="40vh"] .provably-fair-container,
.provably-fair-bottom-sheet[style*="30vh"] .provably-fair-container {
    padding-top: 5px
}

@media (max-width: 480px) {
    .provably-fair-bottom-sheet[style*="40vh"] .pf-section:not(.pf-current-game),
    .provably-fair-bottom-sheet[style*="30vh"] .pf-section:not(.pf-current-game) {
        display: none
    }
    .provably-fair-bottom-sheet[style*="40vh"] .pf-current-game .pf-info-row:nth-child(n+3),
    .provably-fair-bottom-sheet[style*="30vh"] .pf-current-game .pf-info-row:nth-child(n+3) {
        display: none
    }
}

@media (max-width: 480px) {
    .provably-fair-bottom-sheet[style*="98vh"] .pf-section {
        margin-bottom: 20px
    }
    .provably-fair-bottom-sheet[style*="98vh"] .pf-card {
        margin-bottom: 16px
    }
}

@media (max-width: 460px) {
    .provably-fair-bottom-sheet .provably-fair-container {
        padding: 0
    }
    .provably-fair-bottom-sheet .pf-card {
        border-radius: 8px
    }
    .provably-fair-bottom-sheet .pf-verification-section {
        margin-top: 10px
    }
    .provably-fair-bottom-sheet .drag-handle {
        padding: 16px 0 12px
    }
    .provably-fair-bottom-sheet .pf-copy-button {
        min-width: 44px;
        min-height: 44px
    }
}

.provably-fair-bottom-sheet .provably-fair-container {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch
}

.provably-fair-bottom-sheet .pf-section {
    will-change: transform
}

@media (max-width: 480px) and (min-height: 800px) {
    .provably-fair-bottom-sheet.expanded .pf-paragraph {
        line-height: 1.6;
        margin-bottom: 16px
    }
    .provably-fair-bottom-sheet.expanded .pf-section {
        margin-bottom: 24px
    }
}

.faq-bottom-sheet {
    z-index: 100000 !important;
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    transform: translateZ(0) !important;
    background-color: var(--color-background) !important
}

.faq-bottom-sheet .faq-container {
    padding: 0;
    margin: 0;
    max-width: none;
    border-radius: 0
}

.faq-bottom-sheet .faq-container {
    overflow-y: auto;
    height: 100%
}

.MuiAccordionSummary-root {
    border-radius: 8px !important
}

@media (max-width: 768px) {
    .faq-bottom-sheet .MuiAccordion-root {
        margin-bottom: 8px !important;
        border-radius: 6px !important
    }
    .faq-bottom-sheet .MuiAccordionSummary-root {
        padding: 12px 16px !important;
        min-height: 48px !important;
        border-radius: 8px !important
    }
    .faq-bottom-sheet .MuiAccordionSummary-content {
        margin: 8px 0 !important
    }
    .faq-bottom-sheet .MuiAccordionDetails-root {
        padding: 12px 16px !important
    }
    .faq-bottom-sheet .MuiTypography-h6 {
        font-size: 15px !important;
        line-height: 1.4 !important
    }
    .faq-bottom-sheet .MuiTypography-body1 {
        font-size: 13px !important;
        line-height: 1.5 !important
    }
}

@media (max-width: 360px) {
    .faq-bottom-sheet .MuiAccordionSummary-root,
    .faq-bottom-sheet .MuiAccordionDetails-root {
        padding: 10px 12px !important
    }
    .faq-bottom-sheet .MuiTypography-h6 {
        font-size: 14px !important
    }
    .faq-bottom-sheet .MuiTypography-body1 {
        font-size: 12px !important
    }
}

.faq-bottom-sheet {
    animation: slideUpFromBottom .3s ease-out
}

@keyframes slideUpFromBottom {
    0% {
        transform: translateY(100%)
    }
    to {
        transform: translateY(0)
    }
}

.faq-bottom-sheet .drag-handle {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none
}

.faq-bottom-sheet.dragging * {
    -webkit-user-select: none !important;
    user-select: none !important;
    pointer-events: none !important
}

.faq-bottom-sheet.dragging .drag-handle {
    pointer-events: auto !important
}

* {
    -webkit-user-select: none;
    user-select: none
}

input,
textarea,
[contenteditable=true],
[contenteditable=""] {
    -webkit-user-select: text !important;
    user-select: text !important
}

.MuiButton-root {
    transition: all .2s ease-in-out
}

.MuiButton-containedPrimary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)
}

.MuiButton-containedPrimary:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary-active) 100%);
    transform: translateY(-1px)
}

.MuiButton-containedPrimary:active {
    transform: translateY(0)
}

.MuiButton-containedSecondary {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-hover) 100%)
}

.MuiButton-containedSecondary:hover {
    background: linear-gradient(135deg, var(--color-secondary-hover) 0%, var(--color-secondary-active) 100%);
    transform: translateY(-1px)
}

.MuiButton-containedSecondary:active {
    transform: translateY(0)
}

.MuiButton-outlined {
    border-color: var(--color-border);
    color: var(--color-foreground)
}

.MuiButton-outlined:hover {
    border-color: var(--color-primary);
    background-color: var(--color-muted)
}

.MuiButton-text {
    color: var(--color-foreground)
}

.MuiButton-text:hover {
    background-color: var(--color-muted)
}

.MuiCard-root {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    transition: all .2s ease-in-out
}

.MuiCard-root:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px #ffc7001a
}

.MuiCardHeader-root {
    color: var(--color-foreground)
}

.MuiCardHeader-root .MuiCardHeader-title {
    font-family: DynaPuff, sans-serif;
    font-weight: 600
}

.MuiCardHeader-root .MuiCardHeader-subheader {
    color: var(--color-muted-foreground)
}

.MuiCardContent-root {
    color: var(--color-foreground)
}

.MuiCardActions-root {
    border-top: 1px solid var(--color-border);
    background: var(--color-muted)
}

.MuiDialog-paper {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 40px #00000080
}

.MuiDialogTitle-root {
    color: var(--color-foreground);
    background: var(--color-background);
    font-family: DynaPuff, sans-serif;
    font-weight: 600;
    border-bottom: 1px solid var(--color-border)
}

.MuiDialogContent-root {
    background: var(--color-background);
    color: var(--color-foreground)
}

.MuiDialogContentText-root {
    color: var(--color-muted-foreground)
}

.MuiDialogActions-root {
    border-top: 1px solid var(--color-border);
    background: var(--color-muted);
    padding: 16px 24px
}

.loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity .5s ease-out
}

.loading-page--fade-out {
    opacity: 0;
    pointer-events: none
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 400px;
    width: 90%;
    animation: fadeIn .5s ease-out;
    transition: filter .5s ease-out, transform .5s ease-out
}

.loading-page--fade-out .loading-content {
    filter: blur(10px);
    transform: scale(.95)
}

.loading-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: filter .5s ease-out, transform .5s ease-out
}

.loading-page--fade-out .loading-logo {
    filter: blur(8px);
    transform: scale(.9)
}

.logo-image {
    max-width: 200px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3));
    transition: filter .5s ease-out
}

.loading-page--fade-out .logo-image {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)) blur(5px)
}

.loading-progress-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: filter .5s ease-out, transform .5s ease-out
}

.loading-page--fade-out .loading-progress-container {
    filter: blur(6px);
    transform: scale(.95)
}

.loading-progress-bar {
    width: 100%;
    height: 8px;
    background: #ffffff1a;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: filter .5s ease-out
}

.loading-page--fade-out .loading-progress-bar {
    filter: blur(4px)
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #713F12, var(--color-primary));
    border-radius: 4px;
    transition: width .3s ease, filter .5s ease-out;
    position: relative
}

.loading-progress-fill:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--color-primary));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 10px var(--color-primary), 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
    opacity: .8
}

.loading-page--fade-out .loading-progress-fill {
    filter: blur(3px)
}

.loading-text {
    color: #fff;
    font-family: DynaPuff, sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    opacity: .8;
    transition: opacity .5s ease-out, filter .5s ease-out
}

.loading-page--fade-out .loading-text {
    opacity: .3;
    filter: blur(2px)
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-VariableFont_wdth,wght.ttf) format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

.dynapuff {
    font-family: DynaPuff, sans-serif
}

@font-face {
    font-family: DynaPuff;
    src: url(/fonts/DynaPuff-VariableFont_wdth,wght.ttf) format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: block
}

:root {
    --dynapuff-regular: 400;
    --dynapuff-medium: 500;
    --dynapuff-semibold: 600;
    --dynapuff-bold: 700;
    --color-black: #09090B;
    --color-dark: #1A1A1A;
    --color-gray: #27272A;
    --color-light-gray: #333333;
    --color-medium-gray: #666666;
    --color-text-gray: #AAAAAA;
    --color-white: #FFFFFF;
    --color-success: #00C137;
    --color-error: #FF4D4D;
    --color-warning: #FBB90F;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --font-family-primary: "DynaPuff", sans-serif;
    --font-family-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --scrollbar-width: 6px;
    --scrollbar-track-color: transparent;
    --scrollbar-thumb-color: rgba(255, 255, 255, .2);
    --scrollbar-thumb-hover-color: rgba(255, 255, 255, .3);
    --scrollbar-thumb-border-radius: 3px
}

*,
:before,
:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor
}

:before,
:after {
    --tw-content: ""
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    text-decoration: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    margin: 0;
    padding: 0
}

button,
select {
    text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none
}

:-moz-focusring {
    outline: auto
}

:-moz-ui-invalid {
    box-shadow: none
}

progress {
    vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

summary {
    display: list-item
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
    margin: 0
}

fieldset {
    margin: 0;
    padding: 0
}

legend {
    padding: 0
}

ol,
ul,
menu {
    list-style: none;
    margin: 0;
    padding: 0
}

dialog {
    padding: 0
}

textarea {
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

button,
[role=button] {
    cursor: pointer
}

:disabled {
    cursor: default
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden]:where(:not([hidden=until-found])) {
    display: none
}

.\ !container {
    width: 100% !important
}

.container {
    width: 100%
}

@media (min-width: 640px) {
    .\ !container {
        max-width: 640px !important
    }
    .container {
        max-width: 640px
    }
}

@media (min-width: 768px) {
    .\ !container {
        max-width: 768px !important
    }
    .container {
        max-width: 768px
    }
}

@media (min-width: 1024px) {
    .\ !container {
        max-width: 1024px !important
    }
    .container {
        max-width: 1024px
    }
}

@media (min-width: 1280px) {
    .\ !container {
        max-width: 1280px !important
    }
    .container {
        max-width: 1280px
    }
}

@media (min-width: 1536px) {
    .\ !container {
        max-width: 1536px !important
    }
    .container {
        max-width: 1536px
    }
}

.\ !visible {
    visibility: visible !important
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: -webkit-sticky;
    position: sticky
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.bottom-8 {
    bottom: 2rem
}

.left-0 {
    left: 0
}

.left-\[28px\] {
    left: 28px
}

.right-0 {
    right: 0
}

.top-8 {
    top: 2rem
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-50 {
    z-index: 50
}

.mx-0\.5 {
    margin-left: .125rem;
    margin-right: .125rem
}

.mx-4 {
    margin-left: 1rem;
    margin-right: 1rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.-ml-1 {
    margin-left: -.25rem
}

.mb-0\.5 {
    margin-bottom: .125rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-4 {
    margin-bottom: 1rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.ml-1 {
    margin-left: .25rem
}

.ml-2 {
    margin-left: .5rem
}

.ml-3 {
    margin-left: .75rem
}

.ml-4 {
    margin-left: 1rem
}

.mr-1 {
    margin-right: .25rem
}

.mr-2 {
    margin-right: .5rem
}

.mr-3 {
    margin-right: .75rem
}

.ms-16 {
    -webkit-margin-start: 4rem;
    margin-inline-start: 4rem
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.grid {
    display: grid
}

.list-item {
    display: list-item
}

.hidden {
    display: none
}

.h-10 {
    height: 2.5rem
}

.h-3 {
    height: .75rem
}

.h-5 {
    height: 1.25rem
}

.h-8 {
    height: 2rem
}

.h-full {
    height: 100%
}

.max-h-\[60vh\] {
    max-height: 60vh
}

.max-h-\[80vh\] {
    max-height: 80vh
}

.w-0\.5 {
    width: .125rem
}

.w-10 {
    width: 2.5rem
}

.w-16 {
    width: 4rem
}

.w-28 {
    width: 7rem
}

.w-3 {
    width: .75rem
}

.w-5 {
    width: 1.25rem
}

.w-8 {
    width: 2rem
}

.w-full {
    width: 100%
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-\[180px\] {
    max-width: 180px
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink {
    flex-shrink: 1
}

.flex-shrink-0 {
    flex-shrink: 0
}

.shrink {
    flex-shrink: 1
}

.grow {
    flex-grow: 1
}

.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.animate-spin {
    animation: spin 1s linear infinite
}

.cursor-default {
    cursor: default
}

.cursor-not-allowed {
    cursor: not-allowed
}

.select-none {
    -webkit-user-select: none;
    user-select: none
}

.resize {
    resize: both
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-wrap {
    flex-wrap: wrap
}

.items-start {
    align-items: flex-start
}

.items-center {
    align-items: center
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.gap-1 {
    gap: .25rem
}

.gap-2 {
    gap: .5rem
}

.gap-3 {
    gap: .75rem
}

.gap-4 {
    gap: 1rem
}

.space-x-1>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.25rem * var(--tw-space-x-reverse));
    margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.space-y-3>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.75rem * var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.whitespace-nowrap {
    white-space: nowrap
}

.rounded {
    border-radius: .25rem
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-xl {
    border-radius: .75rem
}

.border {
    border-width: 1px
}

.border-b {
    border-bottom-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-\[\#a855f7\]\/30 {
    border-color: #a855f74d
}

.border-\[\#a855f7\]\/40 {
    border-color: #a855f766
}

.border-green-800 {
    --tw-border-opacity: 1;
    border-color: rgb(22 101 52 / var(--tw-border-opacity, 1))
}

.border-red-600\/30 {
    border-color: #dc26264d
}

.border-red-800 {
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1))
}

.border-zinc-700 {
    --tw-border-opacity: 1;
    border-color: rgb(63 63 70 / var(--tw-border-opacity, 1))
}

.bg-\[\#121217\] {
    --tw-bg-opacity: 1;
    background-color: rgb(18 18 23 / var(--tw-bg-opacity, 1))
}

.bg-\[\#1a1a2e\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 26 46 / var(--tw-bg-opacity, 1))
}

.bg-\[\#1a2e1a\] {
    --tw-bg-opacity: 1;
    background-color: rgb(26 46 26 / var(--tw-bg-opacity, 1))
}

.bg-\[\#1e1b4b\]\/40 {
    background-color: #1e1b4b66
}

.bg-\[\#2d1b69\]\/50 {
    background-color: #2d1b6980
}

.bg-\[\#3B1C80\] {
    --tw-bg-opacity: 1;
    background-color: rgb(59 28 128 / var(--tw-bg-opacity, 1))
}

.bg-\[\#4C2A90\] {
    --tw-bg-opacity: 1;
    background-color: rgb(76 42 144 / var(--tw-bg-opacity, 1))
}

.bg-\[\#4C2A90\]\/70 {
    background-color: #4c2a90b3
}

.bg-\[\#a855f7\]\/40 {
    background-color: #a855f766
}

.bg-blue-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1))
}

.bg-blue-800\/30 {
    background-color: #1e40af4d
}

.bg-green-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
}

.bg-green-800\/40 {
    background-color: #16653466
}

.bg-green-800\/80 {
    background-color: #166534cc
}

.bg-orange-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1))
}

.bg-orange-800\/30 {
    background-color: #9a34124d
}

.bg-pink-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(219 39 119 / var(--tw-bg-opacity, 1))
}

.bg-pink-800\/30 {
    background-color: #9d174d4d
}

.bg-purple-800\/30 {
    background-color: #6b21a84d
}

.bg-red-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1))
}

.bg-red-900\/20 {
    background-color: #7f1d1d33
}

.bg-yellow-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1))
}

.bg-yellow-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(133 77 14 / var(--tw-bg-opacity, 1))
}

.bg-yellow-800\/30 {
    background-color: #854d0e4d
}

.bg-zinc-600 {
    --tw-bg-opacity: 1;
    background-color: rgb(82 82 91 / var(--tw-bg-opacity, 1))
}

.bg-zinc-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(63 63 70 / var(--tw-bg-opacity, 1))
}

.bg-zinc-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(39 39 42 / var(--tw-bg-opacity, 1))
}

.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.from-yellow-600 {
    --tw-gradient-from: #ca8a04 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(202 138 4 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.to-red-600 {
    --tw-gradient-to: #dc2626 var(--tw-gradient-to-position)
}

.p-2 {
    padding: .5rem
}

.p-3 {
    padding: .75rem
}

.p-4 {
    padding: 1rem
}

.p-6 {
    padding: 1.5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem
}

.py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem
}

.pr-2 {
    padding-right: .5rem
}

.text-center {
    text-align: center
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.italic {
    font-style: italic
}

.ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.text-\[\#f3e8ff\] {
    --tw-text-opacity: 1;
    color: rgb(243 232 255 / var(--tw-text-opacity, 1))
}

.text-blue-400 {
    --tw-text-opacity: 1;
    color: rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.text-green-200 {
    --tw-text-opacity: 1;
    color: rgb(187 247 208 / var(--tw-text-opacity, 1))
}

.text-green-300 {
    --tw-text-opacity: 1;
    color: rgb(134 239 172 / var(--tw-text-opacity, 1))
}

.text-green-400 {
    --tw-text-opacity: 1;
    color: rgb(74 222 128 / var(--tw-text-opacity, 1))
}

.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1))
}

.text-pink-400 {
    --tw-text-opacity: 1;
    color: rgb(244 114 182 / var(--tw-text-opacity, 1))
}

.text-purple-400 {
    --tw-text-opacity: 1;
    color: rgb(192 132 252 / var(--tw-text-opacity, 1))
}

.text-red-400 {
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-yellow-400 {
    --tw-text-opacity: 1;
    color: rgb(250 204 21 / var(--tw-text-opacity, 1))
}

.text-yellow-500 {
    --tw-text-opacity: 1;
    color: rgb(234 179 8 / var(--tw-text-opacity, 1))
}

.text-zinc-300 {
    --tw-text-opacity: 1;
    color: rgb(212 212 216 / var(--tw-text-opacity, 1))
}

.text-zinc-400 {
    --tw-text-opacity: 1;
    color: rgb(161 161 170 / var(--tw-text-opacity, 1))
}

.text-zinc-500 {
    --tw-text-opacity: 1;
    color: rgb(113 113 122 / var(--tw-text-opacity, 1))
}

.underline {
    -webkit-text-decoration-line: underline;
    text-decoration-line: underline
}

.overline {
    -webkit-text-decoration-line: overline;
    text-decoration-line: overline
}

.opacity-25 {
    opacity: .25
}

.opacity-40 {
    opacity: .4
}

.opacity-50 {
    opacity: .5
}

.opacity-75 {
    opacity: .75
}

.shadow {
    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline {
    outline-style: solid
}

.blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.ease-in {
    transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

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

html {
    font-size: 16px;
    height: 100%
}

body {
    font-family: var(--font-family-primary);
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-black);
    color: var(--color-white);
    min-height: 100vh;
    height: 100%
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: DynaPuff, sans-serif;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2
}

h1 {
    font-size: 3rem
}

h2 {
    font-size: 1.875rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25rem
}

h5 {
    font-size: 1.125rem
}

h6 {
    font-size: 1rem
}

p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem
}

blockquote {
    font-size: 1rem;
    font-style: italic;
    padding-left: 1rem;
    border-left: 4px solid var(--color-primary, #4e67f7);
    margin: 1rem 0
}

table {
    font-size: 1rem;
    width: 100%;
    border-collapse: collapse
}

ul,
ol {
    font-size: 1rem;
    padding-left: 1.5rem;
    margin-bottom: 1rem
}

li {
    margin-bottom: .25rem
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, Courier New, monospace;
    font-size: .875rem;
    background-color: #ffffff1a;
    padding: .125rem .25rem;
    border-radius: 4px
}

.text-large {
    font-size: 1.125rem
}

.text-small {
    font-size: .875rem
}

.text-h1 {
    font-size: 3rem
}

.text-h2 {
    font-size: 1.875rem
}

.text-h3 {
    font-size: 1.5rem
}

.text-h4 {
    font-size: 1.25rem
}

button {
    font-family: DynaPuff, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

#root {
    height: 100%
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem
}

@media (max-width: 768px) {
    html {
        font-size: 14px
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo,
.game-title,
.game-header,
button {
    font-family: DynaPuff, sans-serif
}

.bold-text {
    font-weight: var(--dynapuff-bold)
}

.regular-text {
    font-weight: var(--dynapuff-regular)
}

.header-container {
    z-index: 10
}

.controls-area {
    z-index: 5
}

.dropdown-menu,
[class*=dropdown-],
[class*=Dropdown]>div[class*=absolute] {
    z-index: 1
}

[class*=coin-selector] button,
button.clear-button {
    z-index: 1
}

.hover\:bg-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1))
}

.hover\:bg-green-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
}

.hover\:bg-orange-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1))
}

.hover\:bg-pink-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1))
}

.hover\:bg-red-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1))
}

.hover\:bg-yellow-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1))
}

.hover\:bg-zinc-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(113 113 122 / var(--tw-bg-opacity, 1))
}

.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.disabled\:opacity-50:disabled {
    opacity: .5
}

@media (max-width: 500px) {
    .max-\[500px\]\:w-auto {
        width: auto
    }
    .max-\[500px\]\:w-full {
        width: 100%
    }
    .max-\[500px\]\:flex-1 {
        flex: 1 1 0%
    }
    .max-\[500px\]\:flex-col {
        flex-direction: column
    }
}

@media (min-width: 768px) {
    .md\:max-w-\[450px\] {
        max-width: 450px
    }
}