/* =========================================================
   J. Atari's Mate — Warm Amber
   Responsive / Accessible / Vanilla CSS
   ========================================================= */

/* 1. Theme */

:root {
    color-scheme: light;

    --page-bg: #fff3e4;
    --page-glow: #ffdfb3;

    --card-bg: #fffaf3;
    --card-border: #f0d5b6;

    --text: #493024;
    --text-muted: #927260;

    --accent: #d97732;
    --accent-hover: #b95c22;
    --accent-soft: #fbe2c5;

    --input-bg: #fffdf9;
    --input-border: #e7c9aa;

    --focus: #a94f16;
    --error: #b42318;

    --radius-card: 20px;
    --radius-control: 10px;

    --card-width: 440px;
    --card-padding: clamp(24px, 5vw, 38px);

    --shadow-card:
        0 24px 60px rgb(123 69 28 / 10%),
        0 5px 16px rgb(123 69 28 / 6%);
}


/* 2. Base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;

    color: var(--text);

    background:
        radial-gradient(
            ellipse at 15% 15%,
            rgb(255 195 120 / 42%),
            transparent 42%
        ),
        radial-gradient(
            ellipse at 85% 85%,
            rgb(224 133 57 / 16%),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #fff5e9 0%,
            #ffead3 48%,
            #f8dfc4 100%
        );

    font-family:
        "Noto Sans JP",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 16px;
    line-height: 1.7;

    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* 3. Main layout */

main {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    padding: 28px 16px;
}

.login-box {
    width: 100%;
    max-width: var(--card-width);
    min-width: 0;
}


/* 4. Card */

#form.login-form {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 30px;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: var(--card-padding);

    background: rgb(255 250 243 / 94%);

    border: 1px solid var(--card-border);
    border-radius: var(--radius-card);

    box-shadow: var(--shadow-card);

    text-align: left;

    /*
       backdrop-filter に対応しないブラウザでも
       背景色だけで表示できる。
    */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 上辺に暖色のアクセントを設ける */
#form.login-form::before {
    content: "";

    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;

    height: 3px;

    background: linear-gradient(
        90deg,
        #e8a05d,
        #d97732,
        #f0c28c
    );

    border-radius: 0 0 4px 4px;
}


/* 5. Content */

.login-data {
    display: flex;
    flex-direction: column;
    gap: 28px;

    width: 100%;
    min-width: 0;
}


/* 6. Logo and heading */

.login-chara {
    width: 100%;
    text-align: center;
}

.login-chara img {
    width: 46px;
    height: auto;

    margin: 0 auto 16px;

    object-fit: contain;

    /*
       ロゴの画像そのものは加工しない。
       必要に応じて画像側で余白を調整する。
    */
}

.login-chara h2 {
    margin: 0 0 12px;

    color: #7d421f;

    font-family:
        "DotGothic16",
        "Noto Sans JP",
        sans-serif;

    font-size: clamp(28px, 5vw, 34px);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.035em;
}

.login-chara p {
    margin: 6px 0 0;

    color: var(--text-muted);

    font-size: 14px;
    line-height: 1.8;

    overflow-wrap: anywhere;
}

/* エラー表示 */

#message {
    color: var(--error);
    font-size: 14px;
    line-height: 1.6;
}

/* 空のスペーサー */

.login-typer .sizer {
    display: none;
}


/* 7. Entry code */

.login-typer {
    display: flex;
    flex-direction: column;
    gap: 9px;

    width: 100%;
    min-width: 0;
}

.login-typer label {
    color: #75482e;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.025em;
}

#form input[type="text"] {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 52px;

    margin: 0;
    padding: 13px 15px;

    appearance: none;
    -webkit-appearance: none;

    background: var(--input-bg);
    color: var(--text);

    border: 1px solid var(--input-border);
    border-radius: var(--radius-control);

    font: inherit;
    font-size: 16px;
    line-height: 1.5;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

#form input[type="text"]::placeholder {
    color: #b59a85;
    opacity: 1;
}

#form input[type="text"]:hover {
    border-color: #d9a775;
}

#form input[type="text"]:focus {
    background: #ffffff;

    border-color: var(--accent);
    outline: none;

    box-shadow:
        0 0 0 3px rgb(217 119 50 / 16%);
}


/* 8. Entry button */

.login-button {
    display: flex;

    width: 100%;
    min-width: 0;
}

#form input[type="submit"] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 50px;

    margin: 0;
    padding: 12px 18px;

    appearance: none;
    -webkit-appearance: none;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #e28a43 0%,
        #d36c2b 55%,
        #bd5824 100%
    );

    border: 1px solid #cc692d;
    border-radius: var(--radius-control);

    box-shadow:
        0 4px 10px rgb(173 85 32 / 18%);

    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.04em;

    text-align: center;
    cursor: pointer;
    touch-action: manipulation;

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

#form input[type="submit"]:hover:not(:disabled) {
    background: linear-gradient(
        135deg,
        #e99750 0%,
        #c96127 100%
    );

    box-shadow:
        0 6px 16px rgb(173 85 32 / 24%);
}

#form input[type="submit"]:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
        0 2px 6px rgb(173 85 32 / 16%);
}

#form input[type="submit"]:disabled {
    opacity: 0.65;
    cursor: wait;
    box-shadow: none;
}


/* 9. Keyboard accessibility */

#form input[type="text"]:focus-visible,
#form input[type="submit"]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}


/* 10. Small screens */

@media (max-width: 360px) {
    main {
        padding: 18px 10px;
    }

    #form.login-form {
        padding: 24px 18px;
        gap: 24px;
    }

    .login-data {
        gap: 22px;
    }

    .login-chara h2 {
        font-size: 28px;
    }
}


/* 11. Short viewports */

@media (max-height: 480px) {
    main {
        align-items: flex-start;
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


/* 12. Reduced motion */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* 13. Optional dark warm theme */

/*
   ダークテーマを利用する場合はコメントを解除する。
   橙色のアクセントを残し、背景を深い茶色に変更する。

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --page-bg: #201711;
        --page-glow: #58351d;

        --card-bg: #2c211a;
        --card-border: #59402e;

        --text: #f7e8d8;
        --text-muted: #c2a58e;

        --accent: #f0a05c;
        --accent-hover: #ffb778;
        --accent-soft: #593820;

        --input-bg: #241b16;
        --input-border: #684b35;

        --focus: #ffc080;
        --error: #ff9589;

        --shadow-card:
            0 24px 60px rgb(0 0 0 / 25%);
    }

    body {
        background:
            radial-gradient(
                ellipse at 15% 15%,
                rgb(183 95 37 / 18%),
                transparent 42%
            ),
            linear-gradient(
                145deg,
                #211812,
                #302016 60%,
                #1d1713
            );
    }

    #form.login-form {
        background: rgb(44 33 26 / 96%);
    }

    .login-chara h2 {
        color: #f2b77f;
    }

    .login-typer label {
        color: #e4bd9a;
    }

    #form input[type="text"] {
        background: var(--input-bg);
        color: var(--text);
    }

    #form input[type="text"]::placeholder {
        color: #b49a85;
    }

    #form input[type="submit"] {
        color: #29190f;
        background: linear-gradient(
            135deg,
            #f4b06e,
            #dc7c38
        );
        border-color: #e49a5c;
    }
}
*/