/* Start screen (index.php). Loaded after style.css. */
/* ---------- Start screen (login) ---------- */
body.splash {
    color-scheme: light;
    min-height: 100vh;
    color: #fff;
    background-color: #0f2a1f;          /* shown if the image is missing */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.splash-langs { position: absolute; top: .75rem; right: 1rem; display: flex; gap: .25rem; z-index: 1; }
.splash-langs a {
    color: #fff; text-decoration: none; font-size: .875rem; padding: .15rem .55rem;
    border-radius: 6px; background: rgba(0,0,0,.35);
}
.splash-langs a[aria-current="true"] { background: rgba(255,255,255,.3); font-weight: 600; }
.splash-inner { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1.5rem 1rem; }
.splash-title {
    margin: 2.5rem 0 0; text-align: center; font-style: italic; font-weight: 700;
    font-size: clamp(1.5rem, 4vw, 2.4rem); text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.splash-inner main { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.splash-form {
    width: min(44rem, 100%); display: grid; grid-template-columns: max-content 1fr; gap: .9rem 1rem;
    align-items: center; padding: 1.25rem; border-radius: 6px;
    background: rgba(8,20,32,.35);
}
.splash-form label { margin: 0; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,.85); }
.splash-form input[type=text], .splash-form input[type=password] {
    background: rgba(240,240,240,.9); color: #111; border: 1px solid rgba(255,255,255,.65);
}
.splash-alert {
    grid-column: 1 / -1; padding: .6rem .8rem; border-radius: 6px;
    background: rgba(120,20,15,.9); color: #fff;
}
.splash-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: .25rem; }
.splash-btn {
    display: block; text-align: center; text-decoration: none; cursor: pointer;
    font: inherit; font-weight: 600; padding: .65rem .5rem; border-radius: 6px;
    color: #0d2433; background: rgba(214,234,248,.9); border: 1px solid rgba(255,255,255,.75);
}
.splash-btn:hover { background: rgba(238,247,253,.98); }
.splash .splash-btn:focus-visible, .splash input:focus-visible { outline: 3px solid #f2c230; outline-offset: 2px; }
.splash-footer { text-align: center; font-size: .75rem; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.splash-footer p { margin: 0; }
@media (max-width: 36rem) {
    .splash-form { grid-template-columns: 1fr; gap: .6rem; }
    .splash-form label { margin-top: .4rem; }
    .splash-buttons { grid-template-columns: 1fr; }
    .splash-title { margin-top: 3.25rem; }
}