/*
 * Built file: triplexi.css
 * Source of truth lives in games/triplexi/src/
 */
.triplexi-shell {
    --triplexi-accent: #e50914;
    --triplexi-accent-hover: #f40612;
    --triplexi-accent-soft: #f1d8df;
    --triplexi-accent-soft-border: #e8c3cd;
    --triplexi-accent-text-dark: #8f1220;
    --daily-leaderboard-height: 480px;
}

.triplexi-stage {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 24px 24px;
    box-sizing: border-box;
}

#root {
    width: 100%;
}

.triplexi-shell .content-container {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    min-height: 0;
    overflow: visible;
}

.triplexi-shell .triplexi-shell-title {
    display: block;
}

.triplexi-shell .triplexi-shell-title .main-title {
    padding-bottom: 10px;
}

.triplexi-shell hr {
    display: none;
}

.triplexi-shell .container {
    max-width: none !important;
}

.triplexi-shell .main-content {
    width: 100%;
    max-width: none;
    align-items: stretch;
    padding: 0 12px 5rem;
    box-sizing: border-box;
    color: #2f2f2f;
}

.triplexi-shell .main-content > header,
.triplexi-shell .main-content > main {
    width: 100%;
    max-width: none;
}

.triplexi-shell .main-content > main {
    padding-bottom: 4rem;
}

.triplexi-shell .main-content header {
    margin-bottom: 16px;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
}

.triplexi-shell .main-content header .flex-1.text-center > h1,
.triplexi-shell .main-content header .flex-1.text-center > .flex.justify-center.items-center.gap-2:not(.mt-2) {
    display: none;
}

.triplexi-shell .floating-controls {
    bottom: 16px;
}

.triplexi-shell .bg-\[\#800080\] {
    background-color: var(--triplexi-accent) !important;
}

.triplexi-shell .border-\[\#800080\] {
    border-color: var(--triplexi-accent) !important;
}

.triplexi-shell .bg-\[\#f2e6f2\] {
    background-color: var(--triplexi-accent-soft) !important;
    color: var(--triplexi-accent-text-dark) !important;
}

.triplexi-shell .border-\[\#f2e6f2\] {
    border-color: var(--triplexi-accent-soft-border) !important;
}

.triplexi-shell .hover\:bg-\[\#990099\]:hover {
    background-color: var(--triplexi-accent-hover) !important;
}

.triplexi-shell .keyboard-container {
    width: 660px;
    max-width: calc(100vw - 40px);
    padding-left: 6px;
    padding-right: 6px;
    background-color: rgba(244, 240, 240, 0.75);
}

.triplexi-shell .leaderboard-sidebar {
    right: calc(-1 * var(--daily-leaderboard-width));
}

.triplexi-shell .leaderboard-sidebar.open {
    right: 12px;
}

.triplexi-shell .leaderboard-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.triplexi-shell .leaderboard-item {
    border-radius: 0;
    background: transparent;
}

.triplexi-shell .how-to-play-modal {
    background: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.triplexi-shell .leaderboard-sidebar,
.triplexi-shell .leaderboard-modal {
    background-color: #ffffff !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
}

.triplexi-shell .plays-counter,
.triplexi-shell .sound-toggle-button {
    background-color: var(--triplexi-accent);
}

.triplexi-shell .sound-toggle-button:hover {
    background-color: var(--triplexi-accent-hover);
}

.triplexi-shell .volume-slider::-webkit-slider-thumb {
    background: var(--triplexi-accent);
}

.triplexi-shell .volume-slider::-moz-range-thumb {
    background: var(--triplexi-accent);
}

.triplexi-shell .keyboard-container .border-2,
.triplexi-shell .keyword-placeholder {
    color: var(--triplexi-accent);
    border-color: var(--triplexi-accent);
}

.triplexi-shell .new-score-permanent-rainbow {
    animation: none;
    color: var(--triplexi-accent) !important;
}

.triplexi-shell .main-content .text-gray-500,
.triplexi-shell .main-content .text-gray-600 {
    color: #555 !important;
}

body:not(.light-mode).triplexi-shell .triplexi-stage {
    background:
        radial-gradient(circle at top, rgba(229, 9, 20, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(20, 20, 20, 0), rgba(20, 20, 20, 0));
}

body:not(.light-mode).triplexi-shell hr {
    border-top-color: transparent !important;
    opacity: 0;
}

body:not(.light-mode).triplexi-shell .main-content {
    color: #f3f3f3;
}

body:not(.light-mode).triplexi-shell .main-content .current-row .border-2 {
    border-color: rgba(255, 255, 255, 0.32) !important;
}

body:not(.light-mode).triplexi-shell .main-content .current-row .relative > div > div:first-child {
    border-color: rgba(255, 255, 255, 0.5) !important;
    background-color: rgba(255, 255, 255, 0.05);
}

body:not(.light-mode).triplexi-shell .main-content .grid > .flex:not(.current-row) .relative > div > div:first-child {
    border-color: rgba(255, 255, 255, 0.14) !important;
    background-color: rgba(255, 255, 255, 0.01);
}

body:not(.light-mode).triplexi-shell .keyboard-container {
    background-color: rgba(33, 33, 33, 0.75) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

body:not(.light-mode).triplexi-shell .leaderboard-sidebar {
    background-color: #212121 !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

body:not(.light-mode).triplexi-shell .leaderboard-item {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body:not(.light-mode).triplexi-shell .leaderboard-sidebar,
body:not(.light-mode).triplexi-shell .leaderboard-modal,
body:not(.light-mode).triplexi-shell .leaderboard-sidebar h2,
body:not(.light-mode).triplexi-shell .leaderboard-sidebar span,
body:not(.light-mode).triplexi-shell .leaderboard-sidebar li,
body:not(.light-mode).triplexi-shell .leaderboard-sidebar button,
body:not(.light-mode).triplexi-shell .leaderboard-modal h2,
body:not(.light-mode).triplexi-shell .leaderboard-modal span,
body:not(.light-mode).triplexi-shell .leaderboard-modal li,
body:not(.light-mode).triplexi-shell .leaderboard-modal button {
    color: #f5f5f5 !important;
}

body:not(.light-mode).triplexi-shell .how-to-play-modal,
body:not(.light-mode).triplexi-shell .leaderboard-modal,
body:not(.light-mode).triplexi-shell .bg-white {
    background: #202020 !important;
    background-image: none !important;
    color: #f5f5f5 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:not(.light-mode).triplexi-shell .bg-\[\#f2e6f2\],
body:not(.light-mode).triplexi-shell .border-\[\#f2e6f2\] {
    background-color: var(--triplexi-accent-soft) !important;
    border-color: var(--triplexi-accent-soft-border) !important;
    color: var(--triplexi-accent-text-dark) !important;
}

body:not(.light-mode).triplexi-shell img.max-h-48 {
    filter: brightness(0) invert(1);
}

body:not(.light-mode).triplexi-shell input[type="email"] {
    background: #2a2a2a;
    color: #f5f5f5;
    border-color: #4b4b4b;
}

body.light-mode.triplexi-shell .triplexi-stage {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

body.light-mode.triplexi-shell img.max-h-48 {
    filter: brightness(0) invert(0);
}

body.light-mode.triplexi-shell .keyboard-container {
    background-color: rgba(244, 240, 240, 0.75);
}

body.light-mode.triplexi-shell .leaderboard-sidebar {
    background-color: #f4f0f0;
}

.triplexi-shell .footer span:first-child {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    justify-content: center;
}

.triplexi-shell .footer span:first-child img,
.triplexi-shell .footer span:first-child a {
    display: inline-block;
}

@media (max-width: 900px) {
    .triplexi-shell .keyboard-container {
        width: min(92vw, 660px);
    }

    .triplexi-shell .leaderboard-sidebar.open {
        right: 8px;
    }
}

@media (max-width: 640px) {
    .triplexi-stage {
        padding: 0 0 16px;
    }

    .triplexi-shell .floating-controls {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100vw;
        transform: none;
    }

    .triplexi-shell .keyboard-container {
        width: 100vw;
        max-width: 100vw;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 15px 15px 0 0;
    }

    .triplexi-shell .main-content {
        padding: 0 4px 7rem;
    }

    .triplexi-shell .main-content > main {
        padding-bottom: 5rem;
    }

    .triplexi-shell .triplexi-shell-title {
        padding-bottom: 10px;
    }

    .triplexi-shell .triplexi-shell-title .main-title {
        font-size: 2rem;
    }
}