/* ================================================================
   Ironhorde Online - Shared Base Styles
   Variables, resets, body base, scrollbar, ember canvas
   Loaded by ALL pages before page-specific styles
   ================================================================ */

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ---- Design Tokens (unified variable set) ---- */
:root{
    /* Backgrounds */
    --bg:             #06070b;
    --bg-dark:        #06070b;
    --bg-card:        #0c0e15;
    --bg-card2:       #10131c;
    --bg-card-hover:  #10131c;
    --bg-input:       #0a0c12;

    /* Borders */
    --border:         rgba(201,164,74,0.12);
    --border-h:       rgba(201,164,74,0.35);
    --border-glow:    rgba(201,164,74,0.35);

    /* Gold / Accent */
    --gold:           #c9a44a;
    --accent:         #c9a44a;
    --gold-l:         #f0d060;
    --accent-light:   #f0d060;
    --gold-d:         #9a7420;
    --accent-dim:     #9a7420;
    --accent-glow:    rgba(201,164,74,0.3);

    /* Fire */
    --fire1:          #ff6a00;
    --fire2:          #ff9800;

    /* Status */
    --red:            #ff4444;
    --red-glow:       rgba(255,68,68,0.3);
    --green:          #44cc66;
    --green-glow:     rgba(68,204,102,0.3);
    --blue:           #4488ff;
    --blue-glow:      rgba(68,136,255,0.3);

    /* Text */
    --white:          #e8e6e0;
    --text:           #e8e6e0;
    --text-bright:    #f4f4f5;
    --gray:           #8a8678;
    --text-dim:       #8a8678;

    /* Faction */
    --karus:          #ff6666;
    --elmorad:        #66aaff;

    /* Typography */
    --font-d:         'Cinzel Decorative', serif;
    --font-h:         'Cinzel', serif;
    --font:           'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Base ---- */
html{scroll-behavior:smooth;overflow-x:hidden}

body{
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;border:none;background:none;font:inherit;color:inherit}
ul{list-style:none}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(201,164,74,0.2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(201,164,74,0.4)}

/* ---- Ember Canvas ---- */
#ember-canvas{
    position:fixed;top:0;left:0;width:100%;height:100%;
    pointer-events:none;z-index:9999;
}

/* ---- Hidden Utility ---- */
.hidden{display:none !important}

/* ---- Shared Form Elements ---- */
.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-group label {
    font-family: var(--font-h);
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.input-field {
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-bright);
    font-family: var(--font);
    font-size: 0.95rem;
    outline: none;
    transition: all 0.25s;
}

.input-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px rgba(201, 164, 74, 0.1);
}

.input-field::placeholder {
    color: var(--text-dim);
}

/* ---- Shared Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.btn:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-glow);
    transform: translateY(-1px);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-dim), var(--accent));
    color: #0a0a0a;
    border-color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-accent:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-light));
    border-color: var(--accent);
    color: #0a0a0a;
    box-shadow: 0 6px 24px var(--accent-glow), 0 0 40px rgba(255, 106, 0, 0.1);
    transform: translateY(-2px);
}

.btn-danger {
    border-color: rgba(255, 68, 68, 0.3);
    color: var(--red);
}

.btn-danger:hover {
    background: rgba(255, 68, 68, 0.08);
    border-color: rgba(255, 68, 68, 0.5);
    box-shadow: 0 0 20px var(--red-glow);
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---- Shared Alerts ---- */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    display: none;
    align-items: center;
    gap: 8px;
}

.alert.show { display: flex; }

.alert-error {
    background: rgba(255, 68, 68, 0.06);
    border: 1px solid rgba(255, 68, 68, 0.2);
    color: var(--red);
}

.alert-success {
    background: rgba(68, 204, 102, 0.06);
    border: 1px solid rgba(68, 204, 102, 0.2);
    color: var(--green);
}

/* ---- Shared Spinner ---- */
.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Shared Fade-in ---- */
.fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}