:root {
    color-scheme: dark;
    --night: #020811;
    --panel: #071522;
    --panel-deep: #030b13;
    --gold: #e4aa4d;
    --gold-bright: #f3c66f;
    --gold-dark: #754719;
    --cream: #f4e4c1;
    --muted: #b7c2c4;
    --sans: Inter, ui-rounded, "Trebuchet MS", system-ui, sans-serif;
    --display: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--cream);
    background-color: var(--night);
    background-image:
        radial-gradient(circle at 50% 45%,transparent 0 12rem,rgba(0,4,10,.28) 38rem,rgba(0,3,8,.55) 100%),
        linear-gradient(180deg,rgba(1,7,15,.04),rgba(1,7,15,.22)),
        url("/public/assets/images/home/zendara-night-background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font: 1rem/1.55 var(--sans);
}
button, input { font: inherit; }
:focus-visible { outline: 4px solid #f3c35f; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.access-shell {
    position: relative;
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: max(1.25rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.25rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
}
.access-shell::before {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 46%,rgba(13,37,55,.03) 0 12rem,rgba(0,4,10,.18) 35rem,rgba(0,3,8,.48));
    content: "";
    pointer-events: none;
}

.access-card {
    position: relative;
    width: min(100%,34rem);
    padding: clamp(1.7rem,4vw,2.7rem) clamp(1.65rem,5vw,3rem) clamp(1.8rem,4vw,2.65rem);
    overflow: hidden;
    border: 2px solid var(--gold-bright);
    border-radius: .8rem;
    color: var(--cream);
    background:
        radial-gradient(circle at 50% 0,rgba(29,67,87,.28),transparent 45%),
        linear-gradient(155deg,rgba(9,29,43,.985),rgba(2,9,17,.99));
    box-shadow:
        0 0 0 3px #35210d,
        0 0 0 5px #8f5b20,
        inset 0 0 0 1px rgba(255,234,185,.12),
        inset 0 3px 0 rgba(255,255,255,.025),
        0 16px 34px rgba(0,0,0,.72),
        0 0 38px rgba(220,153,49,.1);
    text-align: center;
}
.access-card::before {
    position: absolute;
    inset: .55rem;
    border: 1px solid rgba(216,158,68,.2);
    border-radius: .45rem;
    content: "";
    pointer-events: none;
}
.access-card::after {
    position: absolute;
    right: 14%;
    bottom: -4rem;
    left: 14%;
    height: 5rem;
    border-radius: 50%;
    background: rgba(228,166,69,.14);
    box-shadow: 0 0 45px rgba(228,166,69,.14);
    content: "";
    pointer-events: none;
}
.access-ornament { position: absolute; z-index: 2; top: 1rem; color: var(--gold); font-size: 1.15rem; text-shadow: 0 0 10px rgba(238,174,67,.8); }
.ornament-left { left: 1.1rem; }
.ornament-right { right: 1.1rem; }

.access-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: min(16rem,68vw);
    max-height: 7.3rem;
    margin: 0 auto .7rem;
    object-fit: contain;
    filter: drop-shadow(0 4px 0 rgba(0,0,0,.58)) drop-shadow(0 0 12px rgba(229,155,41,.15));
}
.access-lock {
    position: relative;
    z-index: 1;
    display: grid;
    width: 2.9rem;
    height: 3.35rem;
    margin: .1rem auto .7rem;
    place-items: center;
    filter: drop-shadow(0 7px 9px rgba(0,0,0,.52)) drop-shadow(0 0 15px rgba(231,166,52,.18));
}
.access-lock svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.access-lock-shackle {
    fill: none;
    stroke: #e9d3a6;
    stroke-width: 8;
    stroke-linecap: round;
}
.access-lock-body {
    fill: url(#access-lock-metal);
    stroke: #f0c46d;
    stroke-width: 3;
}
.access-lock-keyhole {
    fill: #26170d;
}
.access-lock-highlight {
    fill: none;
    stroke: rgba(255,242,205,.55);
    stroke-width: 2;
    stroke-linecap: round;
}
.access-divider { position: relative; z-index: 1; display: flex; align-items: center; gap: .6rem; width: min(100%,18rem); margin: 0 auto .65rem; color: #d69b40; font-size: .59rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.access-divider i { height: 1px; flex: 1; background: linear-gradient(90deg,transparent,#9c6c2c); }
.access-divider i:nth-of-type(2) { background: linear-gradient(90deg,#9c6c2c,transparent); }
.access-divider span { color: #efbb58; font-size: .8rem; line-height: 1; }
.access-divider b { white-space: nowrap; font-weight: 900; }
.access-card h1 {
    margin: 0;
    color: #f2ddb3;
    font: 800 clamp(1.8rem,6vw,2.25rem)/1.05 var(--display);
    letter-spacing: .015em;
    white-space: nowrap;
    text-shadow: 0 3px 0 #160d07,0 0 18px rgba(224,160,59,.12);
    text-transform: uppercase;
}
.access-instruction { max-width: 27rem; margin: .7rem auto 1.45rem; color: var(--muted); font-family: Georgia,"Times New Roman",serif; font-size: .98rem; line-height: 1.55; }
.access-instruction strong { display: block; margin-bottom: .2rem; color: #d4d8d4; font-size: 1.02rem; font-weight: 400; }
.access-card form { position: relative; z-index: 2; display: grid; gap: .9rem; }
.access-field { position: relative; }
.access-field svg { position: absolute; z-index: 1; top: 50%; left: 1rem; width: 1.05rem; height: 1.05rem; fill: none; stroke: #b98a45; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transform: translateY(-50%); }
.access-card input {
    width: 100%;
    min-height: 3.65rem;
    padding: .75rem 1rem .75rem 2.8rem;
    border: 1px solid rgba(194,137,55,.72);
    border-radius: .2rem;
    color: #f7ead0;
    caret-color: #f0b64f;
    background: linear-gradient(#06121e,#020910);
    box-shadow: inset 0 2px 8px rgba(0,0,0,.65),0 0 0 1px rgba(231,178,85,.08);
}
.access-card input::placeholder { color: #819096; opacity: 1; }
.access-card input:focus { border-color: #f0bc5c; outline: 3px solid rgba(226,161,60,.2); }
.access-card button {
    display: grid;
    width: 100%;
    min-height: 3.45rem;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: .65rem 1rem;
    border: 1px solid #c38a38;
    border-radius: .2rem;
    color: #f5d58f;
    background: linear-gradient(#17384e,#081924);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.05),0 3px 0 #01050a,0 0 15px rgba(222,155,47,.1);
    clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);
    font-size: .78rem;
    font-weight: 1000;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
}
.access-card button span { grid-column: 2; }
.access-card button b { grid-column: 3; justify-self: end; color: #e8af51; font-size: 1.4rem; line-height: 1; }
.access-card button:hover { color: #fff0c9; background: linear-gradient(#1d4962,#0b2637); transform: translateY(-1px); }
.access-card button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255,255,255,.04),0 1px 0 #01050a; }
.access-error { position: relative; z-index: 2; margin: 0 0 1rem; padding: .75rem; border: 1px solid #bf625c; border-radius: .3rem; color: #ffd6ce; background: rgba(83,22,25,.62); font-size: .8rem; font-weight: 800; text-align: left; }

@media (max-width: 639px) {
    body { background-attachment: scroll; background-position: 60% center; }
    .access-card { padding: 1.35rem 1.15rem 1.5rem; }
    .access-logo { width: min(13.5rem,70vw); }
    .access-lock { width: 2.65rem; height: 3rem; }
    .access-card h1 { font-size: clamp(1.55rem,8vw,2rem); }
    .access-instruction { margin-bottom: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none!important; }
}