@font-face {
    font-family: 'Kollektif';
    src: url('assets/fonts/Kollektif-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Kollektif';
    src: url('assets/fonts/Kollektif-Bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    --brand: #00a6fa;
    --brand-text: #ffffff;
    --brand-deep: #0074d9;
    --brand-glow: rgba(0, 166, 250, 0.55);
    --brand-strong-glow: rgba(0, 166, 250, 0.6);
    --brand-drop: rgba(0, 166, 250, 0.12);
    --brand-tint: rgba(0, 166, 250, 0.32);
    --brand-floor: rgba(0, 166, 250, 0.45);
    --danger: #ef3340;
    --danger-tint: rgba(239, 51, 64, 0.18);
    --danger-line: rgba(239, 51, 64, 0.5);
    --neutral: #2e2e2e;
    --frost: rgba(178, 178, 178, 0.1);
    --glass-shade: rgba(14, 14, 15, 0.45);
    --slot: rgba(20, 20, 22, 0.72);
    --slot-locked: rgba(20, 20, 22, 0.45);
    --slot-hover: rgba(36, 36, 40, 0.82);
    --surface: rgba(20, 20, 22, 0.97);
    --line: rgba(255, 255, 255, 0.07);
    --line-strong: rgba(255, 255, 255, 0.1);
    --divider: rgba(255, 255, 255, 0.08);
    --tile-active: rgba(255, 255, 255, 0.2);
    --keycap-light: rgba(255, 255, 255, 0.22);
    --text: #ffffff;
    --text-label: rgba(255, 255, 255, 0.9);
    --text-body: rgba(255, 255, 255, 0.7);
    --text-tab: rgba(255, 255, 255, 0.65);
    --text-head: rgba(255, 255, 255, 0.55);
    --text-sub: rgba(255, 255, 255, 0.5);
    --text-dim: rgba(255, 255, 255, 0.45);
    --text-faint: rgba(255, 255, 255, 0.4);
    --scene: #09090a;
    --shadow-panel: rgba(0, 0, 0, 0.55);
    --shadow-item: rgba(0, 0, 0, 0.5);
    --font-display: 'Bebas Neue', 'Oswald', sans-serif;
    --font-ui: 'Inter', 'Manrope', 'Segoe UI', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
    font-family: var(--font-ui);
    color: var(--text);
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

button {
    border: none;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    outline: none;
}

ul {
    list-style: none;
}

img {
    display: block;
    -webkit-user-drag: none;
}

.app {
    display: none;
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.atmosphere {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.darken {
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side, rgba(9, 9, 10, 0), rgba(9, 9, 10, 0.6)), rgba(9, 9, 10, 0.72);
}

.app.cam-preview .darken {
    background: radial-gradient(farthest-side at 50% 45%, rgba(9, 9, 10, 0) 70%, rgba(9, 9, 10, 0.3)), linear-gradient(90deg, rgba(9, 9, 10, 0.8) 0%, rgba(9, 9, 10, 0.78) 16%, rgba(9, 9, 10, 0.72) 24%, rgba(9, 9, 10, 0.6) 30%, rgba(9, 9, 10, 0.46) 36%, rgba(9, 9, 10, 0.36) 42%, rgba(9, 9, 10, 0.32) 50%, rgba(9, 9, 10, 0.36) 58%, rgba(9, 9, 10, 0.46) 64%, rgba(9, 9, 10, 0.6) 70%, rgba(9, 9, 10, 0.72) 76%, rgba(9, 9, 10, 0.78) 84%, rgba(9, 9, 10, 0.8) 100%);
}

.glow {
    position: absolute;
    width: 62.907vh;
    height: 64.953vh;
    background: var(--brand);
    transform: rotate(9.68deg);
    -webkit-mask-image: url('assets/img/glow-mask.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 8.397vh 9.866vh;
    -webkit-mask-size: 57.518vh 56.952vh;
}

.glow-left {
    top: -31.4vh;
    left: -36.528vh;
    opacity: 0.55;
}

.glow-right {
    top: -34.176vh;
    right: -22.676vh;
    opacity: 0.45;
}

.pattern {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

.topbar {
    position: absolute;
    top: 3.333vh;
    left: 3.646vw;
    right: 3.646vw;
    height: 5.185vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    gap: 1.111vh;
}

.brand-logo {
    width: 2.963vh;
    height: 3.704vh;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    white-space: nowrap;
}

.brand-text strong {
    font-family: 'Kollektif', sans-serif;
    font-weight: 700;
    font-size: 2.407vh;
}

.brand-text span {
    font-family: 'Kollektif', sans-serif;
    font-weight: 400;
    font-size: 0.833vh;
    color: var(--text-sub);
    letter-spacing: 0.3vh;
}

.tabs {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.556vh;
    pointer-events: none;
}

.tab {
    display: flex;
    align-items: center;
    gap: 0.741vh;
    padding: 0.926vh 1.481vh;
    border-radius: 0.648vh;
    background: linear-gradient(var(--frost), var(--frost)), var(--glass-shade);
    box-shadow: 0 0.37vh 1.111vh var(--shadow-item);
    font-size: 1.204vh;
    font-weight: 600;
    line-height: 1.21;
    color: var(--text-tab);
    white-space: nowrap;
    pointer-events: auto;
}

.tab i {
    font-size: 1.389vh;
    opacity: 0.65;
}

.tab:hover {
    color: var(--text);
    background: rgba(178, 178, 178, 0.16);
}

.tab:hover i {
    opacity: 1;
}

.tab:active {
    transform: scale(0.97);
}

.tab.active {
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
    box-shadow: 0 0.37vh 1.111vh var(--shadow-item), 0 0 1.296vh var(--brand-glow);
    color: var(--text);
}

.tab.active i {
    opacity: 1;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 0.926vh;
}

.info-chip {
    display: flex;
    align-items: center;
    gap: 0.926vh;
    padding: 0.556vh 1.296vh 0.556vh 0.556vh;
    border-radius: 0.648vh;
    background: linear-gradient(var(--frost), var(--frost)), var(--glass-shade);
    box-shadow: 0 0.37vh 1.111vh var(--shadow-item);
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.778vh;
    height: 2.778vh;
    border-radius: 0.648vh;
    background: var(--neutral);
}

.info-icon.brand-tile {
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

.info-icon i {
    font-size: 1.296vh;
}

.info-text {
    display: flex;
    flex-direction: column;
    font-weight: 700;
    line-height: 1.21;
    white-space: nowrap;
}

.info-text span {
    font-size: 0.833vh;
    letter-spacing: 0.139vh;
    color: var(--text-dim);
}

.info-text strong {
    font-size: 1.204vh;
}

.close {
    display: flex;
}

.close .keycap {
    padding: 0.741vh 1.111vh;
    font-size: 1.204vh;
}

.close:hover {
    transform: scale(1.1);
}

.close:active {
    transform: scale(1.02);
}

.keycap {
    padding: 0.463vh 0.741vh;
    border-radius: 0.278vh;
    background: var(--neutral);
    font-size: 1.019vh;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.093vh;
    white-space: nowrap;
}

.keycap-danger {
    background: var(--danger);
}

.layout {
    position: absolute;
    top: 12.963vh;
    left: 3.646vw;
    right: 3.646vw;
    bottom: 0;
    display: grid;
    grid-template-columns: 45.556vh 1fr 45.556vh;
    align-items: start;
}

.column {
    display: flex;
    flex-direction: column;
    gap: 1.296vh;
    width: 45.556vh;
}

.app.entering .column,
.app.entering .center,
.app.entering .fast {
    opacity: 0;
}

.app.entering .column:first-child {
    transform: translateX(-2.778vh);
}

.app.entering .column:last-child {
    transform: translateX(2.778vh);
}

.column,
.center,
.fast {
    transition: opacity 350ms var(--ease), transform 350ms var(--ease);
}

.section {
    display: flex;
    align-items: center;
    gap: 1.111vh;
}

.section-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.333vh;
    height: 3.333vh;
    border-radius: 0.648vh;
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
    box-shadow: 0 0.37vh 1.111vh var(--shadow-item), 0 0 1.667vh var(--brand-strong-glow);
}

.section-icon i {
    font-size: 1.574vh;
}

.section-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.093vh;
    line-height: 1.21;
    white-space: nowrap;
}

.section-text strong {
    font-size: 1.389vh;
    font-weight: 700;
    letter-spacing: 0.139vh;
    text-transform: uppercase;
}

.section-text span {
    font-size: 1.019vh;
    font-weight: 500;
    color: var(--text-sub);
}

.section-compact .section-text {
    flex: none;
}

.section-counts {
    display: flex;
    align-items: center;
    gap: 0.741vh;
    font-size: 1.111vh;
    line-height: 1.21;
    white-space: nowrap;
}

.section-counts strong {
    font-weight: 700;
}

.section-counts span {
    font-weight: 500;
    color: var(--text-dim);
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.character {
    display: flex;
    gap: 0.741vh;
    margin-top: 2.222vh;
}

.clothing {
    display: flex;
    flex-direction: column;
    gap: 0.741vh;
}

.ped {
    position: relative;
    display: none;
    width: 18.519vh;
    height: 55.556vh;
}

.app.cam-preview .ped {
    display: block;
}

.app.cam-preview .character {
    gap: 2.778vh;
}

.floor-glow {
    position: absolute;
    top: 53.241vh;
    left: -3.704vh;
    width: 25.926vh;
    height: 4.259vh;
    background: radial-gradient(closest-side, var(--brand-floor), transparent);
}

.backpack {
    position: relative;
}

.backpack-message {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.backpack.locked .backpack-message {
    display: flex;
}

.backpack-message::before {
    content: '';
    position: absolute;
    width: 19.444vh;
    height: 6.481vh;
    border-radius: 0.741vh;
    background: linear-gradient(var(--frost), var(--frost)), var(--glass-shade);
    box-shadow: 0 0.37vh 1.111vh var(--shadow-item);
}

.backpack-message strong,
.backpack-message span {
    position: relative;
}

.backpack-message {
    flex-direction: column;
    gap: 0.37vh;
    line-height: 1.2;
    white-space: nowrap;
}

.backpack-message strong {
    font-family: var(--font-display);
    font-size: 1.852vh;
    font-weight: 400;
    letter-spacing: 0.093vh;
}

.backpack-message span {
    font-size: 1.019vh;
    font-weight: 500;
    color: var(--text-head);
}

.fast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.778vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.926vh;
}

.fast-slots {
    display: flex;
    gap: 0.741vh;
}

.fast-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.741vh;
}

.fast-item .keycap.active {
    background: linear-gradient(90deg, var(--brand), var(--brand-deep));
    box-shadow: 0 0 0.463vh var(--brand-glow);
}

.settings {
    position: absolute;
    top: 9.444vh;
    left: 50%;
    z-index: 6;
    display: none;
    flex-direction: column;
    gap: 1.481vh;
    width: 40.741vh;
    padding: 2.222vh;
    border-radius: 0.741vh;
    background: var(--surface);
    box-shadow: 0 0.926vh 2.778vh var(--shadow-panel);
    transform: translateX(-50%);
}

.settings.open {
    display: flex;
}

.settings-title {
    font-size: 1.296vh;
    font-weight: 600;
    letter-spacing: 0.278vh;
    color: var(--text-head);
}

.settings-title strong {
    font-weight: 800;
    color: var(--text);
}

.setting {
    display: flex;
    align-items: center;
    gap: 1.296vh;
    padding: 1.111vh;
    border-radius: 0.556vh;
    background: rgba(255, 255, 255, 0.03);
    text-align: left;
}

.setting:hover {
    background: rgba(255, 255, 255, 0.06);
}

.setting-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.704vh;
    height: 3.704vh;
    border-radius: 0.556vh;
    background: var(--neutral);
    color: var(--text);
}

.setting-icon svg {
    width: 1.852vh;
    height: 1.852vh;
}

.setting.on .setting-icon {
    background: var(--brand);
    box-shadow: 0 0 1.296vh var(--brand-glow);
}

.setting-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.278vh;
    line-height: 1.25;
}

.setting-text strong {
    font-size: 1.296vh;
    font-weight: 600;
    color: var(--text);
}

.setting-text span {
    font-size: 1.111vh;
    font-weight: 500;
    color: var(--text-sub);
}

.switch {
    position: relative;
    flex-shrink: 0;
    width: 4.074vh;
    height: 2.222vh;
    border-radius: 1.111vh;
    background: var(--neutral);
}

.switch span {
    position: absolute;
    top: 0.278vh;
    left: 0.278vh;
    width: 1.667vh;
    height: 1.667vh;
    border-radius: 50%;
    background: var(--text-dim);
}

.setting.on .switch {
    background: var(--brand);
}

.setting.on .switch span {
    left: 2.13vh;
    background: var(--text);
}

.tab.active,
.info-icon.brand-tile i,
.section-icon i,
.fast-item .keycap.active,
.setting.on .setting-icon {
    color: var(--brand-text);
}

.setting.on .switch span {
    background: var(--brand-text);
}