/* ==========================================================================
   Empyrion Futuristic Theme (dark neon) — v2025-09-17
   Non-destructive: only CSS overrides. No markup or PHP logic required.
   Colors & sizes via CSS variables. Tweaks are mobile-first.
   ========================================================================== */

:root{
  --bg-0:#060b12;            /* deep space */
  --bg-1:#0a1320;            /* panel base */
  --bg-2:#0f1e33;            /* hovered/raised */
  --panel: rgba(10,19,32,.65);
  --panel-solid:#0b1728;
  --line:#0d2742;
  --muted:#a6b3c7;
  --text:#e6f2ff;

  --primary:#05d1ff;         /* cyan neon */
  --accent:#ffb300;          /* amber */
  --success:#00ffa6;
  --danger:#ff4d5a;
  --warning:#ffd166;

  --radius:16px;
  --radius-sm:12px;
  --radius-xs:10px;
  --elev:0 6px 24px rgba(0,0,0,.35);
  --border:1px solid rgba(255,255,255,.08);
  --glow:0 0 18px rgba(5,209,255,.35), 0 0 3px rgba(5,209,255,.75) inset;

  --font-ui: system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html{box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}

html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% -10%, rgba(5,209,255,.09), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(255,179,0,.06), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 30%, #07101a 100%);
  font-family:var(--font-ui);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Grid overlay (subtle) */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient( to right, rgba(5,209,255,.06) 0 1px, transparent 1px 24px ),
    repeating-linear-gradient( to bottom, rgba(5,209,255,.05) 0 1px, transparent 1px 24px );
  mix-blend-mode:screen;
  opacity:.28;
  z-index:0;
}
/* Scanline sweep */
@media (prefers-reduced-motion: no-preference){
  body::after{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(5,209,255,.09), transparent);
    transform:translateY(-100%);
    animation:scan 8s linear infinite;
    z-index:0;
  }
  @keyframes scan{to{transform:translateY(100%)}}
}

/* Base text elements */
h1,h2,h3{letter-spacing:.02em; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(24px, 4vw, 34px); font-weight:800}
h2{font-size:clamp(20px, 3.2vw, 28px); font-weight:700}
h3{font-size:clamp(18px, 2.6vw, 22px); font-weight:700}
p{margin:.5em 0 1em; color:var(--text)}
small,.muted{color:var(--muted)}

/* Layout helpers (safe, non-conflicting) */
.wrap{max-width:1200px; margin:0 auto; padding:0 16px; position:relative; z-index:1}
.section{margin:18px 0}

/* Header / Footer (generic selectors, non-invasive) */
header, .site-header{
  background:linear-gradient(180deg, rgba(10,19,32,.75), rgba(10,19,32,.55));
  border-bottom:var(--border);
  backdrop-filter:saturate(120%) blur(8px);
  position:sticky; top:0; z-index:50;
}
footer, .site-footer{
  background:linear-gradient(0deg, rgba(10,19,32,.75), rgba(10,19,32,.35));
  border-top:var(--border);
}

/* Cards */
.card{
  background:var(--panel);
  border:1px solid rgba(5,209,255,.18);
  border-radius:var(--radius);
  box-shadow: var(--elev);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(5,209,255,.08), transparent 30%);
  pointer-events:none;
}
.card .muted{opacity:.9}

/* Buttons */
.btn, .button, button, input[type="submit"], .link-button{
  --btn-bg: linear-gradient(180deg, rgba(20,36,58,.95), rgba(12,24,39,.95));
  --btn-bd: rgba(5,209,255,.35);
  --btn-tx: #e9fbff;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.6rem .9rem;
  border-radius:12px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-tx);
  text-decoration:none; cursor:pointer;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  outline: none;
}
.btn:hover, .button:hover, button:hover, input[type="submit"]:hover{ box-shadow: var(--glow); border-color: rgba(5,209,255,.7) }
.btn:active, .button:active, button:active{ transform:translateY(1px) }
.btn-primary{ --btn-bg: linear-gradient(180deg, rgba(5,209,255,.22), rgba(5,209,255,.12)); --btn-bd: rgba(5,209,255,.55); color:#00141a }
.btn-accent{ --btn-bg: linear-gradient(180deg, rgba(255,179,0,.25), rgba(255,179,0,.12)); --btn-bd: rgba(255,179,0,.55); color:#1a1200 }
.btn-ghost{ --btn-bg: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); --btn-bd: rgba(255,255,255,.15); color:#e6f2ff }

/* Links */
a{color:var(--primary)}
a:hover{ text-shadow:0 0 8px rgba(5,209,255,.55) }

/* Forms */
label{display:block; margin:.5rem 0 .25rem; color:var(--muted)}
input[type="text"], input[type="number"], input[type="password"], input[type="email"], select, textarea{
  width:100%; padding:.65rem .75rem; border-radius:12px; border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(12,24,39,.85), rgba(8,17,29,.85)); color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
input::placeholder, textarea::placeholder{ color:#7f93ac }
input:focus, select:focus, textarea:focus{ outline:none; border-color:rgba(5,209,255,.7); box-shadow:0 0 0 3px rgba(5,209,255,.18) }

/* Tables */
table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; background:rgba(10,19,32,.55)}
thead th{
  background:linear-gradient(180deg, rgba(5,209,255,.16), rgba(5,209,255,.05));
  color:#d7f7ff; text-align:left; padding:.7rem .8rem; position:sticky; top:0; z-index:1;
}
tbody td{ padding:.65rem .8rem; border-top:1px solid rgba(255,255,255,.08) }
tbody tr:hover{ background-color:rgba(5,209,255,.06) }

/* Inventory style (generic) */
.inventory-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap:8px;
}
.inventory-grid .slot{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px; min-height:84px;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.inventory-grid .slot img{ max-width:72px; max-height:72px; object-fit:contain }
.inventory-grid .qty{
  position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.55);
  color:#fff; border:1px solid rgba(255,255,255,.15); border-radius:8px; padding:.12rem .35rem; font-size:.8rem;
}

/* Badges */
.badge{ display:inline-block; padding:.25rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06) }
.badge.success{ border-color:rgba(0,255,166,.4); background:rgba(0,255,166,.12); color:#baffea }
.badge.warn{ border-color:rgba(255,209,102,.4); background:rgba(255,209,102,.12); color:#fff0c4 }
.badge.danger{ border-color:rgba(255,77,90,.4); background:rgba(255,77,90,.12); color:#ffd0d4 }

/* Utilities */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px }
.center{ display:flex; align-items:center; justify-content:center }
.muted{ color:var(--muted) }
hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:12px 0 }

/* Scrollbars (webkit) */
*::-webkit-scrollbar{ height:12px; width:12px }
*::-webkit-scrollbar-track{ background:rgba(255,255,255,.04) }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, rgba(5,209,255,.75), rgba(5,209,255,.45)); border-radius:12px; border:2px solid rgba(0,0,0,.18) }

/* Selections */
::selection{ background:rgba(5,209,255,.35) }