/* ================================================================
   StoryCamp Web — Auth Page Styles  (full rewrite)
   ================================================================ */

/* ── Variables ── */
:root {
    --night:      #06100a;
    --forest:     #091410;
    --card-bg:    rgba(10, 22, 14, 0.96);
    --amber:      #f39c12;
    --fire-1:     #ff6b1a;
    --fire-2:     #ffb347;
    --text-main:  #f0ebe0;
    --text-muted: #8aa07a;
    --border:     rgba(255,255,255,.09);
    --input-bg:   rgba(255,255,255,.05);
    --error:      #e74c3c;
    --success:    #2ecc71;
    --info-color: #f39c12;
    --tr:         .22s cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* ── Base ── */
body {
    min-height: 100vh;
    background: radial-gradient(ellipse 120% 80% at 50% 110%,
        rgba(18,40,18,.95) 0%,
        rgba(6,16,10,.98) 55%,
        #030a05 100%);
    color: var(--text-main);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ================================================================
   STAR FIELD BACKGROUND
   ================================================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10%  15%, rgba(255,255,255,.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 25%  40%, rgba(255,255,255,.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 40%  8%,  rgba(255,255,255,.3)  0%, transparent 100%),
        radial-gradient(1px 1px at 55%  25%, rgba(255,255,255,.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 70%  12%, rgba(255,255,255,.3)  0%, transparent 100%),
        radial-gradient(1px 1px at 82%  35%, rgba(255,255,255,.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 92%  18%, rgba(255,255,255,.35) 0%, transparent 100%),
        radial-gradient(1px 1px at 15%  70%, rgba(255,255,255,.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 60%  80%, rgba(255,255,255,.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 88%  65%, rgba(255,255,255,.15) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

/* ================================================================
   CAMPFIRE — complete redesign
   ================================================================ */
.campfire-scene {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 8px;
    flex-shrink: 0;
}

/* Ground glow */
.cf-glow {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 70px;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(255, 110, 10, .38) 0%,
        rgba(255, 80,  0, .18) 40%,
        transparent 70%);
    border-radius: 50%;
    animation: cf-glow-pulse 2.2s ease-in-out infinite alternate;
}
@keyframes cf-glow-pulse {
    from { opacity: .7; transform: translateX(-50%) scaleX(.95); }
    to   { opacity: 1;  transform: translateX(-50%) scaleX(1.12); }
}

/* Ground ring */
.cf-ground {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 12px;
    background: radial-gradient(ellipse, #1a0800 0%, #0d0500 60%, transparent 100%);
    border-radius: 50%;
}

/* Logs */
.cf-logs {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 22px;
}
.cf-log {
    position: absolute;
    height: 14px;
    border-radius: 7px;
    bottom: 0;
    box-shadow: inset 0 -3px 6px rgba(0,0,0,.5);
}
.cf-log-l {
    width: 88px;
    background: linear-gradient(to bottom, #5c2f00, #3d1d00 60%, #2a1200);
    left: 0;
    transform: rotate(-22deg);
    transform-origin: 10% 90%;
}
.cf-log-r {
    width: 88px;
    background: linear-gradient(to bottom, #5c2f00, #3d1d00 60%, #2a1200);
    right: 0;
    transform: rotate(22deg);
    transform-origin: 90% 90%;
}
/* Embers on logs */
.cf-log-l::after,
.cf-log-r::after {
    content: '';
    position: absolute;
    top: 2px; left: 20px;
    width: 40px; height: 4px;
    background: linear-gradient(90deg, transparent, rgba(255,100,0,.6), transparent);
    border-radius: 2px;
    animation: ember-glow 1.8s ease-in-out infinite alternate;
}
@keyframes ember-glow {
    from { opacity: .3; }
    to   { opacity: .9; }
}

/* Coal pile */
.cf-coal {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 10px;
    background: radial-gradient(ellipse, #e05000 0%, #a03000 40%, #3d1200 100%);
    border-radius: 50%;
    animation: coal-pulse 2.8s ease-in-out infinite alternate;
}
@keyframes coal-pulse {
    from { box-shadow: 0 0 8px  4px rgba(255,80,0,.25); }
    to   { box-shadow: 0 0 18px 8px rgba(255,80,0,.45); }
}

/* Fire wrap */
.cf-fire {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 140px;
}

/* Individual flame layers */
.cf-flame {
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 48% 48% 28% 28% / 50% 50% 28% 28%;
    transform-origin: 50% 100%;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Outer flame — deep red/orange */
.cf-f1 {
    width: 78px; height: 118px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255, 80,  0, 1)   0%,
        rgba(220, 40,  0, .85) 45%,
        rgba(180, 20,  0, .4)  75%,
        transparent 100%);
    filter: blur(2px);
    animation-name: flame-a;
    animation-duration: 1.55s;
    margin-left: -39px;
}
/* Second flame — orange */
.cf-f2 {
    width: 62px; height: 100px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255,140,  0, 1)   0%,
        rgba(255, 80,  0, .85) 50%,
        rgba(220, 50,  0, .4)  75%,
        transparent 100%);
    filter: blur(1.2px);
    animation-name: flame-b;
    animation-duration: 1.82s;
    animation-delay: -.6s;
    margin-left: -31px;
}
/* Third flame — amber */
.cf-f3 {
    width: 46px; height: 82px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255,195,  0, 1)   0%,
        rgba(255,130,  0, .9)  50%,
        rgba(255, 80,  0, .4)  75%,
        transparent 100%);
    filter: blur(.5px);
    animation-name: flame-a;
    animation-duration: 1.28s;
    animation-delay: -.3s;
    margin-left: -23px;
}
/* Fourth flame — yellow */
.cf-f4 {
    width: 30px; height: 60px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255,240,100, 1)   0%,
        rgba(255,200,  0, .95) 50%,
        rgba(255,140,  0, .5)  75%,
        transparent 100%);
    animation-name: flame-b;
    animation-duration: 1.05s;
    animation-delay: -.8s;
    margin-left: -15px;
}
/* Core — white-yellow */
.cf-f5 {
    width: 14px; height: 34px;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(255,255,220, 1)   0%,
        rgba(255,250,150, .95) 50%,
        rgba(255,220, 80, .5)  80%,
        transparent 100%);
    animation-name: flame-a;
    animation-duration:  .88s;
    animation-delay: -.15s;
    margin-left: -7px;
}

@keyframes flame-a {
    0%   { transform: scaleX(1)    scaleY(1)    rotate(-2deg); }
    100% { transform: scaleX(.88)  scaleY(1.07) rotate( 3deg); }
}
@keyframes flame-b {
    0%   { transform: scaleX(.94)  scaleY(1.06) rotate( 2deg); }
    100% { transform: scaleX(1.08) scaleY(.93)  rotate(-2deg); }
}

/* Smoke wisps */
.cf-smoke {
    position: absolute;
    bottom: 155px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 80px;
}
.cf-wisp {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    background: rgba(180,200,180,.08);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.cf-wisp-1 {
    width: 18px; height: 18px; left: 50%; margin-left: -9px;
    animation: wisp-rise 3.5s 0s infinite;
}
.cf-wisp-2 {
    width: 14px; height: 14px; left: 50%; margin-left: -7px;
    animation: wisp-rise 3.5s 1.1s infinite;
}
.cf-wisp-3 {
    width: 12px; height: 12px; left: 50%; margin-left: -6px;
    animation: wisp-rise 3.5s 2.2s infinite;
}
@keyframes wisp-rise {
    0%   { transform: translateY(0)    translateX(0)   scale(.6);  opacity: 0; }
    20%  { opacity: .5; }
    100% { transform: translateY(-80px) translateX(22px) scale(2.4); opacity: 0; }
}

/* Floating sparks / embers */
.cf-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}
.cf-spark {
    position: absolute;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 4px 2px rgba(243,156,18,.6);
    animation: spark-float linear infinite;
    animation-fill-mode: both;
}
.cf-spark:nth-child(1)  { width:3px; height:3px; left:46%; bottom:20%; animation-duration:2.8s; animation-delay:0s;    --sx: -18px; }
.cf-spark:nth-child(2)  { width:2px; height:2px; left:52%; bottom:22%; animation-duration:2.2s; animation-delay:-.7s;  --sx:  22px; }
.cf-spark:nth-child(3)  { width:3px; height:3px; left:40%; bottom:18%; animation-duration:3.1s; animation-delay:-1.4s; --sx:  -8px; }
.cf-spark:nth-child(4)  { width:2px; height:2px; left:58%; bottom:24%; animation-duration:2.5s; animation-delay:-2.1s; --sx: -25px; }
.cf-spark:nth-child(5)  { width:4px; height:4px; left:50%; bottom:20%; animation-duration:2.0s; animation-delay:-0.5s; --sx:  12px; }
.cf-spark:nth-child(6)  { width:2px; height:2px; left:44%; bottom:16%; animation-duration:3.4s; animation-delay:-1.8s; --sx:  30px; }
.cf-spark:nth-child(7)  { width:3px; height:3px; left:56%; bottom:18%; animation-duration:2.7s; animation-delay:-2.8s; --sx: -14px; }
.cf-spark:nth-child(8)  { width:2px; height:2px; left:48%; bottom:22%; animation-duration:1.9s; animation-delay:-0.3s; --sx:  20px; }

@keyframes spark-float {
    0%   { transform: translateY(0)     translateX(0)            scale(1);    opacity: 1; }
    70%  { opacity: .7; }
    100% { transform: translateY(-130px) translateX(var(--sx, 0px)) scale(.1);  opacity: 0; }
}

/* ================================================================
   PAGE LAYOUT
   ================================================================ */
.auth-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 48px 16px 40px;
    gap: 0;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--amber);
    text-decoration: none;
    letter-spacing: -.3px;
    margin-bottom: 24px;
    transition: opacity var(--tr);
}
.auth-logo:hover { opacity: .8; }

/* ================================================================
   AUTH CARD
   ================================================================ */
.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--card-bg);
    border: 1px solid rgba(243,156,18,.14);
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    box-shadow:
        0 24px 64px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.03),
        inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* ================================================================
   TAB TOGGLE  (login | register)
   ================================================================ */
.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: rgba(0,0,0,.25);
    border-bottom: 1px solid var(--border);
}
.auth-tab {
    padding: 14px 10px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color var(--tr), border-color var(--tr), background var(--tr);
    letter-spacing: .2px;
    font-family: inherit;
}
.auth-tab:hover { color: var(--text-main); background: rgba(255,255,255,.03); }
.auth-tab.active {
    color: var(--amber);
    border-bottom-color: var(--amber);
    background: rgba(243,156,18,.06);
}

/* ================================================================
   FORM PANELS — only one visible at a time
   ================================================================ */
.auth-panel {
    padding: 28px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* Only the active panel is shown; .hidden hides the other */

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.form-input {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 11px 14px;
    font-size: .93rem;
    color: var(--text-main);
    width: 100%;
    outline: none;
    transition: border-color var(--tr), box-shadow var(--tr);
    font-family: inherit;
}
.form-input::placeholder { color: rgba(138,160,122,.55); }
.form-input:focus {
    border-color: rgba(243,156,18,.55);
    box-shadow: 0 0 0 3px rgba(243,156,18,.10);
}
.form-input.error   { border-color: var(--error); }
.form-input.success { border-color: var(--success); }

.password-wrapper          { position: relative; }
.password-wrapper .form-input { padding-right: 44px; }

.btn-show-pwd {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 1rem; line-height: 1;
    transition: color var(--tr);
    padding: 0;
}
.btn-show-pwd:hover { color: var(--text-main); }

/* Password strength */
.pwd-strength-bar {
    display: flex; gap: 4px; margin-top: 7px;
}
.pwd-strength-bar span {
    flex: 1; height: 3px; border-radius: 3px;
    background: rgba(255,255,255,.09);
    transition: background var(--tr);
}
.pwd-strength-bar span.filled-weak   { background: #e74c3c; }
.pwd-strength-bar span.filled-fair   { background: #f39c12; }
.pwd-strength-bar span.filled-strong { background: #2ecc71; }

.pwd-strength-label {
    font-size: .72rem; color: var(--text-muted); margin-top: 4px;
    height: 14px;
}

/* Forgot link row */
.auth-forgot {
    text-align: right;
    margin-top: -6px;
}
.auth-forgot a {
    font-size: .78rem; color: var(--text-muted);
    text-decoration: none; transition: color var(--tr);
}
.auth-forgot a:hover { color: var(--amber); }

/* ================================================================
   SUBMIT BUTTON
   ================================================================ */
.btn-submit {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, var(--fire-1) 0%, var(--amber) 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: .97rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 22px rgba(243,156,18,.32);
    transition: all var(--tr);
    font-family: inherit;
    position: relative;
    overflow: hidden;
    margin-top: 4px;
    letter-spacing: .2px;
}
.btn-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--tr);
}
.btn-submit:hover::before          { opacity: 1; }
.btn-submit:hover   { transform: translateY(-2px); box-shadow: 0 7px 28px rgba(243,156,18,.46); }
.btn-submit:active  { transform: translateY(0); }
.btn-submit:disabled {
    opacity: .55; cursor: not-allowed;
    transform: none; box-shadow: none;
}
.btn-submit .btn-text    { display: block; }
.btn-submit .btn-spinner { display: none; }
.btn-submit.loading .btn-text    { display: none; }
.btn-submit.loading .btn-spinner {
    display: block;
    width: 20px; height: 20px; margin: 0 auto;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   DIVIDER
   ================================================================ */
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    font-size: .75rem; color: var(--text-muted);
    margin: 18px 0 0;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ================================================================
   OAUTH BUTTON
   ================================================================ */
.btn-oauth {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px 14px;
    border-radius: 9px;
    font-size: .88rem; font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--border);
    color: var(--text-main);
    transition: all var(--tr);
    font-family: inherit;
    margin-top: 12px;
}
.btn-oauth:hover {
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.18);
    transform: translateY(-1px);
}
.btn-oauth:active { transform: translateY(0); }
.btn-oauth .oauth-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ================================================================
   MESSAGES
   ================================================================ */
.auth-msg {
    display: none;
    padding: 11px 14px;
    border-radius: 9px;
    font-size: .84rem;
    text-align: center;
    line-height: 1.45;
    animation: msg-in .25s ease;
    margin-top: 4px;
}
.auth-msg.show  { display: block; }
.auth-msg.error   { background: rgba(231,76,60,.1);  border: 1px solid rgba(231,76,60,.28);  color: #ff7675; }
.auth-msg.success { background: rgba(46,204,113,.1); border: 1px solid rgba(46,204,113,.28); color: #55efc4; }
.auth-msg.info    { background: rgba(243,156,18,.08);border: 1px solid rgba(243,156,18,.22); color: var(--amber); }

@keyframes msg-in {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   TERMS
   ================================================================ */
.auth-terms {
    font-size: .73rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
    margin-top: 14px;
}
.auth-terms a { color: var(--amber); text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }

/* ================================================================
   BACK LINK
   ================================================================ */
.auth-back {
    margin-top: 22px;
    font-size: .82rem;
    color: var(--text-muted);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--tr);
    letter-spacing: .1px;
}
.auth-back:hover { color: var(--text-main); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 480px) {
    .auth-page    { padding: 32px 12px 32px; }
    .auth-panel   { padding: 22px 20px 26px; }
    .auth-card    { border-radius: 16px; }
    .campfire-scene { width: 140px; height: 140px; transform: scale(.85); transform-origin: center bottom; }
}