/* ============================================================
   GLOBAL
   ============================================================ */

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

html {
    margin: 0;
    padding: 0;

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

body {
    margin: 0;
    padding: 0;

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

    display: flex;
    flex-direction: column;

    font-family:
        Tahoma,
        "Noto Sans Thai",
        sans-serif;

    color: #eef6ff;

    background:
        #071426
        url('../img/iris-world.png')
        center top / cover
        fixed
        no-repeat;
}


/* ============================================================
   BACKGROUND SHADE
   ============================================================ */

.shade {
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 12, 29, .70) 0%,
            rgba(2, 12, 29, .35) 45%,
            rgba(2, 12, 29, .16) 100%
        );

    z-index: -1;

    pointer-events: none;
}


/* ============================================================
   HEADER
   ============================================================ */

header {
    width: 100%;
    height: 84px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;

    padding: 0 5vw;

    gap: 45px;

    background:
        rgba(4, 15, 34, .68);

    border-bottom:
        1px solid rgba(137, 196, 255, .22);

    backdrop-filter:
        blur(12px);

    position: sticky;
    top: 0;

    z-index: 5;
}


.logo {
    font:
        900 28px Georgia;

    color: #fff;

    text-decoration: none;

    letter-spacing: 3px;

    text-shadow:
        0 0 18px #55aaff;
}


nav {
    display: flex;

    gap: 25px;

    flex-wrap: wrap;
}


nav a {
    color: #dcecff;

    text-decoration: none;

    font-weight: 700;
}


nav a:hover {
    color: #8fc9ff;
}


/* ============================================================
   MAIN
   ============================================================ */

/*
 * สำคัญ
 *
 * flex: 1 ทำให้ MAIN กินพื้นที่ว่างทั้งหมด
 * Footer จึงไม่ลอยขึ้นมากลางหน้าจอ
 */

main {
    width: min(1180px, 92%);

    margin: 0 auto;

    padding:
        56px
        0
        90px;

    flex: 1 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    min-height: 68vh;

    display: flex;

    align-items: center;
}


.hero .copy {
    max-width: 570px;
}


.eyebrow {
    letter-spacing: 5px;

    color: #8ec8ff;

    font-weight: 800;
}


.hero h1 {
    font:
        900 clamp(52px, 8vw, 104px)
        Georgia;

    margin:
        8px
        0
        4px;

    text-shadow:
        0 0 28px #2d82e8;
}


.hero h2 {
    font-size: 24px;

    margin:
        0
        0
        18px;

    color: #d9ebff;
}


.hero p {
    font-size: 17px;

    line-height: 1.8;

    color: #c9d8eb;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.btns {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 26px;
}


.btn {
    display: inline-block;

    padding:
        13px
        22px;

    border-radius: 8px;

    background:
        linear-gradient(
            #6ab9ff,
            #2876d1
        );

    color: #fff;

    text-decoration: none;

    font-weight: 800;

    border:
        1px solid #9ed2ff;

    box-shadow:
        0 8px 30px #001a3d;
}


.btn.alt {
    background:
        rgba(8, 29, 59, .8);
}


/* ============================================================
   GRID
   ============================================================ */

.grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;
}


.card,
.panel {
    background:
        rgba(5, 20, 43, .78);

    border:
        1px solid rgba(136, 197, 255, .28);

    box-shadow:
        0 18px 60px rgba(0, 0, 0, .3);

    backdrop-filter:
        blur(12px);

    border-radius: 14px;

    padding: 24px;
}


.card h3,
.panel h1 {
    margin-top: 0;
}


.panel {
    max-width: 720px;
}


/* ============================================================
   FIELDS
   ============================================================ */

.field {
    margin:
        15px
        0;
}


.field label {
    display: block;

    margin-bottom: 7px;

    color: #bcd6f3;
}


.field input,
.field select {
    width: 100%;

    padding: 13px;

    border:
        1px solid #31577d;

    border-radius: 7px;

    background:
        #071a31;

    color: white;

    outline: none;
}


/* ============================================================
   NOTICES
   ============================================================ */

.notice {
    padding:
        12px
        14px;

    border-radius: 7px;

    margin:
        12px
        0;

    background:
        rgba(48, 116, 184, .22);

    border:
        1px solid #3976ad;
}


.error {
    background:
        rgba(160, 39, 55, .35);

    border-color:
        #9c4653;
}


.ok {
    background:
        rgba(28, 128, 91, .32);

    border-color:
        #388a6e;
}


/* ============================================================
   TABLE
   ============================================================ */

table {
    width: 100%;

    border-collapse: collapse;
}


td,
th {
    padding: 12px;

    border-bottom:
        1px solid #27435f;

    text-align: left;
}


/* ============================================================
   FOOTER
   ============================================================ */

/*
 * สำคัญ
 *
 * Footer ไม่ Fixed
 * ไม่ Absolute
 *
 * ถ้าเนื้อหาสั้นจะอยู่ท้ายจอ
 * ถ้าเนื้อหายาวจะอยู่ท้ายเนื้อหา
 */

footer {
    position: relative;

    width: 100%;

    flex: 0 0 auto;

    margin-top: auto;

    text-align: center;

    padding: 25px;

    background:
        #031020;

    color:
        #7890aa;

    z-index: 2;
}


/* ============================================================
   BASIC RESPONSIVE
   ============================================================ */

@media (max-width: 850px) {

    header {
        height: auto;

        padding:
            18px
            5vw;

        display: block;
    }


    .logo {
        display: block;

        margin-bottom: 14px;
    }


    nav {
        gap: 13px;
    }


    .grid {
        grid-template-columns:
            1fr;
    }


    .hero {
        min-height: 58vh;
    }


    .shade {
        background:
            rgba(2, 12, 29, .5);
    }
}


/* ============================================================
   REGISTRATION PAGE
   ============================================================ */

.register-shell {
    width:
        min(770px, 96%);

    margin:
        0 auto;

    background:
        linear-gradient(
            180deg,
            rgba(7, 22, 46, .92),
            rgba(6, 24, 50, .9)
        );

    border:
        1px solid rgba(72, 139, 221, .34);

    border-radius:
        18px;

    padding:
        34px
        24px
        30px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .42),
        inset 0 1px rgba(255, 255, 255, .025);

    backdrop-filter:
        blur(16px);
}


.register-brand {
    text-align: center;

    height: 74px;

    position: relative;

    color:
        #eaf7ff;

    text-shadow:
        0 0 8px #42a5ff,
        0 0 22px #126ed7;

    line-height: 1;
}


.brand-wings {
    font-size: 18px;

    color:
        #83cfff;
}


.brand-main {
    font:
        italic 900 27px
        Georgia,
        serif;

    letter-spacing:
        -1px;
}


.brand-sub {
    font:
        700 8px
        Georgia,
        serif;

    letter-spacing:
        2px;

    color:
        #a9d9ff;

    margin-top:
        3px;
}


.register-heading {
    text-align:
        center;

    margin:
        3px
        0
        24px;
}


.register-heading h1 {
    font-size:
        25px;

    margin:
        0
        0
        7px;
}


.register-heading p {
    margin:
        0;

    color:
        #6f839f;

    font-size:
        12px;
}


.register-form {
    display:
        block;
}


.register-form .field {
    margin:
        0
        0
        18px;
}


.register-form label {
    font-size:
        12px;

    font-weight:
        700;

    color:
        #91a5bf;

    margin-bottom:
        8px;
}


.form-grid {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        0
        14px;
}


.input-icon {
    position:
        relative;
}


.input-icon > span {
    position:
        absolute;

    left:
        13px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #536a87;

    font-size:
        14px;

    z-index:
        1;
}


.register-form .input-icon input,
.register-form select {
    height:
        43px;

    background:
        rgba(5, 17, 37, .72);

    border:
        1px solid #314864;

    border-radius:
        9px;

    color:
        #e9f4ff;

    padding:
        0 14px;

    transition:
        .2s;
}


.register-form .input-icon input {
    padding-left:
        37px;
}


.register-form input::placeholder {
    color:
        #50617a;
}


.register-form input:focus,
.register-form select:focus {
    border-color:
        #368cff;

    box-shadow:
        0 0 0 2px rgba(54, 140, 255, .10);
}


.password-meter {
    height:
        3px;

    background:
        #34485e;

    border-radius:
        3px;

    margin-top:
        12px;

    overflow:
        hidden;
}


.password-meter i {
    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        #378cff;

    transition:
        .2s;
}


.sex-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;
}


.sex-choice {
    margin:
        0 !important;

    cursor:
        pointer;
}


.sex-choice input {
    position:
        absolute;

    opacity:
        0;
}


.sex-choice span {
    height:
        39px;

    border:
        1px solid #314864;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #71859f;

    background:
        rgba(5, 17, 37, .65);

    font-weight:
        500;
}


.sex-choice input:checked + span {
    border-color:
        #2382ff;

    color:
        #4d9bff;

    background:
        rgba(22, 76, 149, .25);

    box-shadow:
        inset 0 0 16px rgba(30, 111, 224, .12);
}


.birth-row {
    display:
        grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap:
        8px;
}


.birth-row select {
    padding:
        0 11px;
}


.captcha-tools {
    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        12px;
}


.captcha-box {
    width:
        120px;

    height:
        42px;

    border:
        1px dashed #3a648c;

    border-radius:
        7px;

    background:
        repeating-linear-gradient(
            -18deg,
            rgba(37, 124, 194, .08) 0 2px,
            rgba(5, 21, 43, .7) 2px 7px
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font:
        bold italic 20px
        Georgia,
        serif;

    letter-spacing:
        4px;

    color:
        #84d2ff;

    text-shadow:
        2px 1px #0e5d94;

    transform:
        skew(-3deg);
}


.captcha-refresh {
    width:
        43px;

    height:
        42px;

    border:
        1px solid #344d69;

    border-radius:
        7px;

    background:
        #1a2b42;

    color:
        #758ba6;

    font-size:
        22px;

    cursor:
        pointer;
}


.captcha-refresh:hover {
    color:
        #a9d8ff;

    border-color:
        #4b7bab;
}


.agree-row {
    display:
        flex !important;

    align-items:
        center;

    gap:
        8px;

    margin:
        2px 0 16px !important;

    font-weight:
        500 !important;

    color:
        #7287a1 !important;
}


.agree-row input {
    width:
        15px;

    height:
        15px;

    accent-color:
        #2f82ef;
}


.agree-row a {
    color:
        #48a3ff;
}


.register-actions {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        10px;
}


.register-submit,
.register-cancel {
    height:
        43px;

    border:
        0;

    border-radius:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;
}


.register-submit {
    background:
        linear-gradient(
            90deg,
            #17499b,
            #245bc0
        );

    color:
        #a9c9f0;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, .08);
}


.register-submit:hover {
    filter:
        brightness(1.13);

    color:
        #fff;
}


.register-cancel {
    background:
        #42546b;

    color:
        #fff;
}


.register-cancel:hover {
    background:
        #50647e;
}


.register-links {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        13px;

    margin-top:
        34px;

    font-size:
        12px;
}


.register-links a {
    color:
        #60758f;

    text-decoration:
        none;
}


.register-links a:hover {
    color:
        #8fc9ff;
}


.register-links span {
    width:
        1px;

    height:
        15px;

    background:
        #31445b;
}


.register-shell .notice {
    margin:
        0
        0
        20px;
}


.register-shell + .x {
    display:
        none;
}


/* ============================================================
   MODERN RAGNAROK MEMBER CENTER
   ============================================================ */

.member-shell {
    width:
        min(1120px, 96%);

    margin:
        0 auto;
}


/* ============================================================
   MEMBER LOGIN
   ============================================================ */

.member-login-card {
    width:
        min(520px, 100%);

    /*
     * เดิม 4vh
     * ลดลงเพื่อไม่ให้ Login ต่ำเกินไป
     */
    margin:
        20px auto 0;

    padding:
        38px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 53, .94),
            rgba(4, 15, 34, .94)
        );

    border:
        1px solid rgba(122, 187, 255, .32);

    border-radius:
        22px;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, .5),
        inset 0 1px rgba(255, 255, 255, .05);

    backdrop-filter:
        blur(18px);

    position:
        relative;

    overflow:
        hidden;
}


.member-login-card::before,
.game-card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0 0 auto;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #79c8ff,
            transparent
        );

    opacity:
        .7;
}


.member-emblem {
    text-align:
        center;

    font-size:
        34px;

    color:
        #91d5ff;

    text-shadow:
        0 0 25px #2288ff;
}


.member-title {
    text-align:
        center;

    margin-bottom:
        25px;
}


.member-title small,
.member-head small,
.card-heading small {
    font-size:
        10px;

    letter-spacing:
        3px;

    color:
        #5e8fbf;

    font-weight:
        800;
}


.member-title h1,
.member-head h1 {
    font-family:
        Georgia,
        serif;

    margin:
        7px 0;

    color:
        #fff;

    text-shadow:
        0 0 18px rgba(74, 157, 255, .55);
}


.member-title p,
.member-head p,
.card-note {
    color:
        #8095af;

    margin:
        7px 0;

    font-size:
        13px;
}


.member-login-form .field input,
.secure-form .field input,
.modal-card .field input {
    width:
        100%;

    height:
        44px;

    background:
        rgba(2, 13, 29, .76);

    border:
        1px solid #2c4c6d;

    border-radius:
        9px;

    color:
        #eef8ff;

    padding:
        0 13px;

    outline:
        none;
}


.member-login-form .input-icon input {
    padding-left:
        38px;
}


.member-login-form input:focus,
.secure-form input:focus,
.modal-card input:focus {
    border-color:
        #4b9cff;

    box-shadow:
        0 0 0 3px rgba(62, 145, 255, .1);
}


.game-primary {
    width:
        100%;

    height:
        45px;

    border:
        1px solid #68b5ff;

    border-radius:
        9px;

    background:
        linear-gradient(
            180deg,
            #2879d6,
            #154f9f
        );

    color:
        #fff;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        0 12px 30px rgba(0, 70, 160, .28);
}


.game-primary:hover {
    filter:
        brightness(1.12);
}


.member-login-links {
    text-align:
        center;

    margin-top:
        20px;

    font-size:
        12px;
}


.member-login-links a {
    color:
        #78a8d5;

    text-decoration:
        none;
}


.member-login-links span {
    margin:
        0 10px;

    color:
        #3a5571;
}


/* ============================================================
   MEMBER HEADER
   ============================================================ */

.member-head {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        22px;

    padding:
        0 4px;
}


.member-head h1 {
    font-size:
        32px;
}


.ghost-btn {
    border:
        1px solid #385875;

    background:
        rgba(8, 25, 47, .75);

    color:
        #a9c1da;

    border-radius:
        8px;

    padding:
        10px 17px;

    cursor:
        pointer;
}


.ghost-btn:hover {
    border-color:
        #6aa9df;

    color:
        #fff;
}


/* ============================================================
   MEMBER STATS
   ============================================================ */

.member-stats {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

    margin-bottom:
        16px;
}


.member-stats > div {
    background:
        linear-gradient(
            180deg,
            rgba(8, 27, 55, .88),
            rgba(5, 19, 39, .88)
        );

    border:
        1px solid rgba(105, 164, 222, .25);

    border-radius:
        13px;

    padding:
        17px 19px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .2);
}


.member-stats span {
    display:
        block;

    font-size:
        9px;

    letter-spacing:
        2px;

    color:
        #5d7c9c;

    margin-bottom:
        7px;
}


.member-stats b {
    font-size:
        15px;

    color:
        #d9edff;

    word-break:
        break-word;
}


/* ============================================================
   MEMBER GRID
   ============================================================ */

.member-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(320px, .75fr);

    gap:
        16px;
}


.game-card {
    position:
        relative;

    background:
        linear-gradient(
            180deg,
            rgba(7, 24, 49, .92),
            rgba(4, 17, 36, .93)
        );

    border:
        1px solid rgba(105, 169, 232, .27);

    border-radius:
        17px;

    padding:
        22px;

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .34);

    backdrop-filter:
        blur(15px);

    overflow:
        hidden;
}


.card-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        17px;
}


.card-heading h2 {
    margin:
        4px 0 0;

    font:
        700 20px
        Georgia,
        serif;

    color:
        #e9f6ff;
}


.shield-mark {
    font-size:
        23px;

    color:
        #5ba9ed;

    text-shadow:
        0 0 15px #237bc5;
}


/* ============================================================
   CHARACTERS
   ============================================================ */

.character-list {
    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;
}


.character-row {
    display:
        grid;

    grid-template-columns:
        48px
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        13px;

    padding:
        14px;

    border:
        1px solid #243f5c;

    border-radius:
        12px;

    background:
        rgba(3, 14, 31, .55);
}


.character-row:hover {
    border-color:
        #37668e;
}


.character-row.is-pending {
    border-color:
        rgba(198, 106, 73, .5);

    background:
        rgba(70, 28, 25, .28);
}


.char-avatar {
    width:
        45px;

    height:
        45px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        radial-gradient(
            circle,
            #1d5e9b,
            #0b2746
        );

    border:
        1px solid #477ba8;

    color:
        #a9dcff;
}


.char-main h3 {
    margin:
        0 0 5px;

    font-size:
        16px;
}


.char-main p {
    margin:
        0;

    color:
        #7890aa;

    font-size:
        11px;
}


.online-status {
    margin-top:
        6px;

    color:
        #75e4a6;

    font-size:
        11px;
}


.delete-countdown {
    margin-top:
        8px;

    color:
        #e7a27d;

    font-size:
        11px;
}


.delete-countdown strong {
    color:
        #ffd0b5;
}


.danger-outline,
.cancel-delete-btn {
    padding:
        9px 12px;

    border-radius:
        8px;

    cursor:
        pointer;

    font-weight:
        700;

    font-size:
        11px;
}


.danger-outline {
    border:
        1px solid #884a4f;

    background:
        rgba(104, 31, 38, .25);

    color:
        #e89da4;
}


.danger-outline:hover:not(:disabled) {
    background:
        #6c2930;

    color:
        #fff;
}


.danger-outline:disabled {
    opacity:
        .55;

    cursor:
        not-allowed;
}


.cancel-delete-btn {
    border:
        1px solid #496c8e;

    background:
        #142d46;

    color:
        #a9cce9;
}


.empty-state {
    text-align:
        center;

    padding:
        45px 10px;

    color:
        #70869e;
}


/* ============================================================
   SECURITY
   ============================================================ */

.mini-captcha {
    display:
        flex;

    gap:
        8px;

    align-items:
        center;

    margin:
        12px 0;
}


.mini-captcha .captcha-box {
    height:
        40px;
}


.mini-captcha .captcha-refresh {
    height:
        40px;
}


.secure-form .field {
    margin:
        12px 0;
}


/* ============================================================
   MODAL
   ============================================================ */

body.modal-open {
    overflow:
        hidden;
}


.game-modal {
    display:
        none;

    position:
        fixed;

    inset:
        0;

    z-index:
        100;
}


.game-modal.is-open {
    display:
        block;
}


.modal-backdrop {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(0, 7, 18, .82);

    backdrop-filter:
        blur(7px);
}


.modal-card {
    position:
        relative;

    width:
        min(470px, 92%);

    margin:
        8vh auto;

    padding:
        30px;

    background:
        linear-gradient(
            180deg,
            #0a203c,
            #07172d
        );

    border:
        1px solid #74434b;

    border-radius:
        17px;

    box-shadow:
        0 35px 120px #000;

    color:
        #eaf4ff;
}


.modal-card > small {
    display:
        block;

    text-align:
        center;

    letter-spacing:
        3px;

    color:
        #b46b70;

    font-weight:
        800;
}


.modal-card h2 {
    text-align:
        center;

    margin:
        7px 0 10px;

    font-family:
        Georgia,
        serif;
}


.modal-card > p {
    text-align:
        center;

    color:
        #9aabbd;

    font-size:
        13px;

    line-height:
        1.7;
}


.warning-rune {
    width:
        52px;

    height:
        52px;

    margin:
        0 auto 10px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #51242a;

    border:
        1px solid #a45961;

    color:
        #ffc1c6;

    font:
        bold 26px
        Georgia;
}


.modal-x {
    position:
        absolute;

    right:
        13px;

    top:
        10px;

    border:
        0;

    background:
        none;

    color:
        #7990a8;

    font-size:
        25px;

    cursor:
        pointer;
}


.modal-actions {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        9px;

    margin-top:
        18px;
}


.danger-btn {
    border:
        1px solid #b45c64;

    border-radius:
        8px;

    background:
        linear-gradient(
            #8e3841,
            #65262d
        );

    color:
        #fff;

    font-weight:
        800;

    cursor:
        pointer;
}


.modal-actions button {
    height:
        42px;
}


.notice {
    max-width:
        100%;

    margin-bottom:
        16px;
}


/* ============================================================
   REGISTRATION MOBILE
   ============================================================ */

@media (max-width: 700px) {

    main {
        padding-top:
            30px;
    }


    .register-shell {
        padding:
            28px 17px;
    }


    .form-grid {
        grid-template-columns:
            1fr;
    }


    .register-actions {
        grid-template-columns:
            1fr;
    }


    .birth-row {
        gap:
            5px;
    }
}


/* ============================================================
   MEMBER MOBILE
   ============================================================ */

@media (max-width: 900px) {

    .member-grid {
        grid-template-columns:
            1fr;
    }


    .member-stats {
        grid-template-columns:
            1fr;
    }


    .member-head {
        align-items:
            flex-start;
    }


    .character-row {
        grid-template-columns:
            44px 1fr;
    }


    .char-actions {
        grid-column:
            1 / -1;
    }


    .char-actions button,
    .char-actions form,
    .char-actions form button {
        width:
            100%;
    }
}