/* ============================================================
   Atlantiris – Neobrutalism Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --bg:        #e0e7ff;
    --surface:   #f5f7ff;
    --card:      #ffffff;
    --card-hover:#fafbff;
    --border:    #000000;
    --border-w:  4px;
    --shadow:    8px 8px 0px #000;
    --shadow-sm: 4px 4px 0px #000;
    --text:      #000000;
    --muted:     #444444;
    --dim:       #777777;
    --radius:    0px;
    --radius-sm: 0px;
    --nav-h:     64px;

    /* Accents */
    --yellow:    #fef08a;
    --green:     #a7f3d0;
    --pink:      #fda4af;
    --blue:      #bae6fd;
    --purple:    #ddd6fe;
    --orange:    #fed7aa;
    --lime:      #d9f99d;
    --teal:      #99f6e4;

    /* Plugin palette */
    --c-mine:    #bae6fd;
    --c-fish:    #99f6e4;
    --c-farm:    #bbf7d0;
    --c-lumber:  #fed7aa;
    --c-equip:   #ddd6fe;
    --c-struct:  #fda4af;
    --c-shop:    #fef08a;
    --c-spawner: #f5d0fe;
    --c-core:    #e2e8f0;
    --c-eco:     #a7f3d0;

    /* Rarity */
    --r-common:    #e2e8f0;
    --r-uncommon:  #bbf7d0;
    --r-rare:      #bae6fd;
    --r-epic:      #ddd6fe;
    --r-legendary: #fef08a;
    --r-mythic:    #fed7aa;
    --r-unique:    #fef08a;
    --r-ancient:   #fda4af;

    /* Legacy compat */
    --brand:     #818cf8;
    --brand-2:   #c084fc;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: "Space Mono", "Courier New", monospace;
    line-height: 1.7;
    min-height: 100vh;
    padding-top: var(--nav-h);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #000; }
::-webkit-scrollbar-thumb:hover { background: #333; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-h);
    z-index: 100;
    background: var(--yellow);
    border-bottom: var(--border-w) solid var(--border);
}

.nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav-logo {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 2px solid transparent;
    text-decoration: none;
    font-size: .82rem;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: all .08s;
}
.nav-links a:hover { background: #000; color: var(--yellow); border-color: #000; }
.nav-links a.active { background: #000; color: var(--yellow); border-color: #000; }

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.nav-btn {
    padding: 6px 16px;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 3px solid #000;
    background: #fff;
    color: #000;
    box-shadow: 3px 3px 0px #000;
    transition: all .08s;
    cursor: pointer;
}
.nav-btn:hover, .nav-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0px #000; }
.nav-btn.outline { background: transparent; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
    text-align: center;
    padding: 32px 24px;
    border-top: var(--border-w) solid var(--border);
    background: #000;
    color: #fff;
    font-size: .82rem;
}
.site-footer a { color: var(--yellow); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 12px; flex-wrap: wrap; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    text-transform: uppercase;
    border: 2px solid #000;
    color: #000;
}
.badge.common    { background: var(--r-common); }
.badge.uncommon  { background: var(--r-uncommon); }
.badge.rare      { background: var(--r-rare); }
.badge.epic      { background: var(--r-epic); }
.badge.legendary { background: var(--r-legendary); }
.badge.mythic    { background: var(--r-mythic); }
.badge.unique    { background: var(--r-unique); }
.badge.ancient   { background: var(--r-ancient); }
.badge.cursed    { background: var(--r-ancient); }
.badge.level     { background: var(--r-common); }
.badge.info      { background: var(--blue); }
.badge.warn      { background: var(--yellow); }

/* ============================================================
   CODE / CMD
   ============================================================ */
.cmd {
    font-family: inherit;
    font-size: .82rem;
    color: var(--yellow);
    background: #000;
    padding: 3px 8px;
    border: 2px solid #000;
    display: inline-block;
}
.mono { font-family: inherit; font-size: .88rem; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap { overflow-x: auto; }
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    background: #fff;
    border: 4px solid #000;
}
.tbl thead tr { background: #000; color: var(--yellow); }
.tbl th {
    text-align: left;
    padding: 10px 16px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-right: 2px solid #333;
    white-space: nowrap;
}
.tbl th:last-child { border-right: none; }
.tbl td {
    padding: 10px 16px;
    border-bottom: 2px solid #000;
    border-right: 1px solid #ccc;
    vertical-align: middle;
    color: #000;
}
.tbl td:last-child { border-right: none; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--yellow); }
.tbl tbody tr:nth-child(even) td { background: #f5f7ff; }
.tbl tbody tr:nth-child(even):hover td { background: var(--yellow); }

/* ============================================================
   GENERAL UTILITIES
   ============================================================ */
.text-muted  { color: #555; }
.text-bright { color: #000; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
    .nav-links .hide-mobile { display: none; }
}
@media (max-width: 640px) {
    .nav-links { display: none; }
    .nav-btn.hide-mobile { display: none; }
}