:root{--bg:#070b12;--card:#101723;--card2:#131d2b;--line:#243247;--text:#eef5ff;--muted:#94a3b8;--violet:#a855f7;--green:#22c55e;--red:#ef4444;--blue:#38bdf8;--orange:#fb923c}
*{box-sizing:border-box}

/* ─── BODY : scroll géré ici, pas dans les conteneurs ─── */
body{
    margin:0;
    padding-top:74px;
    min-height:100vh;
    background:transparent;
    color:var(--text);
    font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
    overflow-y:scroll;
    overflow-x:hidden;
}

.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:rgba(7,11,18,.86);backdrop-filter:blur(10px)}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--blue));display:grid;place-items:center;font-size:24px}
.brand h1{font-size:22px;margin:0}
.brand p{margin:3px 0 0;color:var(--muted);font-size:13px}
.adminlink{font-weight: bold;color:#ffffff;text-decoration:none;border:1px solid #5b21b6;padding:10px 14px;border-radius:10px;background:rgba(93, 45, 168,.5)}

/* ─── PAGE PRINCIPALE (index) ─── */
.page{
    min-height:calc(100vh - 74px);
    padding:18px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:16px;
    align-items:start;
}

.panel{min-height:0;background:linear-gradient(180deg,rgba(16,23,35,.96),rgba(10,15,24,.96));border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.25);overflow:hidden}
.panel-head{padding:16px 16px 12px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:space-between}
.panel-title{display:flex;align-items:center;gap:10px}
.panel-title h2{font-size:18px;margin:0}
.count{font-size:13px;color:var(--muted)}
.btn{border:0;border-radius:10px;padding:10px 13px;color:white;cursor:pointer;background:linear-gradient(135deg,var(--violet),#7c3aed);font-weight:700}
.btn.small{font-size:13px;padding:8px 10px}
.search{margin:12px 16px 0}
.search input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;background:#0b1220;color:var(--text);outline:none}
.scroll{min-height:0;overflow:auto;padding:12px 16px 16px}
.rarity-block{margin-bottom:16px}
.rarity-title{position:sticky;top:-12px;z-index:2;padding:8px 10px;font-weight:800;text-transform:uppercase;font-size:15px;color:#facc15}
.item{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(148,163,184,.15);padding:10px 8px}
.item-name{font-weight:600}
.rarity-badge,.plain-badge{font-size:12px;border-radius:8px;padding:5px 8px;background:#1e293b;color:#cbd5e1;white-space:nowrap}
.Common{display: inline-block;color:#4ade80}
.Rare{display: inline-block;color:#60a5fa}
.Epic{display: inline-block;color:#A020F0}
.Legendary{display: inline-block;color:#FFFF00}
.Mythic{display: inline-block;color:#E34D2D}
.BrainrotGod {
    display: inline-block;
    font-weight: 900;

    background: linear-gradient(
        90deg,
        #ff0000,
        #ff8000,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #8000ff,
        #ff00ff
    )!important;

    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
}
.Secret {
    display: inline-block;
    font-weight: 900;

    background: linear-gradient(
        to top,
        #000 0%,
        #808080 42%,
        #fff 50%,
        #808080 58%,
        #000 100%
    );

    background-size: 100% 500%;
    background-position: 0 100%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: secretShine 2.3s linear infinite;
}

@keyframes secretShine {
    0% {
        background-position: 0 100%;
    }

    80% {
        background-position: 0 0%;
    }

    80.001% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 100%;
    }
}
.Eternal{display: inline-block;font-weight: 800;color:#ff0000}
.Goat{display: inline-block;font-weight: 800;color:#22d3ee}
.simple-list .item{justify-content:flex-start}

/* ─── MODALES ─── */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);align-items:center;justify-content:center;z-index:10}
.modal.open{display:flex}
.modal-card{width:min(460px,calc(100vw - 32px));background:#0f172a;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 30px 100px rgba(0,0,0,.5)}
.modal-card h3{margin:0 0 14px}
.modal-card input,.modal-card select{width:100%;margin:7px 0 13px;border:1px solid var(--line);border-radius:10px;padding:11px;background:#020617;color:white}
.actions{display:flex;justify-content:flex-end;gap:10px}
.danger{background:#3f1d1d}

/* ─── LOGIN ─── */
.login{display:grid;place-items:center;height:100vh}
.login-card{width:min(420px,calc(100vw - 32px));background:#101723;border:1px solid var(--line);border-radius:16px;padding:24px}
.login-card input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);background:#020617;color:white;margin:10px 0}
.msg{padding:10px 14px;border-radius:10px;background:#14532d;color:#dcfce7;margin-bottom:12px}

/* ─── TOP ACTIONS ─── */
.top-actions{display:flex;align-items:center;gap:10px}

/* ═══════════════════════════════════════════════
   PAGE FARM  — CORRECTIFS SCROLL
   ═══════════════════════════════════════════════ */

/* Le conteneur principal ne force plus une hauteur fixe
   et ne crée plus son propre contexte de scroll */
.farm-page{
    min-height:calc(100vh - 74px); /* grandit avec le contenu */
    padding:18px;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow:visible;             /* le scroll est géré par <body> */
}

.farm-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:linear-gradient(180deg,rgba(16,23,35,.96),rgba(10,15,24,.96));
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.farm-toolbar h2{margin:0;font-size:20px}
.farm-toolbar p{margin:4px 0 0;color:var(--muted);font-size:13px}

.farm-list{
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow:visible;            /* plus de height fixe ici non plus */
}

/* ─── Carte farm ─── */
.farm-card{
    scroll-margin-top: 90px;
    background:linear-gradient(180deg,rgba(16,23,35,.96),rgba(10,15,24,.96));
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.20);
    overflow:hidden;
}
.farm-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:15px 16px;
    border-bottom:1px solid var(--line);
    background:rgba(15,23,42,.7);
}
.farm-name{font-size:18px;font-weight:800}
.farm-capacity{
    font-weight:800;
    border:1px solid #334155;
    background:#0b1220;
    border-radius:999px;
    padding:7px 11px;
    color:#dbeafe;
    white-space:nowrap;
}
.farm-items{padding:10px 14px}
.farm-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border-bottom:1px solid rgba(148,163,184,.15);
    padding:10px 4px;
}
.farm-item:last-child{border-bottom:0}
.farm-item-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.farm-brainrot{font-weight:800}
.farm-item-actions,.farm-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.farm-card-actions{padding:12px 16px;border-top:1px solid var(--line);background:rgba(2,6,23,.35)}
.farm-empty-line,.empty-state{color:var(--muted);padding:14px}
.farm-empty-line{padding:8px 2px}

/* ─── Formulaires inline ─── */
.inline-form{display:inline;margin:0}
.icon-btn{
    border:1px solid var(--line);
    background:#0b1220;
    color:white;
    border-radius:8px;
    padding:6px 8px;
    cursor:pointer;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.delete-btn{background:#3f1d1d}
.edit-btn{background:#1e293b}
.farm-modal-card{max-height:90vh;overflow:auto}
.form-help{margin:0 0 12px;color:var(--muted);font-size:12px}
.modal-card select[multiple]{height:auto;min-height:170px}

/* ─── Login card spécial ─── */
.login-card{position:relative}
.login-card .btn{
    width:100%;
    text-align:center;
    background:linear-gradient(90deg,#923EE6 0%,#5D2DA8 25%,#1A81BD 50%,#5D2DA8 75%,#923EE6 100%);
    color:white;
    font-weight:700;
    box-shadow:0 0 15px rgba(168,85,247,.6);
}
.login-card .adminlink{position:absolute;top:16px;right:16px;width:auto}

/* ─── Background global ─── */
body{
    background:url('background.png') center center / cover no-repeat fixed !important;
}

/* ─── Responsive ─── */
@media(max-width:1024px){
    .page{
        height:auto;
        grid-template-columns:1fr;
    }
    .panel{height:70vh}
    .farm-page{
        height:auto;
        overflow:visible;
    }
    .farm-list{overflow:visible}
    .farm-item{align-items:flex-start;flex-direction:column}
    .top-actions{flex-wrap:wrap;justify-content:flex-end}

    /* ─── Topbar : tout sur une seule ligne ─── */
    body{padding-top:88px;}
    .topbar{
        height:88px;
        padding:0 12px;
        flex-wrap:nowrap;
        gap:8px;
        overflow:hidden;
    }
    .brand{
        gap:10px;
        flex-shrink:1;
        min-width:0;
        overflow:hidden;
    }
    .brand > div{
        min-width:0;
        overflow:hidden;
    }
    .logo{width:52px;height:52px;font-size:26px;border-radius:12px;flex-shrink:0}
    .brand h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
    .brand p{display:none}
    .brand .calc-btn{
        font-size:1rem;
        padding:11px 14px;
        white-space:nowrap;
        flex-shrink:0;
    }
    .brand .admin-machine-btn{
        font-size:1rem;
        padding:11px 14px;
        white-space:nowrap;
        flex-shrink:0;
    }
    .top-actions{
        flex-wrap:nowrap;
        gap:8px;
        flex-shrink:0;
        margin-left:auto;
    }
    #farmNav{
        max-width:150px !important;
        width:150px !important;
        margin-top:2px !important;
        margin-right:60px !important;
        font-size:.95rem !important;
        padding:4px 6px !important;
    }
    .top-actions .adminlink{
        font-size:1rem;
        padding:11px 14px;
        white-space:nowrap;
    }
}
/* ─── Income badge ─── */
.income-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:4px 12px;
    border-radius:999px;
    font-size:.85rem;
    font-weight:700;
    background:rgba(34,197,94,.2);
    color:#4ade80;
    border:1px solid rgba(74,222,128,.5);
    white-space:nowrap;
    letter-spacing:.02em;
    text-shadow:0 0 8px rgba(74,222,128,.4);
    margin-left: 10px;
}

/* ─── Calculatrice button ─── */
.calc-btn{
    cursor:pointer;
    font-size:.85rem;
    background:rgba(96,165,250,.12);
    color:#93c5fd;
    border-color:#1d4ed8;
}
.calc-btn:hover{
    background:rgba(96,165,250,.22);
}
.admin-machine-btn{
    background:rgba(74,222,128,.10);
    color:#4ade80;
    border-color:#15803d;
}
.admin-machine-btn:hover{
    background:rgba(74,222,128,.20);
}

/* ─── Farm item right (income + actions) ─── */
.farm-item-right{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
    flex-shrink:0;
}

/* === Dezoom auto sur PC uniquement (mobile inchange) === */
@media(min-width:1025px){
    html{
        zoom: 80%;
    }
}