/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; background: #111; color: #fff; }

/* ===== Header ===== */
header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px; background: #000;
}
header .logo img { width: 150px; }
#user-login input { padding:5px 10px; border-radius:5px; border:none; }
#user-login button { padding:5px 10px; background:red; border:none; color:#fff; border-radius:5px; cursor:pointer; }
#user-info { display:flex; align-items:center; gap:5px; }
#playerhead { width:40px; height:40px; border-radius:50%; border:2px solid red; }

/* ===== Navigation ===== */
nav { display:flex; justify-content:center; background:#111; padding:10px 0; }
nav a { color:#fff; text-decoration:none; margin:0 10px; transition:0.2s; }
nav a:hover { color:red; }

/* ===== Landing Page ===== */
.landing { text-align:center; padding:100px 20px; }
.landing h1 { font-size:3em; }
.landing .highlight { color:red; }
.cta-btn { padding:10px 20px; background:red; border-radius:10px; color:#fff; text-decoration:none; display:inline-block; margin-top:20px; transition:0.3s; }
.cta-btn:hover { background:darkred; transform:scale(1.05); }

/* ===== Grid & Cards ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; margin-top:20px; }
.card {
    background:#222;
    border-radius:10px;
    text-align:center;
    padding:15px;
    transition:0.3s;
}
.card img { width:100px; height:100px; margin-bottom:10px; object-fit:cover; }
.card:hover { transform:translateY(-5px); box-shadow:0 0 10px red; }

/* ===== Landscape Cards (Coins / Optional) ===== */
.card.landscape {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
}
.card.landscape img {
    width:100%;
    height:120px;
    object-fit:cover;
    border-top-left-radius:15px;
    border-top-right-radius:15px;
    margin-bottom:10px;
}

/* ===== Buttons ===== */
.buy-btn {
    display:inline-block;
    padding:8px 20px;
    background:red;
    border-radius:5px;
    text-decoration:none;
    color:#fff;
    margin-top:10px;
    transition:0.3s;
}
.buy-btn:hover { background:darkred; transform:scale(1.05); }

/* ===== Rank Menu Buttons ===== */
.rank-menu button {
    padding:8px 15px;
    margin-right:10px;
    background-color:red;
    border:none;
    color:#fff;
    cursor:pointer;
    border-radius:5px;
}
.rank-menu button:hover { background-color:darkred; }

/* ===== Staff Page ===== */
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.staff-card {
    background: #222;
    border-radius: 10px;
    text-align: center;
    padding: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.staff-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid red;
    margin-bottom: 10px;
}
.staff-card h3 { margin: 5px 0; }
.staff-card p { margin: 0; color:#ccc; }
.staff-card:hover { transform: translateY(-5px); box-shadow: 0 0 10px red; }

/* ===== Responsive ===== */
@media(max-width:600px) {
    .landing h1 { font-size:2em; }
    .card img, .card.landscape img { height:100px; }
}