/* ═══════════════════════════════════════════════════════════════
   civ-modern.css — Design system "Minecraft modernisé"
   Identité Minecraft (vert/or/emojis) avec UI moderne (Inter, gradients, glassmorphism)
   Utilisé par : login, register, reset, oublie, dashboard
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@500;600;700;800;900&family=Press+Start+2P&display=swap');

:root {
    /* ─── Palette Minecraft modernisée — enrichie ─── */
    --grass-300: #86efac;
    --grass-400: #4ade80;
    --grass-500: #22c55e;
    --grass-600: #16a34a;
    --grass-700: #15803d;
    --grass-800: #166534;
    --gold-200:  #fde68a;
    --gold-300:  #fcd34d;
    --gold-400:  #fbbf24;
    --gold-500:  #f59e0b;
    --gold-600:  #d97706;
    --gold-700:  #b45309;
    --red-300:   #fca5a5;
    --red-400:   #f87171;
    --red-500:   #ef4444;
    --red-600:   #dc2626;
    /* Terracotta / bordeaux — résonne avec les toits du spawn temple */
    --terracotta-300: #f59e8a;
    --terracotta-400: #e26a4f;
    --terracotta-500: #c4422c;
    --terracotta-600: #a83228;
    --terracotta-700: #832418;
    /* Warmstone — gris-brun chaleureux des bâtiments */
    --stone-300: #d6cfc4;
    --stone-500: #9a8f80;
    --stone-700: #4a4138;
    --blue-400:  #60a5fa;
    --blue-500:  #3b82f6;
    --violet-400:#a78bfa;
    --violet-500:#8b5cf6;
    /* Earth (warm-stone) */
    --earth-950: #0a0807;
    --earth-900: #161210;
    --earth-850: #1e1815;
    --earth-800: #2a221c;
    --earth-700: #3a2f25;
    --earth-600: #4a3c30;
    /* Text */
    --text:      #f5f5f4;
    --text-soft: #e7e5e4;
    --text-dim:  #b3aaa1;
    --text-mute: #7a716a;
    /* Borders & rings */
    --border:        rgba(251, 191, 36, 0.10);
    --border-strong: rgba(251, 191, 36, 0.28);
    --ring-gold:     0 0 0 4px rgba(251,191,36,0.20);
    --ring-grass:    0 0 0 4px rgba(34,197,94,0.20);
    /* Radii */
    --r-xs:  6px;
    --r-sm:  10px;
    --r-md:  14px;
    --r-lg:  20px;
    --r-xl:  28px;
    --r-2xl: 36px;
    /* alias compat */
    --radius:    var(--r-md);
    --radius-sm: var(--r-sm);
    --radius-lg: var(--r-lg);
    /* Spacing (4-pt grid) */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
    --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
    --s-12: 48px; --s-16: 64px;
    /* Shadows multi-couches (depth premium) */
    --shadow-sm:  0 1px 2px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.18);
    --shadow:     0 2px 4px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.03) inset;
    --shadow-lg:  0 4px 8px rgba(0,0,0,0.35), 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
    --shadow-xl:  0 8px 16px rgba(0,0,0,0.40), 0 40px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
    --glow-gold:  0 0 30px rgba(251,191,36,0.25), 0 0 60px rgba(251,191,36,0.10);
    --glow-grass: 0 0 30px rgba(34,197,94,0.32),  0 0 60px rgba(34,197,94,0.10);
    --glow-red:   0 0 30px rgba(239,68,68,0.32),  0 0 60px rgba(239,68,68,0.10);
    /* Motion */
    --transition: 0.22s cubic-bezier(.2,.7,.3,1);
    --transition-slow: 0.4s cubic-bezier(.2,.7,.3,1);
    /* Typography */
    --font-display: 'Outfit', 'Inter', sans-serif;
    --font-body:    'Inter', 'Outfit', system-ui, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-pixel:   'Press Start 2P', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Désactive le rebond élastique du scroll (Safari/iOS/macOS) qui faisait
   "sautiller" le background fixe en bout de page. */
html {
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
}
body { overscroll-behavior: none; }
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    min-height: 100vh;
    /* Fond uni de fallback (l'image et les overlays sont dans body::before) */
    background: linear-gradient(180deg, #0a0807, #161210);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Background fixe : image du spawn + overlays + grille subtile.
   Astuces anti-saccade :
   - position:fixed sur un pseudo-element (au lieu de background-attachment:fixed
     qui sautille sur Safari/iOS et les écrans tactiles).
   - Débord 10vh haut/bas (top:-10vh, height:120vh) pour absorber tout scroll-bounce
     et éviter qu'un bord apparaisse pendant le rebond.
   - translateZ + will-change forcent la couche GPU compositor. */
body::before {
    content: '';
    position: fixed;
    top: -10vh; left: -10vw;
    width:  120vw;
    height: 120vh;
    background:
        linear-gradient(rgba(251,191,36,0.025) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(251,191,36,0.025) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(180deg, rgba(10,8,7,0.78) 0%, rgba(22,18,16,0.88) 60%, rgba(10,8,7,0.94) 100%),
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(168,50,40,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 50% 100%, rgba(251,191,36,0.10) 0%, transparent 60%),
        url('../assets/civilisation-bg.jpg') center / cover no-repeat,
        #0a0807;
    pointer-events: none;
    z-index: -2;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000;
            perspective: 1000;
}

/* ── Blobs flottants en arrière-plan (donnent de la vie sans distraire)
   z-index -1 : au-dessus de l'image (body::before en -2) mais derrière le contenu. ── */
body::after {
    content: '';
    position: fixed;
    inset: -200px;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle 350px at 15% 30%,  rgba(34,197,94,0.13)  0%, transparent 60%),
        radial-gradient(circle 280px at 85% 70%,  rgba(251,191,36,0.10) 0%, transparent 60%),
        radial-gradient(circle 200px at 50% 95%,  rgba(96,165,250,0.08) 0%, transparent 60%);
    animation: blobsFloat 28s ease-in-out infinite;
    filter: blur(20px);
    will-change: transform;
}
@keyframes blobsFloat {
    0%,100% { transform: translate(0,0)   scale(1); }
    33%     { transform: translate(60px,-30px) scale(1.08); }
    66%     { transform: translate(-40px,40px) scale(0.95); }
}

/* TYPO ─────────────────────────────────────────────── */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700; margin: 0 0 12px; color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
h1 { font-size: clamp(1.85rem, 1.4rem + 1.6vw, 2.5rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 0.95rem; color: var(--text-dim); font-weight: 600; letter-spacing: 0; }

.title-pixel {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: var(--gold-400);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
}
.muted, .text-dim { color: var(--text-dim); }
.text-mute       { color: var(--text-mute); }
.text-gold       { color: var(--gold-400); }
.text-grass      { color: var(--grass-400); }
.text-red        { color: var(--red-400); }

/* AUTH layout (login / register / reset / oublie) ──── */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}
.auth-card {
    width: 100%;
    max-width: 460px;
    background:
        linear-gradient(180deg, rgba(40, 32, 26, 0.92) 0%, rgba(22, 18, 16, 0.95) 100%);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-radius: var(--r-xl);
    padding: 44px 38px;
    box-shadow: var(--shadow-xl),
                inset 0 1px 0 rgba(255,255,255,0.08),
                inset 0 0 0 1px rgba(251,191,36,0.10);
    animation: cardIn 0.55s cubic-bezier(.2,.7,.3,1) both;
    position: relative;
    overflow: hidden;
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(24px) scale(0.96); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
/* Gradient border premium : technique pseudo-element + conic gradient */
.auth-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        rgba(251,191,36,0.45) 0%,
        rgba(251,191,36,0.05) 30%,
        rgba(34,197,94,0.25) 60%,
        rgba(251,191,36,0.05) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}
/* Halo doré au-dessus de la carte (touche signature) */
.auth-card::after {
    content: '';
    position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
    width: 70%; height: 100%;
    background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(251,191,36,0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.auth-card > * { position: relative; z-index: 1; }

/* Entrée échelonnée des champs */
.auth-card .field,
.auth-card .field-row-check,
.auth-card .field-grid-2,
.auth-card > form > button,
.auth-card > form > .btn,
.auth-card .saved-accounts,
.auth-card .auth-footer,
.auth-card .divider {
    animation: fieldIn 0.5s cubic-bezier(.2,.7,.3,1) both;
}
.auth-card .field:nth-of-type(1)        { animation-delay: 0.08s; }
.auth-card .field:nth-of-type(2)        { animation-delay: 0.14s; }
.auth-card .field:nth-of-type(3)        { animation-delay: 0.20s; }
.auth-card .field:nth-of-type(4)        { animation-delay: 0.26s; }
.auth-card .field-grid-2                { animation-delay: 0.20s; }
.auth-card .field-row-check             { animation-delay: 0.26s; }
.auth-card > form > button,
.auth-card > form > .btn                { animation-delay: 0.32s; }
.auth-card .divider                     { animation-delay: 0.34s; }
.auth-card .saved-accounts              { animation-delay: 0.38s; }
.auth-card .auth-footer                 { animation-delay: 0.44s; }
@keyframes fieldIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.auth-header { text-align: center; margin-bottom: 28px; }
/* Logo officiel : image PNG centrée, avec halo doré qui respire — remplace l'ancien badge texte */
.auth-logo {
    display: inline-block;
    width: 220px; height: 130px;
    background: url('../assets/civilisation-logo.png') center/contain no-repeat;
    /* Texte (🏰 CIVILISATION) caché — accessible aux lecteurs d'écran via aria-label si besoin */
    font-size: 0; color: transparent;
    border: 0; padding: 0; box-shadow: none; text-shadow: none;
    margin-bottom: 14px;
    filter: drop-shadow(0 6px 18px rgba(251,191,36,0.18));
    animation: logoBreath 4s ease-in-out infinite;
}
@keyframes logoBreath {
    0%,100% { filter: drop-shadow(0 6px 18px rgba(251,191,36,0.18)) drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
    50%     { filter: drop-shadow(0 10px 28px rgba(251,191,36,0.38)) drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
}
/* Désactive les pseudo-elements de l'ancien badge */
.auth-logo::before, .auth-logo::after { content: none; }

@media (max-width: 480px) {
    .auth-logo { width: 180px; height: 108px; }
}

.auth-title    {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.4rem + 0.6vw, 2rem);
    font-weight: 800; margin: 0 0 6px;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, var(--text) 50%, var(--text-dim) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.auth-subtitle { color: var(--text-dim); font-size: 0.95rem; margin: 0; }

/* FORM ─────────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 6px;
}
.field-input, .field-select, .field-textarea {
    width: 100%;
    padding: 13px 15px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.30));
    border: 1px solid rgba(251,191,36,0.14);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.98rem;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.30);
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
    outline: none;
    border-color: var(--gold-500);
    box-shadow: 0 0 0 4px rgba(251,191,36,0.18), 0 0 14px rgba(251,191,36,0.12);
    background: rgba(0,0,0,0.50);
    transform: translateY(-1px);
}
.field-input::placeholder { color: var(--text-mute); }
.field-input[disabled] { opacity: 0.5; cursor: not-allowed; }

.field-row-check { display: flex; align-items: center; gap: 8px; margin: 14px 0 22px; }
.field-row-check input[type=checkbox] {
    width: 16px; height: 16px;
    accent-color: var(--grass-500);
    cursor: pointer;
}
.field-row-check label { font-size: 0.9rem; color: var(--text-dim); cursor: pointer; user-select: none; }

/* BUTTONS ──────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: 8px; padding: 12px 20px; border-radius: var(--radius-sm);
       border: 1px solid transparent; font-family: inherit; font-weight: 600;
       font-size: 0.95rem; cursor: pointer; text-decoration: none;
       transition: transform .15s, box-shadow var(--transition), background var(--transition), border-color var(--transition);
       white-space: nowrap;
       position: relative; overflow: hidden; }
/* Shimmer doré qui traverse les boutons primaires au hover */
.btn-primary::after, .btn-gold::after {
    content: '';
    position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg);
    transition: left .55s ease-in-out;
    pointer-events: none;
}
.btn-primary:hover::after, .btn-gold:hover::after { left: 140%; }
.btn-block { width: 100%; }
.btn-primary {
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.20), transparent 50%),
        linear-gradient(180deg, var(--grass-400) 0%, var(--grass-600) 60%, var(--grass-700) 100%);
    color: white;
    padding: 14px 22px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.20) inset,
        0 -1px 0 rgba(0,0,0,0.20) inset,
        0 6px 16px rgba(34,197,94,0.35),
        0 1px 3px rgba(0,0,0,0.30);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset,
        0 12px 28px rgba(34,197,94,0.50),
        var(--glow-grass);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled, .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-gold {
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    color: #1a1410;
    box-shadow: 0 4px 12px rgba(251,191,36,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-gold:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(251,191,36,0.45), var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-secondary {
    background: rgba(251,191,36,0.08);
    color: var(--gold-400);
    border-color: var(--border-strong);
}
.btn-secondary:hover { background: rgba(251,191,36,0.15); border-color: var(--gold-500); }

.btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); background: rgba(255,255,255,0.03); }

.btn-danger { background: rgba(239,68,68,0.12); color: var(--red-400); border-color: rgba(239,68,68,0.30); }
.btn-danger:hover { background: rgba(239,68,68,0.20); border-color: var(--red-500); }

.btn-sm { padding: 8px 14px; font-size: 0.85rem; }

/* LINKS ────────────────────────────────────────────── */
a.civ-link, .civ-link {
    color: var(--gold-400);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
a.civ-link:hover, .civ-link:hover { color: var(--gold-300); text-decoration: underline; }

/* ALERTS ───────────────────────────────────────────── */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    font-size: 0.9rem;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
    animation: alertIn 0.3s ease-out both;
}
@keyframes alertIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.alert-error   { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.35); color: #86efac; }
.alert-info    { background: rgba(251,191,36,0.10); border-color: rgba(251,191,36,0.35); color: var(--gold-400); }

/* DIVIDER ──────────────────────────────────────────── */
.auth-footer { text-align: center; margin-top: 24px; font-size: 0.9rem; color: var(--text-dim); }
.divider { text-align: center; margin: 22px 0 18px; color: var(--text-mute); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; position: relative; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: calc(50% - 30px); height: 1px; background: var(--border); }
.divider::before { left: 0; } .divider::after { right: 0; }

/* SAVED ACCOUNTS (login) ───────────────────────────── */
.saved-accounts { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border); }
.saved-accounts-title {
    font-size: 0.72rem; font-weight: 600; color: var(--text-mute);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px;
}
.saved-account {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    background: rgba(0,0,0,0.28);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    transition: background var(--transition), border-color var(--transition), transform .12s;
}
.saved-account:hover { background: rgba(0,0,0,0.42); border-color: var(--border-strong); transform: translateY(-1px); }
.saved-account-avatar {
    width: 36px; height: 36px; border-radius: 8px;
    background: linear-gradient(135deg, var(--grass-500), var(--grass-700));
    display: grid; place-items: center;
    font-weight: 700; font-size: 0.95rem; color: white;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.saved-account-name { flex: 1; font-weight: 500; color: var(--text); }
.saved-account-balance { font-size: 0.78rem; color: var(--gold-400); margin-right: 4px; }
.saved-account-btn {
    background: transparent; border: 1px solid transparent; color: var(--text-dim);
    cursor: pointer; padding: 6px 10px; border-radius: 6px;
    font-size: 0.95rem; transition: all var(--transition);
}
.saved-account-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border); }
.saved-account-btn.danger:hover { color: var(--red-400); border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); }
.saved-account-form { display: inline; }

/* GRID for forms ───────────────────────────────────── */
.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 520px) {
    .auth-card { padding: 30px 22px; border-radius: 16px; max-width: 100%; }
    .auth-logo { font-size: 0.72rem; }
    .auth-title { font-size: 1.3rem; }
    .field-grid-2 { grid-template-columns: 1fr; }
}