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

body.font-default,
body.font-default *,
body.font-dmsans,
body.font-dmsans *,
body.font-cursive,
body.font-cursive * {
    font-family: var(--font-game) !important;
}

body.auth-page {
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; margin:0; padding:16px;
    background: #050505 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect fill="%23000000" width="100" height="100"/><path d="M0 0L50 50L0 100M50 0L100 50L50 100M100 0L100 100" stroke="%23111111" stroke-width="0.5" fill="none"/></svg>');
    background-attachment: fixed;
    font-family: var(--font-game);
}

.auth-wrap { width:100%; max-width:380px; }
@media(min-width:600px) { .auth-wrap { max-width:440px; } }

.auth-logo { text-align:center; margin-bottom:8px; position:relative; padding:30px 0 10px; }
.auth-logo img { max-width:300px; width:80%; position:relative; z-index:2; }
.logo-fallback { display:none; position:relative; }
.logo-fallback .swords-icon { position:relative; z-index:1; margin-bottom:-10px; }
.logo-fallback .swords-icon svg { width:120px; height:auto; opacity:0.7; }
.logo-title {
    position:relative; z-index:2;
    font-family: var(--font-game);
    color:#c9a961; text-align:center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 0 30px rgba(201,169,97,0.15);
}
.logo-title .top { display:block; font-size:20px; letter-spacing:6px; font-weight:400; margin-bottom:2px; }
.logo-title .bottom { display:block; font-size:38px; letter-spacing:8px; font-weight:700; }
.logo-shield {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:180px; height:180px; border-radius:50%;
    background:radial-gradient(circle, rgba(60,45,20,0.25) 0%, transparent 70%);
    z-index:0;
}

.auth-box-wrap {
    position:relative;
    background:linear-gradient(170deg,#16140e 0%,#0c0a06 100%);
    border:1px solid #2e2414;
    border-radius:10px;
    box-shadow:
        0 0 80px rgba(0,0,0,.95),
        0 4px 30px rgba(0,0,0,.6),
        inset 0 1px 0 rgba(201,169,97,.04);
}
.auth-box { padding:0 22px 18px; }
.auth-box-wrap::before, .auth-box-wrap::after {
    content:''; position:absolute; width:14px; height:14px;
    border-color:#4a3a1e; border-style:solid;
}
.auth-box-wrap::before { top:-1px; left:-1px; border-width:2px 0 0 2px; border-radius:10px 0 0 0; }
.auth-box-wrap::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; border-radius:0 0 10px 0; }

.auth-divider { display:flex; align-items:center; gap:10px; margin:16px 0 14px; }
.auth-divider span {
    color:#c9a961; font-size:11px; letter-spacing:3px; white-space:nowrap;
    font-weight:700; text-transform:uppercase;
}
.auth-divider::before,.auth-divider::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(90deg,transparent,#3a2e18,transparent);
}

.auth-iw { position:relative; margin-bottom:10px; }
.auth-iw .ai {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    pointer-events:none; display:flex; align-items:center; justify-content:center;
    width:14px; height:14px; z-index:2; transition:opacity .2s;
}
.auth-iw .ai svg { width:14px; height:14px; fill:#5a4a30; }
.auth-iw:has(.auth-input:focus) .ai,
.auth-iw:has(.auth-input:not(:placeholder-shown)) .ai { opacity:0; transition:opacity .2s; }
.auth-input {
    width:100%;
    padding:12px 14px 12px 44px;
    background:#0d0b07;
    border:1px solid #2e2414;
    border-radius:6px;
    color:#e0e0e0;
    font-family: var(--font-game);
    font-size:14px;
    outline:none;
    transition:border-color .2s, box-shadow .2s;
}
.auth-input:focus {
    border-color:#c9a961;
    box-shadow:0 0 8px rgba(201,169,97,.15);
}
.auth-input::placeholder { color:#4a3a28; }

.auth-gender-row {
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    margin:4px 0 10px; font-size:12px; color:#8a7a60;
}
.auth-gender-label { letter-spacing:1px; }
.auth-gender-opt {
    display:flex; align-items:center; gap:5px; cursor:pointer; color:#c9a961;
}
.auth-gender-opt input { accent-color:#c9a961; }

.auth-btn-main {
    display:block; width:100%; padding:14px;
    background:linear-gradient(135deg,#7a5c1e,#c9a84c);
    color:#1a1200; border:1px solid #c9a84c; border-radius:6px;
    font-family: var(--font-game); font-size:14px;
    font-weight:700; letter-spacing:3px; cursor:pointer;
    margin-top:6px; text-align:center; text-decoration:none;
    transition:all .2s; text-transform:uppercase;
}
.auth-btn-main:hover {
    background:linear-gradient(135deg,#8a6c2e,#d9b85c);
    box-shadow:0 0 20px rgba(201,169,97,.25);
}
.auth-btn-outline {
    display:block; width:100%; padding:12px;
    background:transparent; color:#c9a961;
    border:1px solid #3a2e18; border-radius:6px;
    font-family: var(--font-game); font-size:13px;
    font-weight:700; letter-spacing:2px; text-align:center;
    text-decoration:none; text-transform:uppercase;
    transition:all .2s; margin-top:8px; cursor:pointer;
}
.auth-btn-outline:hover {
    border-color:#c9a961;
    background:rgba(201,169,97,.05);
}

.auth-forgot {
    display:block; text-align:center; color:#5a4a30;
    font-size:11px; margin-top:10px; text-decoration:none;
    transition:color .2s; letter-spacing:0.5px;
}
.auth-forgot:hover { color:#c9a961; }

.auth-stats {
    margin-top:16px;
    border:1px solid #2a2010;
    border-radius:8px;
    overflow:hidden;
    background:rgba(0,0,0,.3);
}
.auth-stat-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 16px; font-size:12px;
}
.auth-stat-row:first-child { border-bottom:1px solid #2a2010; }
.auth-stat-left {
    display:flex; align-items:center; gap:8px;
    color:#6a5a40; letter-spacing:1.5px; font-weight:600;
    text-transform:uppercase; font-size:11px;
}
.auth-stat-left svg { width:16px; height:16px; fill:#6a5a40; flex-shrink:0; }
.auth-stat-val { color:#c9a961; font-weight:700; font-size:14px; }
.auth-stat-val.green { color:#4a9a4a; }
.online-dot {
    width:10px; height:10px; background:#4a9a4a;
    border-radius:50%; box-shadow:0 0 8px #4a9a4a;
    display:inline-block; flex-shrink:0;
}
.auth-small {
    font-size:10px; color:#3a3020; text-align:center;
    margin-top:12px; letter-spacing:1px;
}
.auth-ornament {
    text-align:center; margin-top:10px; color:#2a2010; font-size:14px;
    line-height:1;
}
.auth-ornament svg { width:14px; height:14px; fill:#2a2010; }

.auth-alert {
    padding:10px 14px; border-radius:6px; font-size:12px;
    margin-bottom:12px; text-align:center;
}
.auth-alert-error { background:rgba(180,40,40,.15); border:1px solid #5a2020; color:#e06060; }
.auth-alert-success { background:rgba(40,120,40,.15); border:1px solid #205a20; color:#60c060; }

@media(max-width:400px) {
    .auth-box { padding:0 16px 14px; }
    .logo-title .top { font-size:16px; letter-spacing:4px; }
    .logo-title .bottom { font-size:28px; letter-spacing:5px; }
    .auth-btn-main { padding:12px; font-size:13px; }
}
@media(min-width:768px) {
    .auth-box { padding:0 28px 22px; }
    .logo-title .top { font-size:22px; }
    .logo-title .bottom { font-size:42px; }
}