@import url('./play-button.11cc5f6e.css');
@import url('./header-menu.0ca7511e.css');
@import url('./tab-content.61a9c789.css');
@import url('./gamemodes.0a86dee7.css');
@import url('./playground-config.4b58f8a2.css');


/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
  

:root {
    --padding-unit: 8px;
    --padding-small: calc(var(--padding-unit) * 0.5); /* 4px */
    --padding-medium: calc(var(--padding-unit) + var(--padding-small)); /* 12px */
    --padding-large: calc(var(--padding-medium) + var(--padding-unit)); /* 20px */
    --radius-inner: 8px;
    --radius-medium: calc(var(--radius-inner) + var(--padding-unit)); /* 16px */
    --radius-large: calc(var(--radius-medium) + var(--padding-unit)); /* 24px */
    --radius-xlarge: calc(var(--radius-large) + var(--padding-unit)); /* 32px */
    --gap: 8px;

    --primary-color: #000000;
    --secondary-color: #1a1a1a;
    --tertiary-color: #3a3f47;
    --accent-color: #ff4500;

    --border-color: rgba(70, 70, 70, 0.5);
    --text-color: #ffffff;

    --header-height: 50px;
}

html {
    font-size: 16px;
    line-height: 1.5;
}

body {
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color);

}

.panel-container {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left-panel main-panel right-panel";
    align-items: center;
    justify-items: center;
    height: 100%;
    width: 100%;
    color: #ffffff;
    z-index: 9999;
    gap: var(--gap);
    padding: 0 20px;
    background-color: transparent;
    backdrop-filter: blur(10px);
}

.panel {
    width: fit-content;
    max-width: 350px;
    height: 400px;
    background-color: #000000;
    border: 1px solid rgb(47, 51, 54);
    border-radius: var(--radius-xlarge);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.3s ease;
}

.panel:first-child {
    grid-area: left-panel;
    justify-self: end;
}

.panel.main {
    grid-area: main-panel;
    width: 400px;
    z-index: 2;
}

.panel.secondary {
    width: 250px;
}

.panel.secondary.login {
    justify-content: flex-start;
}

.panel:last-child {
    grid-area: right-panel;
    justify-self: start;
}

/* Responsive layout */
@media (max-width: 1200px) {
    .panel-container {
        grid-template-columns: 1fr auto 1fr;
        padding: 0 10px;
    }
}

@media (max-width: 900px) {
    .panel-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "main-panel"
            "left-panel"
            "right-panel";
        gap: 20px;
        padding: 20px;
    }
    
    .panel:first-child {
        justify-self: center;
        transform: translateX(0);
    }
    
    .panel:last-child {
        justify-self: center;
        transform: translateX(0);
    }
    
    .panel:not(.main) {
        width: 100%;
        max-width: 400px;
    }
}


button {
    padding: 10px 20px;
    width: 100%;
    flex-shrink: 0;
    background: var(--button-background, #282c34);
    border-radius: var(--button-border-radius);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(70, 70, 70, 0.5);
}

button:hover {
    background: var(--button-hover-background, #3a3f47);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-inner);
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-size: 1rem;
}