/* ==========================================================================
   Register page — floating crest, solid readable inputs, glass Discord board
   ========================================================================== */

.reg-wrap {
    position: relative;
    /* above the fixed video backdrop and the dark overlay */
    z-index: 5;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 10px 16px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ───────────────────────────────────────────── floating crest */
.reg-crest {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* the crest floats: it never collides with the headline underneath */
    margin-bottom: 4px;
    pointer-events: none;
}

.reg-crest img {
    display: block;
    width: 176px;
    max-width: 46vw;
    height: auto;
    max-height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 0 26px rgba(243,229,171,.5)) drop-shadow(0 6px 18px rgba(0,0,0,.9));
    animation: regFloat 5s ease-in-out infinite;
    transition: transform .35s ease;
}
.reg-crest img:hover { transform: scale(1.05); }

@keyframes regFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* ───────────────────────────────────────────── headline */
.reg-head {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 6px;
    pointer-events: none;
}

.reg-head h1 {
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 4px;
    background: linear-gradient(180deg, #fff 0%, #f3e5ab 55%, #c9a34e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 34px rgba(243,229,171,.28);
}

.reg-head p {
    margin: 0;
    font-family: 'Cairo', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #e6dcc4;
    letter-spacing: .4px;
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

.reg-rule {
    width: 190px;
    height: 1px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, transparent, rgba(243,229,171,.65), transparent);
    position: relative;
}
.reg-rule::before {
    content: '⚓';
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: var(--op-accent, #f3e5ab);
    background: transparent;
    text-shadow: 0 0 12px rgba(243,229,171,.8);
}

/* ───────────────────────────────────────────── the form */
.reg-form {
    width: 100%;
    max-width: 560px;
    position: relative;
}

.reg-row { margin-bottom: 18px; }

/* --------------------------------------------------------------- the field
   A real, readable input: dark glass body, visible gold border and a lit
   underline on focus. Nothing here relies on the page background showing
   through, so the value is always legible over the video.
   ------------------------------------------------------------------------ */
.reg-field {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 14px 4px 16px;
    border-radius: 12px;
    background: rgba(10, 9, 14, .82);
    border: 1px solid rgba(243,229,171,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 6px 18px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
    overflow: hidden;
}

/* the glowing underline that wipes in on focus */
.reg-field::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--op-accent, #f3e5ab), transparent);
    transform: scaleX(0);
    transition: transform .45s cubic-bezier(.2,.8,.25,1);
}

.reg-field:focus-within {
    background: rgba(16, 14, 20, .92);
    border-color: var(--op-accent, #f3e5ab);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.1),
        0 0 0 3px rgba(243,229,171,.14),
        0 10px 26px rgba(0,0,0,.6),
        0 0 22px rgba(243,229,171,.18);
}
.reg-field:focus-within::after { transform: scaleX(1); }

/* invalid state driven by the live validators */
.reg-field.is-bad {
    border-color: rgba(255,71,87,.65);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(255,71,87,.12);
}
.reg-field.is-good { border-color: rgba(46,204,113,.6); }

.reg-field > i {
    font-size: 15px;
    color: rgba(243,229,171,.7);
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
    transition: color .3s ease, text-shadow .3s ease;
}
.reg-field:focus-within > i {
    color: var(--op-accent, #f3e5ab);
    text-shadow: 0 0 12px rgba(243,229,171,.9);
}

.reg-field input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 0;
    letter-spacing: .3px;
    /* Safari/iOS otherwise fades the value on a dark background */
    -webkit-text-fill-color: #fff;
    opacity: 1;
}
.reg-field input::placeholder {
    color: rgba(255,255,255,.42);
    font-weight: 400;
}
.reg-field input:-webkit-autofill,
.reg-field input:-webkit-autofill:hover,
.reg-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #14121a inset;
    transition: background-color 9999s;
    caret-color: #fff;
}
.reg-field input::-ms-reveal { display: none; }

.reg-field .reveal {
    background: rgba(243,229,171,.10);
    border: 1px solid rgba(243,229,171,.22);
    color: rgba(243,229,171,.8);
    cursor: pointer;
    font-size: 13px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    transition: color .2s, background .2s, border-color .2s;
}
.reg-field .reveal:hover {
    color: #120e05;
    background: var(--op-accent, #f3e5ab);
    border-color: transparent;
}

/* password strength */
.reg-strength {
    display: flex;
    gap: 5px;
    margin-top: 7px;
}
.reg-strength span {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: rgba(255,255,255,.12);
    transition: background .3s ease;
}
.reg-strength.s1 span:nth-child(1) { background: #e74c3c; box-shadow: 0 0 8px #e74c3c; }
.reg-strength.s2 span:nth-child(-n+2) { background: #ffa502; box-shadow: 0 0 8px #ffa502; }
.reg-strength.s3 span:nth-child(-n+3) { background: #f1c40f; box-shadow: 0 0 8px #f1c40f; }
.reg-strength.s4 span { background: #2ecc71; box-shadow: 0 0 8px #2ecc71; }

.reg-hint {
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.45);
    margin-top: 6px;
    min-height: 15px;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* ───────────────────────────────────────────── section caption */
.reg-caption {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: rgba(243,229,171,.75);
    text-shadow: 0 2px 6px rgba(0,0,0,.9);
}
.reg-caption::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(243,229,171,.4), transparent);
}

/* ───────────────────────────────────────────── captcha
   The widget normally renders a 302×78 checkbox. If the Google script is
   blocked the library falls back to a 302×422 challenge iframe — the rules
   below keep that from stretching the form.
   ------------------------------------------------------------------------ */
.reg-captcha {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(10,9,14,.7);
    border: 1px solid rgba(255,255,255,.08);
    min-height: 0;
    overflow: hidden;
}

/* The widget normally shows a 302×78 checkbox. When Google is unreachable the
   library swaps in a 302×422 challenge iframe, which would blow the form apart
   — so it is scaled down to sit at checkbox size instead of being hidden. */
.reg-captcha .g-recaptcha {
    transform-origin: center center;
    transform: scale(.18);
    width: 302px;
    height: 422px;
    margin: -160px 0;   /* the scaled box keeps its 78px footprint */
}

.reg-captcha iframe {
    max-width: 100%;
    border-radius: 6px;
}

/* the standard checkbox needs no scaling at all */
.reg-captcha:has(> div > iframe:not([height="422"])) .g-recaptcha,
.reg-captcha .g-recaptcha[data-size="compact"] {
    transform: none;
    height: auto;
    margin: 0;
}

@media (max-width: 480px) {
    .reg-captcha { transform: scale(.92); transform-origin: center; }
}

/* ───────────────────────────────────────────── agreement + submit */
.reg-terms {
    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    text-align: center;
    line-height: 1.7;
    margin: 16px 0 20px;
    text-shadow: 0 1px 5px rgba(0,0,0,.95);
}
.reg-terms a {
    color: var(--op-accent, #f3e5ab);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(243,229,171,.45);
    transition: color .2s, border-color .2s;
}
.reg-terms a:hover { color: #fff; border-bottom-color: #fff; }

.reg-submit {
    position: relative;
    width: 100%;
    padding: 16px 20px;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #14100a;
    border: none;
    border-radius: 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(120deg, #fff6d8 0%, var(--op-accent, #f3e5ab) 45%, #d0a94f 100%);
    box-shadow: 0 10px 30px rgba(243,229,171,.28), inset 0 1px 0 rgba(255,255,255,.7);
    overflow: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.25,1), box-shadow .3s ease;
}
.reg-submit::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,.75), transparent);
    transform: skewX(-22deg);
    transition: left .7s ease;
}
.reg-submit:hover::after { left: 130%; }
.reg-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 42px rgba(243,229,171,.45), inset 0 1px 0 rgba(255,255,255,.8);
}
.reg-submit:active { transform: translateY(0); }

.reg-submit[disabled] { opacity: .55; pointer-events: none; }

.reg-switch {
    text-align: center;
    margin-top: 20px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,.6);
    text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
.reg-switch a {
    color: var(--op-accent, #f3e5ab);
    font-weight: 700;
    text-decoration: none;
}
.reg-switch a:hover { color: #fff; text-decoration: underline; }

/* ───────────────────────────────────────────── alerts */
.reg-alert {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    line-height: 1.6;
    border: 1px solid;
}
.reg-alert ul { margin: 0; padding-inline-start: 18px; }
.reg-alert.error {
    background: rgba(120,20,26,.86);
    border-color: rgba(255,71,87,.5);
    color: #ffb0b6;
}
.reg-alert.ok {
    background: rgba(16,80,50,.86);
    border-color: rgba(46,204,113,.5);
    color: #9df5c4;
}

/* ==========================================================================
   DISCORD BOARD — a real frosted panel so it reads as a live board
   ========================================================================== */
.reg-discord {
    width: 100%;
    max-width: 940px;
    margin-top: 44px;
    position: relative;
    border-radius: 20px;
    background:
        linear-gradient(155deg, rgba(24,22,32,.92) 0%, rgba(10,10,15,.95) 55%, rgba(6,6,10,.97) 100%);
    border: 1px solid rgba(143,158,255,.30);
    box-shadow:
        0 26px 60px rgba(0,0,0,.72),
        0 0 40px rgba(88,101,242,.14),
        inset 0 1px 0 rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px 24px 26px;
    box-sizing: border-box;
    overflow: hidden;
}

/* the Discord blurple glow bleeding in from the top edge */
.reg-discord::before {
    content: '';
    position: absolute;
    top: -60%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 150%;
    background: radial-gradient(ellipse at 50% 0%, rgba(88,101,242,.30), transparent 62%);
    pointer-events: none;
}

/* thin gradient rail so the panel edge is visible against any backdrop */
.reg-discord::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(160deg, rgba(88,101,242,.55), rgba(255,255,255,.06) 40%, transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.reg-discord-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.reg-discord-id {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.reg-discord-ava {
    position: relative;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 18px;
    overflow: hidden;
    border: 2px solid rgba(143,158,255,.6);
    box-shadow: 0 0 24px rgba(88,101,242,.45);
    background: #0b0b14;
}
.reg-discord-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.reg-discord-name {
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .6px;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-discord-online {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #43e58c;
    margin-top: 4px;
}
.reg-discord-online b { color: #6ef7ac; font-size: 14px; }

.reg-discord-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #43e58c;
    box-shadow: 0 0 10px #43e58c;
    animation: regPing 1.6s infinite;
}
@keyframes regPing { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.reg-join {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 24px;
    border-radius: 30px;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none !important;
    color: #fff !important;
    background: linear-gradient(135deg, #5865f2 0%, #404eed 100%);
    box-shadow: 0 8px 24px rgba(88,101,242,.42), inset 0 1px 0 rgba(255,255,255,.18);
    transition: transform .25s ease, box-shadow .25s ease;
}
.reg-join:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(88,101,242,.6), inset 0 1px 0 rgba(255,255,255,.22);
    color: #fff !important;
}

/* member strip */
.reg-strip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    flex-wrap: wrap;
}
.reg-strip-label {
    font-family: 'Cairo', sans-serif;
    font-size: 10.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    font-weight: 700;
}
.reg-strip-avatars { display: flex; }
.reg-strip-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #14131c;
    margin-inline-start: -10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.7);
}
.reg-strip-avatars img:first-child { margin-inline-start: 0; }
.reg-strip-more {
    width: 32px; height: 32px;
    margin-inline-start: -10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #5865f2, #404eed);
    border: 2px solid #14131c;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
}

/* channels */
.reg-rooms {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px 6px 2px 2px;
}
.reg-rooms::-webkit-scrollbar { width: 5px; }
.reg-rooms::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 4px; }
.reg-rooms::-webkit-scrollbar-thumb { background: rgba(143,158,255,.55); border-radius: 4px; }

.reg-room {
    border-radius: 12px;
    padding: 12px 13px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.06);
    border-inline-start: 3px solid rgba(143,158,255,.55);
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.reg-room:hover {
    border-inline-start-color: #8ea1ff;
    background: rgba(143,158,255,.10);
    transform: translateY(-2px);
}

.reg-room-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: 'Cinzel Decorative', 'Cairo', serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #cdd5ff;
    letter-spacing: .5px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.reg-room-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reg-room-name em {
    font-style: normal;
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #43e58c;
    background: rgba(67,229,140,.14);
    border: 1px solid rgba(67,229,140,.3);
    border-radius: 20px;
    padding: 1px 9px;
    flex: 0 0 auto;
}

.reg-user {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 5px;
    border-radius: 6px;
}
.reg-user + .reg-user { margin-top: 2px; }
.reg-user img {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(143,158,255,.5);
    flex: 0 0 24px;
    background: #0b0b14;
}
.reg-user span {
    font-family: 'Cairo', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reg-empty {
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,.35);
    padding: 8px 5px;
}

.reg-loading {
    grid-column: 1 / -1;
    text-align: center;
    font-family: 'Cairo', sans-serif;
    font-size: 12.5px;
    color: #b9c2ff;
    padding: 30px 0;
}

/* ───────────────────────────────────────────── responsive */
@media (max-width: 780px) {
    .reg-wrap { padding: 0 12px 46px; }
    .reg-crest { margin-bottom: 2px; }
    .reg-crest img { width: 132px; max-height: 70px; }
    .reg-head h1 { font-size: 20px; letter-spacing: 1.4px; }
    .reg-head p { font-size: 12px; }
    .reg-field { padding: 2px 10px 2px 12px; border-radius: 10px; }
    .reg-field input { font-size: 14px; padding: 13px 0; }
    .reg-submit { padding: 14px 16px; font-size: 13px; letter-spacing: 1.4px; }
    .reg-discord { margin-top: 30px; padding: 16px 14px 18px; border-radius: 16px; }
    .reg-discord-head { flex-direction: column; align-items: stretch; gap: 14px; }
    .reg-discord-id { justify-content: center; }
    .reg-discord-name { white-space: normal; text-align: center; font-size: 16px; }
    .reg-join { justify-content: center; width: 100%; }
    .reg-rooms { grid-template-columns: 1fr; max-height: 280px; }
}