.dotdungeon .actor--pc .active.stats-panel {
	display: grid;
	height: 100%;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;

	.stat {
		border-radius: 8px;
		display: flex;
		flex-direction: column;

		select {
			height: 100%;
			outline: none;
			border: none;
			text-align: center;
		}

		&__header {
			padding: 8px;
			display: flex;
			align-items: center;
			flex-direction: row;
			color: var(--stat-divider-text-color);
			gap: 8px;
			> h2 {
				flex-grow: 1;
				color: var(--stat-header-text-color);
			}
			.dice-select {
				color: var(--stat-dice-select-text-color);
				option {
					background: var(--stat-dice-select-bg);
				}
			}
			.roll-stat {
				color: var(--stat-roll-button-text-color);
			}

			&:not(:only-child) {
				border-bottom: 1px solid var(--stat-divider-color);
			}
		}

		&__empty {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
		}

		&__skills {
			align-items: center;
			box-sizing: border-box;
			display: grid;
			gap: 8px;
			grid-template-columns: repeat(3, 1fr);
			padding: 8px;

			.skill {
				&__label {
					text-align: end;
					justify-self: right;
					color: var(--skill-name-text-color);
				}
				&__training {
					color: var(--skill-training-select-text-color);
					option {
						background: var(--skill-training-select-bg);
					}
				}
				&__roll {
					margin-right: 25%;
					color: var(--skill-roll-button-text-color);
				}
			}
		}
	}
}