/**
 * Main landing page styles.
 * Keeps original logo + side characters and aligns visuals with forum theme.
 */

:root {
    --index-bg-deep: #101820;
    --index-bg-mid: #1a2b34;
    --index-bg-soft: #2e3f37;
    --index-paper: rgba(244, 234, 214, 0.96);
    --index-paper-dim: rgba(239, 228, 205, 0.95);
    --index-line: rgba(200, 184, 150, 0.7);
    --index-ink: #22303a;
    --index-ink-soft: #5b6e80;
    --index-accent: #2f4f67;
    --index-accent-hover: #3b6280;
    --index-shadow-main: 0 18px 40px rgba(0, 0, 0, 0.35);
    --index-shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.2);
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body.index-page,
body {
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: var(--index-ink);
    background:
        radial-gradient(circle at 20% 0%, rgba(52, 72, 62, 0.7) 0%, transparent 36%),
        radial-gradient(circle at 88% 14%, rgba(58, 47, 38, 0.62) 0%, transparent 40%),
        linear-gradient(140deg, var(--index-bg-deep) 0%, var(--index-bg-mid) 52%, var(--index-bg-soft) 100%);
}

body.index-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("bg.png") center center / cover no-repeat;
    opacity: 0.28;
}

.index-main {
    position: relative;
    z-index: 3;
    min-height: calc(100vh - 108px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.index-hero {
    width: min(100%, 620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateY(clamp(-72px, -8vh, -34px));
}

.index-logo-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px 12px;
}

.index-logo-shell::before {
    content: "";
    position: absolute;
    inset: -10% -8% -12%;
    border-radius: 48%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(167, 214, 248, 0.24) 0%, rgba(122, 179, 216, 0.14) 38%, rgba(13, 23, 33, 0) 72%);
    filter: blur(10px);
    animation: index-logo-glow 4.8s ease-in-out infinite;
}

.index-logo-shell::after {
    content: "";
    position: absolute;
    inset: -2% -6% -8%;
    border-radius: 46%;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 60%, rgba(18, 31, 43, 0.14) 78%, rgba(16, 24, 32, 0.52) 100%);
    filter: blur(11px);
}

.index-logo {
    position: relative;
    z-index: 1;
    width: min(100%, 600px);
    max-width: 90vw;
    height: auto;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.38)) drop-shadow(0 0 14px rgba(170, 214, 245, 0.24));
    animation: index-logo-float 5.6s ease-in-out infinite;
}

.index-login-card {
    width: min(100%, 420px);
    border: 1px solid var(--index-line);
    border-radius: 16px;
    background: linear-gradient(180deg, var(--index-paper), var(--index-paper-dim));
    box-shadow: var(--index-shadow-main);
    padding: 16px;
    box-sizing: border-box;
}

.index-error-title {
    margin: 0;
    font-family: "Copperplate", "Times New Roman", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0.04em;
    color: #25303a;
    text-align: center;
    text-transform: uppercase;
}

.index-error-text {
    margin: 6px 0 0;
    text-align: center;
    color: #3a4d5f;
    font-size: 14px;
    min-height: 20px;
    line-height: 1.3;
}

.index-auth-form {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.index-field {
    display: grid;
    gap: 4px;
}

.index-label {
    color: #3c4f61;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.loginBox.index-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(87, 72, 43, 0.34);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.86);
    color: #23303a;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 14px;
}

.loginBox.index-input:focus {
    outline: none;
    border-color: rgba(44, 79, 106, 0.74);
    box-shadow: 0 0 0 2px rgba(61, 98, 128, 0.2);
    background: rgba(255, 255, 255, 0.95);
}

.index-submit-button {
    margin-top: 6px;
    min-height: 42px;
    border: 1px solid rgba(34, 52, 66, 0.62);
    background: linear-gradient(160deg, #3d627d, #263f52);
    padding: 0 18px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-self: center;
    line-height: 1;
    box-shadow: 0 7px 14px rgba(18, 27, 34, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.index-submit-gem {
    width: 10px;
    height: 10px;
    display: inline-block;
    position: relative;
    border-radius: 999px;
    background: radial-gradient(circle at 34% 28%, #c7ffd4 0%, #5dc46f 55%, #2d7d3d 100%);
    box-shadow: 0 0 0 2px rgba(191, 244, 204, 0.28), 0 0 10px rgba(74, 201, 108, 0.56);
    animation: index-gem-blink 1.25s ease-in-out infinite;
}

.index-submit-gem::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 999px;
    background: rgba(102, 232, 136, 0.35);
    filter: blur(2px);
    z-index: -1;
    animation: index-gem-aura 1.25s ease-in-out infinite;
}

@keyframes index-gem-blink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes index-gem-aura {
    0% {
        opacity: 0.22;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.68;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.22;
        transform: scale(0.9);
    }
}

.index-submit-label {
    font-family: "Copperplate", "Times New Roman", serif;
    font-size: 14px;
    font-weight: 700;
    color: #ecf4fa;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.index-submit-button:hover,
.index-submit-button:focus-visible {
    transform: translateY(-1px);
    background: linear-gradient(160deg, #4a7391, #2e4a60);
    box-shadow: 0 10px 18px rgba(18, 27, 34, 0.34);
}

.index-submit-button:focus-visible {
    outline: 2px solid rgba(44, 79, 106, 0.5);
    outline-offset: 3px;
}

.index-footer {
    position: relative;
    z-index: 4;
    width: min(100%, 980px);
    margin: 0 auto 12px;
    border-radius: 16px;
    border: 1px solid rgba(200, 184, 150, 0.6);
    background: linear-gradient(130deg, rgba(244, 234, 214, 0.88), rgba(232, 220, 197, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 10px 12px;
    box-sizing: border-box;
}

.index-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.index-links-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(34, 52, 66, 0.55);
    background: linear-gradient(160deg, #39576d, #253c4c);
    color: #edf4f9;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, text-shadow 0.15s ease;
}

.index-links-link:hover,
.index-links-link:focus-visible {
    text-decoration: none;
    color: #edf4f9;
    background: linear-gradient(160deg, #466882, #2a4558);
    transform: translateY(-1px);
    box-shadow: var(--index-shadow-soft);
    text-shadow: 0 0 8px rgba(201, 223, 240, 0.4);
}

.index-copy {
    margin-top: 8px;
    text-align: center;
    color: #647384;
    font-size: 11px;
}

.index-bg-left,
.index-bg-right {
    position: fixed;
    z-index: 1;
    bottom: 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 18px rgba(166, 213, 245, 0.18));
    transform-origin: center bottom;
    will-change: transform, filter;
}

.index-bg-left {
    opacity: 0.82;
    left: 0;
    width: clamp(220px, 27vw, 440px);
}

.index-bg-right {
    opacity: 0.82;
    right: 0;
    width: clamp(220px, 27vw, 440px);
}

.index-sound-layer {
    position: fixed;
    z-index: 6;
    top: 10px;
    left: 10px;
}

.index-sound-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(200, 184, 150, 0.48);
    background: rgba(18, 28, 36, 0.55);
    color: #b7c2cd;
    font-size: 11px;
    font-style: normal;
    cursor: pointer;
}

.index-sound-toggle img {
    width: 14px;
    height: 14px;
}

.index-sound-toggle span {
    line-height: 1;
}

@keyframes index-logo-float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes index-logo-glow {
    0% {
        opacity: 0.45;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.02);
    }
    100% {
        opacity: 0.45;
        transform: scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {
    .index-logo,
    .index-logo-shell::before,
    .index-submit-gem,
    .index-submit-gem::after {
        animation: none;
    }
}

@media screen and (max-width: 900px) {
    .index-main {
        min-height: calc(100vh - 122px);
        align-items: flex-start;
        padding-top: 18px;
    }

    .index-logo {
        max-width: 84vw;
    }

    .index-logo-shell {
        padding-bottom: 10px;
    }

    .index-hero {
        transform: translateY(clamp(-12px, -2vh, 0px));
    }

    .index-bg-left,
    .index-bg-right {
        opacity: 0.58;
        max-height: 64vh;
    }

    .index-bg-left {
        width: clamp(220px, 44vw, 380px);
    }

    .index-bg-right {
        width: clamp(190px, 40vw, 350px);
    }
}

@media screen and (max-width: 640px) {
    .index-main {
        min-height: calc(100vh - 134px);
        padding: 16px 10px 10px;
    }

    .index-hero {
        width: 100%;
        gap: 8px;
        transform: translateY(clamp(8px, 2.2vh, 22px));
    }

    .index-logo {
        max-width: 80vw;
    }

    .index-bg-left,
    .index-bg-right {
        opacity: 0.46;
        max-height: 56vh;
    }

    .index-bg-left {
        width: clamp(205px, 58vw, 320px);
        left: -6px;
    }

    .index-bg-right {
        width: clamp(175px, 52vw, 300px);
        right: -6px;
    }

    .index-logo-shell {
        padding: 2px 4px 10px;
    }

    .index-login-card {
        width: min(100%, 370px);
        padding: 12px;
        border-radius: 14px;
    }

    .index-error-title {
        font-size: 19px;
    }

    .index-error-text {
        font-size: 13px;
    }

    .loginBox.index-input {
        min-height: 38px;
        font-size: 16px;
    }

    .index-submit-button {
        min-height: 40px;
        padding: 0 16px;
    }

    .index-submit-label {
        font-size: 13px;
    }

    .index-links-link {
        flex: 1 1 auto;
        min-width: 150px;
    }

    .index-footer {
        width: calc(100% - 12px);
        margin-bottom: 8px;
        border-radius: 14px;
        padding: 8px;
    }

    .index-copy {
        font-size: 10px;
    }

    .index-sound-layer {
        top: 6px;
        left: 6px;
    }
}