body {
    margin:0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg,#0f0f1a,#1a1a2e);
    color:white;
}

nav {
    background:#111;
    padding:15px;
    display:flex;
    justify-content:space-between;
}

a {
    color:#00f0ff;
    text-decoration:none;
    margin-left:15px;
}

.container {
    max-width:1000px;
    margin:50px auto;
    padding:20px;
}

.card {
    background:#1f1f35;
    padding:25px;
    border-radius:10px;
    box-shadow:0 0 20px rgba(0,255,255,0.2);
}

button {
    background:#00f0ff;
    border:none;
    padding:10px 20px;
    cursor:pointer;
    font-weight:bold;
}

input {
    width:100%;
    padding:10px;
    margin:10px 0;
    background:#111;
    border:1px solid #333;
    color:white;
}
.admin-link {
    color:#ff3b3b;
    font-weight:bold;
}

.admin-link:hover {
    text-shadow:0 0 15px red;
}





/* powers.php */

.title {
    text-align:center;
    margin-bottom:50px;
    font-size:40px;
    text-shadow:0 0 20px #00f0ff;
}

.powers-grid {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
    gap:35px;
}

.power-card {
    position:relative;
    background:linear-gradient(145deg,#1a1a2e,#141427);
    padding:30px;
    border-radius:20px;
    text-align:center;
    overflow:hidden;
    transition:0.4s;
    border:2px solid var(--rarity-color);
    box-shadow:0 0 15px var(--rarity-color);

    display:flex;
    flex-direction:column;
    min-height:420px;
}

.power-card:hover {
    transform:translateY(-10px) scale(1.03);
    box-shadow:0 0 35px var(--rarity-color);
}

.power-card::before {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle, var(--rarity-color) 0%, transparent 70%);
    opacity:0.05;
    transform:rotate(25deg);
    pointer-events:none;
    z-index:0;
}

.power-card button {
    position: relative;
    z-index: 3;
}

.power-icon {
    width:100px;
    height:100px;
    object-fit:contain;
    margin-bottom:20px;
    filter: drop-shadow(0 0 10px var(--rarity-color));
}

.power-card h2 {
    margin:10px 0;
    font-size:22px;
}

.description {
    font-size:14px;
    color:#ccc;
    margin:15px 0;
    min-height:60px;
}

/* 🔻 ZONE DU BAS */

.bottom-infos {
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,0.1);
}

.cooldown {
    font-size:13px;
    font-weight:bold;
    color:#ff5252;
    margin-bottom:5px;
}

.level {
    font-weight:bold;
    color:var(--rarity-color);
}

.rarity-badge {
    position:absolute;
    top:15px;
    right:15px;
    background:var(--rarity-color);
    color:black;
    padding:5px 10px;
    font-size:12px;
    font-weight:bold;
    border-radius:20px;
}




/*admin.php*/

.search-bar {
    width:100%;
    padding:12px;
    margin-bottom:30px;
    background:#111;
    border:1px solid #333;
    color:white;
}

.admin-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:30px;
    margin-bottom:60px;
}

.admin-card {
    background:#151525;
    padding:20px;
    border-radius:15px;
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    transition:0.3s;
}

.admin-card:hover {
    transform:translateY(-5px);
}

.admin-card input,
.admin-card textarea {
    width:100%;
    margin-bottom:10px;
    background:#1e1e30;
    border:1px solid #333;
    color:white;
    padding:8px;
    border-radius:6px;
}

.admin-card button {
    background:#00f0ff;
    border:none;
    padding:8px;
    font-weight:bold;
    cursor:pointer;
}

.power-header {
    display:flex;
    justify-content:space-between;
    margin-bottom:10px;
}

.status.active { color:#00ff88; }
.status.inactive { color:#ff3b3b; }

.toggle-btn {
    background:#ff9800;
    margin-bottom:15px;
}

.admin-icon {
    width:60px;
    margin:10px 0;
}

.desc {
    font-size:14px;
    color:#ccc;
    margin-bottom:15px;
}

/* Glow rareté */
.rarity-1 { box-shadow:0 0 10px #9e9e9e; }
.rarity-2 { box-shadow:0 0 15px #2196f3; }
.rarity-3 { box-shadow:0 0 15px #9c27b0; }
.rarity-4 { box-shadow:0 0 20px #ff9800; }
.rarity-5 { box-shadow:0 0 25px #ff004c; }


/*choose_power.php*/
.choose-container {
    max-width:1200px;
    margin:80px auto;
    text-align:center;
}

.choose-container h1 {
    font-size:45px;
    margin-bottom:50px;
    text-shadow:0 0 20px #00f0ff;
}

.choose-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px;
}

.choose-card {
    background:linear-gradient(145deg,#1a1a2e,#141427);
    padding:30px;
    border-radius:20px;
    transition:0.4s;
    box-shadow:0 0 20px rgba(0,255,255,0.2);
    position:relative;
}

.choose-card:hover {
    transform:translateY(-10px) scale(1.03);
}

.choose-card h2 {
    margin:20px 0;
}

.choose-card p {
    font-size:14px;
    color:#ccc;
    min-height:60px;
}

.choose-card button {
    margin-top:20px;
    background:#00f0ff;
    border:none;
    padding:10px 20px;
    font-weight:bold;
    cursor:pointer;
}

.choose-icon {
    width:90px;
    height:90px;
    object-fit:contain;
    margin-bottom:15px;
}

/* Human */
.human-card {
    border:2px solid #888;
    box-shadow:0 0 20px #888;
}

/* Rarity glow */
.rarity-1 { box-shadow:0 0 15px #9e9e9e; }
.rarity-2 { box-shadow:0 0 15px #2196f3; }
.rarity-3 { box-shadow:0 0 20px #9c27b0; }
.rarity-4 { box-shadow:0 0 25px #ff9800; }
.rarity-5 { box-shadow:0 0 30px #ff004c; }