.settings-menu-root {
    position: relative;
}

.settings-menu-toggle {
    width: 4.6dvh;
    height: 4.6dvh;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0.125dvh solid rgba(216, 185, 124, 0.35);
    border-radius: 50%;
    background: rgba(18, 26, 39, 0.92);
    color: #f4efe2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.settings-menu-toggle:hover {
    background: rgba(42, 56, 80, 0.98);
    border-color: rgba(216, 185, 124, 0.65);
}

.settings-menu-toggle[aria-expanded="true"] {
    transform: rotate(30deg);
}

.settings-menu-toggle svg {
    width: 2.4dvh;
    height: 2.4dvh;
    fill: currentColor;
}

.battle-settings .settings-menu-toggle {
    box-shadow: 0 0.6dvh 1.6dvh rgba(0, 0, 0, 0.22);
}

.settings-menu-panel {
    position: absolute;
    top: calc(100% + 1dvh);
    right: 0;
    width: min(34dvh, 78vw);
    display: grid;
    gap: 1.25dvh;
    padding: 1.5dvh;
    border-radius: 1dvh;
    border: 0.125dvh solid rgba(216, 185, 124, 0.24);
    background:
        linear-gradient(180deg, rgba(11, 17, 27, 0.98), rgba(18, 28, 42, 0.96)),
        radial-gradient(circle at top, rgba(175, 120, 60, 0.16), transparent 48%);
    box-shadow: 0 1.6dvh 4dvh rgba(0, 0, 0, 0.35);
    z-index: 200;
}

.settings-menu-panel[hidden] {
    display: none;
}

.settings-menu-title {
    font-size: 1.65dvh;
    font-weight: 700;
    color: #f7fbff;
}

.settings-menu-group {
    display: grid;
    gap: 0.8dvh;
}

.settings-menu-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1dvh;
    padding: 1dvh 1.15dvh;
    border: 0.125dvh solid rgba(216, 185, 124, 0.22);
    border-radius: 0.8dvh;
    background: rgba(255, 255, 255, 0.04);
    color: #f4efe2;
    cursor: pointer;
}

.settings-menu-section-caret {
    font-size: 1.8dvh;
    line-height: 1;
    color: #d8b97c;
}

.settings-menu-section-body {
    display: grid;
    gap: 1dvh;
    padding: 0.4dvh 0.2dvh 0;
}

.settings-menu-section-body[hidden] {
    display: none;
}

.settings-menu-field {
    display: grid;
    gap: 0.8dvh;
}

.settings-menu-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1dvh;
    font-size: 1.4dvh;
    color: #d8d3c6;
}

.settings-menu-slider {
    width: 100%;
    accent-color: #d8b97c;
    cursor: pointer;
}

.settings-menu-action {
    min-height: 4.6dvh;
    padding: 0.8dvh 1.6dvh;
    border: 0.125dvh solid rgba(216, 185, 124, 0.24);
    border-radius: 0.6dvh;
    background: rgba(28, 38, 56, 0.92);
    color: #f4efe2;
    cursor: pointer;
}

.settings-menu-action.is-danger {
    background: #7f1d1d;
    border: 0.2dvh solid rgba(255, 255, 255, 0.45);
    color: #fff;
}

.settings-menu-action.is-danger:hover {
    background: #991b1b;
}

body.input-touch-primary .battle-settings {
    top: 1dvh;
    right: 0.8dvh;
    z-index: 260;
}

body.input-touch-primary .battle-settings .settings-menu-toggle {
    width: 4.2dvh;
    height: 4.2dvh;
    opacity: 0.42;
    border-color: rgba(216, 185, 124, 0.2);
    background: rgba(10, 16, 24, 0.36);
    backdrop-filter: blur(1.1dvh) saturate(0.74);
    -webkit-backdrop-filter: blur(1.1dvh) saturate(0.74);
    box-shadow: 0 0.4dvh 1.1dvh rgba(0, 0, 0, 0.18);
}

body.input-touch-primary .battle-settings .settings-menu-toggle:hover,
body.input-touch-primary .battle-settings .settings-menu-toggle:focus-visible {
    opacity: 0.9;
    background: rgba(18, 26, 39, 0.84);
    border-color: rgba(216, 185, 124, 0.58);
}

body.input-touch-primary .battle-settings .settings-menu-toggle[aria-expanded="true"] {
    opacity: 0.96;
    background: rgba(18, 26, 39, 0.9);
    border-color: rgba(216, 185, 124, 0.62);
    box-shadow: 0 0.8dvh 2dvh rgba(0, 0, 0, 0.24);
}

body.input-touch-primary .battle-settings .settings-menu-panel {
    top: calc(100% + 0.8dvh);
    right: 0;
}