@charset "UTF-8";

body {
    background-color: var(--color-text-black);
    color: var(--color-copy);
    color-scheme: light dark;
    counter-reset: cntr;
    font-family: var(--font-def);
    font-feature-settings: "palt" 1;
    font-weight: 500;
    height: 100vh;
    height: 100svh;
    letter-spacing: .09em;
    line-break: strict;
	margin: 0;
    overflow: hidden;
    position: relative;
    /* scrollbar-gutter: stable both-edges; */
    text-rendering: optimizeLegibility;
}

:focus-visible {
    outline: 3px solid var(--color-orchid);
}

::backdrop {
    background: rgba(0, 0, 0, .4);
}

::-webkit-scrollbar {
    display: none;
    /* height: 12px;
    width: 8px; */
}

/* ::-webkit-scrollbar-track {
    background: var(--color-dkGy);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    background-clip: content-box;
    border-radius: 10px;
    border: 3px solid transparent;
    &:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }
} */

.layout {
	display: grid;
	height: 100%;
/*	place-content: center;*/
}

.header {
	align-items: center;
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-5px);
	box-shadow: var(--box-shadow-tw);
	display: flex;
	gap: var(--space-tight);
	padding-block: .5rem;
	padding-inline: var(--space-loose);
	position: absolute;
	top: var(--space-tight);
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	z-index: 100;
}

.nav-btn {
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-50perc);
	box-shadow: var(--box-shadow-tw);
	cursor: pointer;
	display: grid;
	height: 40px;
	place-content: center;
	width: 40px;
}

.nav-line {
	background-color: var(--color-white);
	display: block;
	height: 1px;
	position: relative;
    transition: var(--transition-all);
	width: 25px;
	&:first-child {
		top: -4px;
	}
	&:last-child {
		top: 4px;
	}
}

.world-list-panel {
	background-color: var(--color-text-black);
    border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-5px);
	box-shadow: var(--box-shadow-tw);
	height: auto;
	opacity: 0;
    padding: var(--space-loose);
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 0;
    transition: var(--transition-all);
    visibility: hidden;
    width: 100%;
	z-index: -100;
}

.world-list-header {
	align-items: center;
	display: flex;
	gap: var(--space-loose);
}

.world-list-panel-title {
	font-size: var(--font-size-regular);
	margin: 0;
}

.panel-controll-btn {
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-5px);
	cursor: pointer;
	font-size: var(--font-size-small-1);
	padding: .5rem;
    transition: var(--transition-all);
    &:hover,
    &:focus-within {
        background-color: var(--color-hover);
    }
}

.world-list-table-wrapper {
	margin-block: var(--space-loose);
}

.world-list-table {
	font-size: var(--font-size-small-1);
	thead {
		th {
            background-color: var(--color-dkGy);
			border: 1px solid var(--color-dkGy);
			padding-inline: var(--space-loose);
		}
	}
    tbody {
        tr {
            cursor: pointer;
            &.is-selected {
                background-color: var(--color-hover);
            }
            &:hover,
            &:focus-within {
                background-color: var(--color-hover);
            }
        }
        td {
            border: 1px solid var(--color-dkGy);
            padding-inline: var(--space-loose);
        }
    }
}

.header.is-active {
    .world-list-panel {
        opacity: 1;
		pointer-events: auto;
        visibility: visible;
    }
    .nav-line {
        &:first-child {
            transform: translateY(5px) rotate(45deg);
        }
        &:nth-child(2) {
            opacity: 0;
        }
        &:last-child {
            transform: translateY(-5px) rotate(-45deg);
        }
    }
}

.title {
	color: var(--color-white);
	font-family: var(--font-custom-en);
	font-size: var(--font-size-large-2);
	font-weight: 500;
	margin: 0 auto 0 0;
}

.tool-btn {
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-50perc);
	box-shadow: var(--box-shadow-tw);
    color: var(--color-white);
	display: grid;
	cursor: pointer;
	height: 40px;
	place-content: center;
	transition: var(--transition-hover);
	width: 40px;
	.material-symbols-outlined {
		font-size: 18px;
	}
	&.is-disabled {
		color: var(--color-dkGy);
		pointer-events: none;
	}
    &:hover,
    &:focus-within {
        background-color: var(--color-hover);
    }
}

.tool-btn-square {
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-5px);
	box-shadow: var(--box-shadow-tw);
	cursor: pointer;
	font-family: var(--font-jpn-mincho);
	letter-spacing: .2em;
	padding-block: .5rem;
	padding-inline: var(--space-loose);
	transition: var(--transition-hover);
    &:hover,
    &:focus-within {
        background-color: var(--color-hover);
    }
}

.main {
	border-top: 1px solid var(--color-dkGy);
	border-bottom: 1px solid var(--color-dkGy);
	height: 90svh;
	overflow: hidden;
	width: 100vw;
}

.world-view {
	height: 100%;
	position: relative;
	img {
        display: block;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		position: absolute;
		inset: auto;
		width: 100%;
	}
    &::before {
        box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.6), inset 0 0 300px rgba(0, 0, 0, 0.4);
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }
	&::after {
		backdrop-filter: blur(10px);
		background-color: rgba(0, 0, 0, .9);
		content: "";
		display: block;
		height: 100%;
        opacity: 1;
		position: absolute;
        transition: var(--transition-all-slow);
		inset: 0;
		width: 100%;
		z-index: 1;
	}
}

.world-view.is-light-on {
    &::after {
        backdrop-filter: blur(0);
        content: "";
        opacity: 0;
    }
}

.sql-log-pane {
	background-color: var(--color-text-black);
	border: 1px solid var(--color-dkGy);
	border-radius: var(--border-radius-5px);
	box-shadow: var(--box-shadow-tw);
	height: 170px;
	overflow: auto;
	padding: var(--space-tight);
	position: absolute;
	right: var(--space-tight);
	bottom: var(--space-tight);
	width: 500px;
	z-index: 100;
}

.sql-log-pane-content {
	margin: 0;
}