/* Destiny Dynasty login: lightweight black, gold and muted sage visual system.
   Future hero image: change only --login-illustration below. */
:root{--login-illustration:url('/assets/login.png');--login-gold:#e9c377;--login-cream:#f8f2df;--login-sage:#8cae90}
*{box-sizing:border-box}
html{min-height:100%;background:#080b09}
body{min-height:100vh;min-height:100svh;margin:0;color:var(--ink);font:14px/1.55 var(--sans);background:radial-gradient(ellipse 55% 60% at 2% 9%,#7f6a3620,transparent 70%),radial-gradient(ellipse 54% 60% at 100% 100%,#43734a1b,transparent 70%),linear-gradient(130deg,#080b09 0%,#10140e 52%,#070a08 100%)}
body:before{position:fixed;inset:0;pointer-events:none;content:"";opacity:.35;background-image:radial-gradient(circle,#ebcd8f77 .75px,transparent 1px),radial-gradient(circle,#92b79a55 .65px,transparent 1px);background-size:157px 183px,241px 211px;background-position:17px 11px,85px 73px}
a{color:inherit}
.login-page{position:relative;display:flex;min-height:100vh;min-height:100svh;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:clamp(24px,4.2vh,54px) clamp(18px,4vw,64px)}
.login-card{position:relative;isolation:isolate;display:grid;width:min(100%,1140px);min-height:560px;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);overflow:hidden;border:1px solid transparent;border-radius:24px;background:linear-gradient(135deg,#151b15,#0d110e) padding-box,linear-gradient(135deg,#d7b16b8e 0%,#c3ad7960 28%,#445a4080 62%,#d5b87150 100%) border-box;box-shadow:0 35px 110px #000a,0 0 45px #e6b35c09}
.login-card:after{position:absolute;top:0;left:6%;z-index:4;width:25%;height:1px;background:linear-gradient(90deg,transparent,#ffe6aa9a,transparent);content:"";pointer-events:none}
.login-visual{position:relative;isolation:isolate;display:flex;min-height:560px;flex-direction:column;justify-content:space-between;overflow:hidden;padding:34px clamp(26px,3vw,46px) 30px;background-color:#142119;background-image:linear-gradient(180deg,#080c0966 0%,#08120a16 36%,#08120a24 62%,#080c0985 100%),var(--login-illustration);background-size:cover;background-position:center}
.login-visual:before{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 7% 6%,#a37f362a,transparent 48%),linear-gradient(90deg,transparent 77%,#0a100d65 100%);content:"";pointer-events:none}
.login-visual:after{position:absolute;top:0;right:0;bottom:0;width:1px;background:linear-gradient(180deg,#efce8170,transparent 24%,#98b49840 65%,#d5ae6255);content:""}
.visual-top,.visual-copy,.visual-footer{position:relative;z-index:1}
.visual-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.login-brand,.login-mobile-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.login-brand img,.login-mobile-brand img{display:block;flex:0 0 auto;object-fit:contain;filter:drop-shadow(0 4px 10px #0009)}
.brand-words strong,.login-mobile-brand>span{display:block;color:var(--login-cream);font-family:Georgia,"Times New Roman",serif;font-size:19px;font-weight:700;letter-spacing:.025em;line-height:1.14}
.brand-words small,.login-mobile-brand small{display:block;margin-top:7px;color:#d5b976;font:700 9px/1.4 var(--sans);letter-spacing:.19em}
.visual-decoration{display:block;width:48px;height:48px;flex:0 0 48px;color:#d1b675a1;opacity:.64}
.visual-decoration svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.8}
.visual-copy{max-width:490px;margin-top:auto;margin-bottom:32px}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:#e4c78b;font-size:10px;font-weight:750;letter-spacing:.17em}
.eyebrow-line{width:26px;height:1px;background:linear-gradient(90deg,#f5d997,transparent)}
.visual-copy h1{margin:0;color:#f8f2df;font-family:Georgia,"Times New Roman",serif;font-size:clamp(42px,4.7vw,72px);font-weight:700;letter-spacing:-.045em;line-height:1.02;text-shadow:0 4px 22px #0008}
.visual-copy h1 em{color:#eecf8d;font-style:normal}
.visual-copy p{max-width:355px;margin:22px 0 0;color:#ebeee4;font-size:14px;line-height:1.8;text-shadow:0 2px 10px #000e}
.visual-underline{display:flex;width:min(220px,55%);align-items:center;gap:11px;margin-top:auto;color:#e2bd70}
.visual-underline>span{height:1px;flex:1;background:linear-gradient(90deg,#f1ca7680,transparent)}
.visual-underline>span:first-child{flex:0 0 46px}
.visual-underline svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.visual-footer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-top:18px;border-top:1px solid #dec08038;color:#dfcba4;font-size:9px;font-weight:700;letter-spacing:.13em}
.footer-dot{width:3px;height:3px;border-radius:50%;background:#e2c485}
.login-content{position:relative;isolation:isolate;display:flex;min-width:0;flex-direction:column;justify-content:space-between;gap:20px;overflow:hidden;padding:34px clamp(30px,4.5vw,60px) 26px;background:radial-gradient(ellipse 90% 62% at 115% 106%,#486b4930,transparent 80%),linear-gradient(155deg,#151b15 0%,#101610 53%,#0e130f 100%)}
.login-content:before{position:absolute;right:-112px;bottom:-105px;z-index:-1;width:330px;height:330px;border:1px solid #d1b57916;border-radius:50%;box-shadow:0 0 0 42px #d1b57908,0 0 0 94px #d1b57905;content:"";pointer-events:none}
.content-topline{display:flex;align-items:center;gap:11px;color:#d7bd82;font-size:10px;font-weight:800;letter-spacing:.18em}
.content-topline-icon{display:grid;width:25px;height:25px;place-items:center;color:#cda75d}
.content-topline-icon svg{width:24px;height:24px}
.content-topline-rule{height:1px;flex:1;background:linear-gradient(90deg,#d0af6b66,transparent)}
.login-content-main{width:100%;max-width:395px;margin:auto 0}
.login-mobile-brand{display:none}
.access-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:19px;color:#b7cdb4;font-size:10px;font-weight:750;letter-spacing:.12em}
.access-tag-dot{width:6px;height:6px;border-radius:50%;background:#92b899;box-shadow:0 0 0 4px #92b89916}
.login-content h1{margin:0;color:#f9f4e7;font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,3.8vw,55px);font-weight:700;line-height:1.08;letter-spacing:-.042em}
.login-content h2 span{color:#e9bf70}
.login-description{max-width:360px;margin:21px 0 32px;color:#b9c2b5;font-size:14px;line-height:1.85}
.login-message{margin:0 0 18px;padding:13px 15px;border:1px solid #e9a0a06b;border-left:3px solid #e9a0a0;border-radius:9px;color:#ffd2d2;background:#b74b4b1e;font-size:13px;line-height:1.5}
.button{position:relative;display:flex;width:100%;min-height:62px;align-items:center;justify-content:space-between;gap:14px;overflow:hidden;padding:9px 18px 9px 11px;border:1px solid #e4c27b;border-radius:12px;text-decoration:none;font-size:14px;font-weight:750;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
.button.primary{background:linear-gradient(115deg,#f4dc9b 0%,#e2b96d 62%,#cfa153 100%);color:#252013;box-shadow:0 6px 24px #d6a14a28,inset 0 1px #fff7d287}
.button.primary:hover{transform:translateY(-2px);filter:brightness(1.055);box-shadow:0 10px 30px #d6a14a35,inset 0 1px #fff8d4af}
.button:focus-visible{outline:2px solid #fff0c0;outline-offset:4px}
.button[aria-disabled="true"]{pointer-events:none;opacity:.58;filter:grayscale(.35)}
.discord-icon{display:grid;width:39px;height:39px;flex:0 0 39px;place-items:center;border:1px solid #f8e0ac55;border-radius:10px;background:#24291ede;box-shadow:inset 0 1px #ffffff1a}
.discord-symbol{display:block;width:26px;height:auto;object-fit:contain}
.button-label{flex:1;text-align:left}
.button-arrow{width:21px;height:21px;flex:0 0 21px;transition:transform .18s ease}
.button:hover .button-arrow{transform:translateX(3px)}
.access-note{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;color:#a8b3a5;font-size:11px}
.access-note svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:currentColor;stroke-width:1.5}
.content-footer{display:flex;align-items:center;gap:12px;color:#7f9180;font-size:9px;font-weight:750;letter-spacing:.13em}
.content-footer-divider{width:4px;height:4px;border:1px solid #bba76c;transform:rotate(45deg)}
.page-corner{display:flex;align-items:center;gap:13px;color:#a9966b9c;font-size:9px;font-weight:750;letter-spacing:.22em}
.page-corner span:first-child,.page-corner span:last-child{font-size:11px;color:#d8bd79}
@media(max-width:980px){
 .login-card{min-height:570px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .login-visual{min-height:570px;padding:28px}
 .login-content{padding:28px clamp(26px,4vw,44px) 25px}
 .visual-copy h1{font-size:clamp(39px,5.7vw,58px)}
 .login-content h1{font-size:clamp(37px,4.9vw,48px)}
}
@media(max-width:700px){
 .login-page{justify-content:flex-start;padding:16px 14px 22px;gap:15px}
 .login-card{width:min(100%,520px);min-height:auto;grid-template-columns:1fr;border-radius:20px}
 .login-visual{min-height:230px;padding:21px 23px;background-position:center 47%}
 .login-brand img{width:37px;height:37px}
 .brand-words strong{font-size:16px}
 .brand-words small{font-size:8px}
 .visual-decoration{width:35px;height:35px;flex-basis:35px}
 .visual-copy{margin:22px 0 0}
 .hero-eyebrow{margin-bottom:11px;font-size:9px}
 .visual-copy h1{font-size:42px}
 .visual-copy h1 br{display:none}
 .visual-copy h1 em:before{content:" "}
 .visual-underline{width:125px;margin-top:32px}
 .login-content{min-height:315px;padding:28px 27px 24px}
 .content-topline{display:none}
 .login-content-main{max-width:none}
 .login-mobile-brand{display:none}
 .access-tag{margin-bottom:14px}
 .login-content h1{font-size:43px}
 .login-description{margin:17px 0 26px;font-size:13px}
 .content-footer{margin-top:14px}
}
@media(max-width:400px){
 .login-page{padding:11px 10px 20px}
 .login-visual{min-height:200px;padding:18px}
 .visual-copy h1{font-size:36px}
 .login-content{min-height:305px;padding:25px 21px 20px}
 .login-content h1{font-size:38px}
 .button{min-height:58px;font-size:13px}
 .access-note{font-size:10px}
}
@media(max-height:700px) and (min-width:701px){
 .login-page{padding-top:18px;padding-bottom:18px}
 .login-card{min-height:520px}
 .login-visual{min-height:520px}
 .visual-copy h1{font-size:50px}
}
@media(prefers-reduced-motion:reduce){
 .button,.button-arrow{transition:none!important}
 .button.primary:hover{transform:none}
}
/* Small, compositor-friendly atmospheric accents; no animated full-screen backgrounds. */
@keyframes destiny-seal-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes destiny-sage-pulse{0%,100%{opacity:.65}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  .visual-decoration svg{animation:destiny-seal-turn 90s linear infinite;transform-origin:50% 50%}
  .access-tag-dot{animation:destiny-sage-pulse 4s ease-in-out infinite}
}