/* simple aquatic glassmorphism-ish theme. von czjstmax <jstmaxlol at disroot dot org>*/
/* AI note: this was partly modified with AI (!) */

@font-face {
    font-family: OpenSans;
    src: url(../font/OpenSans-Regular.ttf);
}
@font-face {
    font-family: OpenSansSB;
    src: url(../font/OpenSans-SemiBold.ttf);
}
@font-face {
    font-family: FaSolid;
    src: url(../font/fa-solid.otf);
}

:root {
    --ocean-void:    #020d1a;
    --ocean-deep:    #071e3d;
    --ocean-mid:     #0a3d62;
    --ocean-surface: #0d5a8a;
    --cyan-glow:     #00c8d4;
    --cyan-light:    #7de8f0;
    --cyan-faint:    rgba(0, 200, 212, 0.10);
    --glass-white:   rgba(255, 255, 255, 0.06);
    --glass-border:  rgba(125, 232, 240, 0.18);
    --text-main:     #dff4f8;
    --text-muted:    #6fa8b8;
    --text-dim:      #3d7a90;
    --red-err:       #ff4f6a;
    --scrollbar:     rgba(125, 232, 240, 0.35);
}

html, * {
    font-family: OpenSans;
    background: 0;
}

html, body {
    margin: 0;
    height: 100%;
    width: 100%;
}

html {
    background: transparent;
}

.nanobar .bar {
    background: linear-gradient(90deg, var(--cyan-glow), var(--cyan-light));
    box-shadow: 0 0 8px var(--cyan-glow);
}

.container {
    border-radius: 12px;
    overflow: hidden;
    transition: opacity 0.6s ease;
    opacity: 0;
    height: auto;
    background: var(--ocean-deep);
    box-shadow:
        0 0 0 1px var(--glass-border),
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(0, 200, 212, 0.04);
}

.visible {
    opacity: 1;
}

.header {
    color: var(--text-main);
    height: 50px;
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, var(--ocean-mid) 0%, #082f52 100%);
    user-select: none;
    -webkit-user-select: none;
    -webkit-app-region: drag;
    border-bottom: 1px solid var(--glass-border);
    overflow: hidden;
}

.header::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 100%);
    pointer-events: none;
}

.header .title {
    width: 300px;
    position: absolute;
    top: 0;
    left: 16px;
    line-height: 50px;
    font-weight: bold;
    font-family: OpenSansSB;
    letter-spacing: 0.04em;
    color: var(--cyan-light);
    text-shadow: 0 0 12px rgba(125, 232, 240, 0.5);
}

.buttonbox {
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 2%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: right;
}

.buttonbox button {
    text-align: center;
    padding: 2px;
    font-weight: bold;
    font-family: FaSolid;
    border: none;
    background: none;
    height: 30px;
    width: 30px;
    color: var(--text-muted);
    font-size: 25px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    transition: color 0.15s;
}

.buttonbox button:hover {
    color: var(--cyan-light);
}

.title button {
    font-family: FaSolid;
    border: none;
    background: none;
    height: 30px;
    width: 30px;
    color: var(--text-muted);
    font-size: 25px;
    padding: 2px;
    cursor: pointer;
    -webkit-app-region: no-drag;
    transition: color 0.15s, text-shadow 0.15s;
    font-weight: bold;
}

.title button:hover {
    color: var(--cyan-light);
    text-shadow: 0 0 8px var(--cyan-glow);
}

.title button#btnSettings {
    left: 50px;
    top: 11px;
    position: absolute;
    font-size: 22px;
}

.title button#btnPause {
    left: 78px;
    top: 11px;
    position: absolute;
    font-size: 21px;
}

.title button#btnHome {
    left: 50px;
    top: 10px;
    position: absolute;
    font-size: 20px;
}

#appTitle {
    color: var(--cyan-light);
    text-decoration: none;
    cursor: default;
    -webkit-app-region: none;
}

.main {
    padding-top: 20px;
    padding-bottom: 15px;
    user-select: none;
    background: var(--ocean-deep);
    color: var(--text-main);
    max-height: 350px;
    overflow-y: scroll;
}

.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.controls label {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.controls label input {
    margin-top: 10px;
    display: block;
    accent-color: var(--cyan-glow);
}

.game-select {
    margin-top: 14px;
    text-align: center;
}

select {
    appearance: none;
    border: 1px solid var(--glass-border);
    outline: 0;
    font-size: 14px;
    width: 79%;
    height: 3em;
    padding: 0 4em 0 1em;
    background:
        url(../font/caret.svg) no-repeat right 0.8em center / 1.4em,
        linear-gradient(135deg, rgba(0,200,212,0.08) 0%, rgba(10,61,98,0.6) 100%);
    color: var(--text-main);
    border-radius: 8px;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 0 0 1px rgba(0,200,212,0.08),
        0 2px 8px rgba(0,0,0,0.3);
    transition: border-color 0.2s, box-shadow 0.2s;
}

select:hover, select:focus {
    border-color: rgba(125, 232, 240, 0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 1px rgba(0,200,212,0.2),
        0 0 16px rgba(0,200,212,0.1);
}

select option {
    color: var(--text-main);
    background-color: #061828;
}

select optgroup {
    color: var(--text-muted);
    background-color: #061828;
}

.bottom-support {
    text-align: center;
    margin-top: 10px;
}

.bottom-support button {
    margin-top: 10px;
    font-weight: bold;
    border: none;
    background: none;
    height: 30px;
    color: var(--text-muted);
    cursor: pointer;
    width: 70px;
    font-size: 10px;
    font-family: OpenSans;
    transition: color 0.15s;
}

.bottom-support button:hover {
    color: var(--cyan-light);
}

.settings label {
    margin-left: 25px;
    margin-bottom: 7px;
    display: block;
    color: var(--text-main);
    font-size: 13px;
}

.settings label span.tiny {
    font-size: 10px;
    display: inline-block;
    vertical-align: top;
    line-height: 20px;
    color: var(--text-dim);
}

.settings p, .tune-settings p, .changelog p, .credits p[role], .kk-customize p {
    text-align: center;
    font-weight: bold;
    font-family: OpenSansSB;
    margin-bottom: 15px;
    color: var(--cyan-light);
    letter-spacing: 0.03em;
}

.url-label {
    margin-top: 14px !important;
}

.url-label input[type="text"] {
    display: block;
    margin-top: 6px;
    margin-left: 0;
    width: calc(100% - 100px);
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    color: var(--text-main);
    padding: 5px 8px;
    font-size: 12px;
    font-family: OpenSans;
    outline: none;
}

.url-label input[type="text"]:focus {
    border-color: var(--cyan-glow);
    box-shadow: 0 0 8px rgba(0,200,212,0.2);
}

.btnContainer {
    text-align: center;
}

button.download,
.save-tune-btn button,
.kk-btn button,
button.towntune-custom,
button#kkCustomize,
button#btnSaveUrl,
button#btnTowntuneCustomize {
    margin-top: 10px;
    font-weight: bold;
    border: 1px solid var(--glass-border);
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(0,200,212,0.12) 0%, rgba(10,61,98,0.4) 100%);
    height: 30px;
    color: var(--cyan-light);
    cursor: pointer;
    padding: 0 12px;
    font-size: 10px;
    font-family: OpenSans;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}

button.download:hover,
.save-tune-btn button:hover,
.kk-btn button:hover,
button.towntune-custom:hover,
button#kkCustomize:hover,
button#btnSaveUrl:hover,
button#btnTowntuneCustomize:hover {
    background: linear-gradient(135deg, rgba(0,200,212,0.22) 0%, rgba(10,61,98,0.6) 100%);
    border-color: rgba(125,232,240,0.4);
    box-shadow: 0 0 12px rgba(0,200,212,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
}

button#btnClearSettings {
    margin-top: 10px;
    font-weight: bold;
    border: 1px solid rgba(255, 79, 106, 0.3);
    border-radius: 6px;
    background: rgba(255,79,106,0.08);
    height: 30px;
    color: var(--red-err);
    cursor: pointer;
    width: 200px;
    padding: 0;
    font-size: 10px;
    font-family: OpenSans;
    transition: background 0.2s, border-color 0.2s;
}

button#btnClearSettings:hover {
    background: rgba(255,79,106,0.16);
    border-color: rgba(255,79,106,0.5);
}

.credits-body {
    padding: 0 24px 10px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}

.credits-body strong {
    color: var(--cyan-light);
}

.credits-body a {
    color: var(--cyan-glow);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, text-shadow 0.15s;
}

.credits-body a:hover {
    color: var(--cyan-light);
    text-shadow: 0 0 8px var(--cyan-glow);
}

.credits-body hr {
    border: none;
    border-top: 1px solid var(--glass-border);
    margin: 10px 0;
}

.credits-body ul {
    margin: 6px 0 6px 18px;
    padding: 0;
}

.credits-body li {
    padding: 2px 0;
}

.credits-body p.tiny {
    font-size: 10px;
    color: var(--text-dim);
}

.changelog .log p {
    color: var(--cyan-light);
}

.changelog .log li {
    margin-left: 50px;
    margin-right: 50px;
    padding: 3px;
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
}

.changelog .log ul {
    margin-bottom: 15px;
}

.creator {
    padding-left: 53px;
    padding-right: 53px;
    height: 200px;
    width: auto;
    margin: auto;
    background: url('../img/tune_bg.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.creator .inputs {
    padding-top: 48px;
    display: flex;
    flex-wrap: wrap;
}

.creator .inputs label {
    transform: rotate(-90deg);
}

.creator input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 24px;
    margin-bottom: 34px;
    width: 53px;
    height: 1px;
    margin-left: -9px;
    margin-right: -8px;
}

.creator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background-size: 100% 120%, 170% 100%, 220% 100%;
}

.creator input[type="range"][c="1"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #adadad 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #adadad 0%, #adadad 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #adadad 0%, #adadad 10%, transparent 11%); }
.creator input[type="range"][c="2"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #b471dc 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #b471dc 0%, #b471dc 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #b471dc 0%, #b471dc 10%, transparent 11%); }
.creator input[type="range"][c="3"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #ba41db 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #ba41db 0%, #ba41db 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #ba41db 0%, #ba41db 10%, transparent 11%); }
.creator input[type="range"][c="4"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #1982d5 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #1982d5 0%, #1982d5 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #1982d5 0%, #1982d5 10%, transparent 11%); }
.creator input[type="range"][c="5"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #00aade 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #00aade 0%, #00aade 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #00aade 0%, #00aade 10%, transparent 11%); }
.creator input[type="range"][c="6"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #1fcda3 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #1fcda3 0%, #1fcda3 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #1fcda3 0%, #1fcda3 10%, transparent 11%); }
.creator input[type="range"][c="7"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #00aa00 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #00aa00 0%, #00aa00 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #00aa00 0%, #00aa00 10%, transparent 11%); }
.creator input[type="range"][c="8"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #83c700 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #83c700 0%, #83c700 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #83c700 0%, #83c700 10%, transparent 11%); }
.creator input[type="range"][c="9"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #f4c700 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #f4c700 0%, #f4c700 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #f4c700 0%, #f4c700 10%, transparent 11%); }
.creator input[type="range"][c="10"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #fea200 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #fea200 0%, #fea200 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #fea200 0%, #fea200 10%, transparent 11%); }
.creator input[type="range"][c="11"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #f97400 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #f97400 0%, #f97400 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #f97400 0%, #f97400 10%, transparent 11%); }
.creator input[type="range"][c="12"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #ec5c00 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #ec5c00 0%, #ec5c00 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #ec5c00 0%, #ec5c00 10%, transparent 11%); }
.creator input[type="range"][c="13"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #df300d 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #df300d 0%, #df300d 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #df300d 0%, #df300d 10%, transparent 11%); }
.creator input[type="range"][c="14"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #e23489 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #e23489 0%, #e23489 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #e23489 0%, #e23489 10%, transparent 11%); }
.creator input[type="range"][c="15"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #d945aa 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #d945aa 0%, #d945aa 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #d945aa 0%, #d945aa 10%, transparent 11%); }
.creator input[type="range"][c="16"]::-webkit-slider-thumb { background-image: radial-gradient(ellipse at center, #ff72d2 9px, transparent 10px), radial-gradient(ellipse at 22px 13px, #ff72d2 0%, #ff72d2 14%, transparent 15%), radial-gradient(ellipse at 21px 23px, #ff72d2 0%, #ff72d2 10%, transparent 11%); }

.creator .blink input ~ span::after { content: ''; font-family: FaSolid; position: absolute; vertical-align: middle; top: -21px; left: -2px; text-align: center; }
.creator .blink input[c="1"] ~ span::after { left: 6px; top: -22px; }
.creator .blink input[c="2"] ~ span::after { top: -15px; }
.creator .blink input[c="3"] ~ span::after { top: -22px; left: 1px; }
.creator .blink input[c="4"] ~ span::after { top: -20px; left: -1px; }
.creator .blink input[c="5"] ~ span::after { top: -20px; left: -1px; }
.creator .blink input[c="6"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="7"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="8"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="9"] ~ span::after { top: -20px; left: -1px; }
.creator .blink input[c="10"] ~ span::after { top: -20px; left: 1px; }
.creator .blink input[c="11"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="12"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="13"] ~ span::after { top: -21px; left: 0px; }
.creator .blink input[c="14"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="15"] ~ span::after { top: -20px; left: 0px; }
.creator .blink input[c="16"] ~ span::after { top: -21px; left: -2px; }

.creator .inputs label input ~ span { z-index: 1; transform: rotate(90deg); position: absolute; top: 20px; pointer-events: none; left: -4px; font-weight: bold; font-size: 15px; color: white; text-shadow: 0 0 4px #000000c7; }
.creator .inputs label input[c="1"] ~ span { left: -4px; }
.creator .inputs label input[c="1"] ~ span::before { content: 'zZz' }
.creator .inputs label input[c="2"] ~ span { left: 12px; }
.creator .inputs label input[c="2"] ~ span::before { content: '_' }
.creator .inputs label input[c="3"] ~ span { left: 4px; }
.creator .inputs label input[c="3"] ~ span::before { content: 'G' }
.creator .inputs label input[c="4"] ~ span { left: 7px; top: 21px; }
.creator .inputs label input[c="4"] ~ span::before { content: 'A' }
.creator .inputs label input[c="5"] ~ span { left: 8px; top: 21px; }
.creator .inputs label input[c="5"] ~ span::before { content: 'B' }
.creator .inputs label input[c="6"] ~ span { left: 9px; }
.creator .inputs label input[c="6"] ~ span::before { content: 'C' }
.creator .inputs label input[c="7"] ~ span { left: 10px; top: 21px; }
.creator .inputs label input[c="7"] ~ span::before { content: 'D' }
.creator .inputs label input[c="8"] ~ span { left: 13px; }
.creator .inputs label input[c="8"] ~ span::before { content: 'E' }
.creator .inputs label input[c="9"] ~ span { left: 14px; }
.creator .inputs label input[c="9"] ~ span::before { content: 'F' }
.creator .inputs label input[c="10"] ~ span { left: 15px; }
.creator .inputs label input[c="10"] ~ span::before { content: 'G' }
.creator .inputs label input[c="11"] ~ span { left: 17px; }
.creator .inputs label input[c="11"] ~ span::before { content: 'A' }
.creator .inputs label input[c="12"] ~ span { left: 19px; }
.creator .inputs label input[c="12"] ~ span::before { content: 'B' }
.creator .inputs label input[c="13"] ~ span { left: 19px; }
.creator .inputs label input[c="13"] ~ span::before { content: 'C' }
.creator .inputs label input[c="14"] ~ span { left: 21px; top: 21px; }
.creator .inputs label input[c="14"] ~ span::before { content: 'D' }
.creator .inputs label input[c="15"] ~ span { left: 24px; }
.creator .inputs label input[c="15"] ~ span::before { content: 'E' }
.creator .inputs label input[c="16"] ~ span { left: 26px; top: 21px; }
.creator .inputs label input[c="16"] ~ span::before { content: '?' }

.tune-settings p.tiny {
    text-align: center;
    font-size: 12px;
    color: var(--cyan-glow);
    margin-top: 10px;
    text-shadow: 0 0 8px rgba(0,200,212,0.4);
}

.error {
    position: absolute;
    z-index: 1;
    background: linear-gradient(135deg, #2a0a12 0%, #1a0508 100%);
    border-bottom: 1px solid rgba(255, 79, 106, 0.4);
    color: var(--red-err);
    width: 100%;
    height: auto;
    top: -50px;
    left: 0;
    display: flex;
    font-weight: bold;
    overflow-wrap: break-word;
    transition: top 0.2s ease 0.5s;
    border-radius: 8px;
}

.error div {
    margin: auto;
    padding: 16px 18px;
    text-align: center;
}

.show-error {
    top: 0;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 232, 240, 0.6);
}

*:focus-visible {
    outline: 2px dashed var(--cyan-glow);
    outline-offset: 2px;
}

.creator input:focus-visible {
    outline: 2px dashed var(--cyan-glow);
    outline-offset: 15px;
}

.towntune-setting {
    display: flex;
    align-items: baseline;
    margin-left: 25px;
    margin-bottom: 7px;
}

.hidden {
    display: none !important;
}

.loading {
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    background: var(--ocean-void);
}

.lang-label {
    text-align: center;
    font-weight: bold;
    margin-top: 15px !important;
    margin-bottom: 15px;
    margin-left: 0 !important;
}

.lang-label select {
    margin-top: 10px;
}

.save-tune-btn {
    margin-top: 5px;
}

.save-tune-btn button {
    width: 62px;
}

.kk-btn.btnContainer {
    margin-bottom: 13px;
    margin-top: -9px;
}
