/* KeyVault — Gamivo × Aureus theme (violet + gold, dark, stylised) */
:root{
  --bg:#0b0912; --bg2:#14111f; --panel:#171322; --panel2:#1d1830;
  --line:#2b2440; --text:#ece9f6; --muted:#948aab;
  --violet:#7c3aed; --violet2:#a78bfa; --violet-dim:#3a2a63;
  --gold:#e6b450; --gold2:#f4cf7a; --gold-dim:#7a5c22;
  --danger:#ef4444; --green:#34d399; --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--text);
  font-family:"Segoe UI",Roboto,Arial,Helvetica,system-ui,sans-serif;
  background:
    radial-gradient(900px 500px at 80% -260px,rgba(124,58,237,.28),transparent),
    radial-gradient(700px 460px at 0% -200px,rgba(230,180,80,.10),transparent),
    var(--bg);
  min-height:100vh; display:flex; flex-direction:column;
}
a{color:var(--violet2); text-decoration:none}
a:hover{color:var(--gold2); text-decoration:none}

/* top bar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px; background:rgba(10,8,16,.82);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:5;
}
.brand{display:flex; align-items:center; gap:11px}
.brand .mark{filter:drop-shadow(0 2px 6px rgba(124,58,237,.5))}
.wordmark{font-weight:800; font-size:18px; letter-spacing:.16em; text-transform:uppercase}
.wordmark b{color:var(--gold)}
.nav{display:flex; align-items:center; gap:16px}
.nav-link{color:var(--text); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.08em}
.nav-link:hover{color:var(--gold2)}
.who{color:var(--muted); font-size:13px; letter-spacing:.03em}
.inline{display:inline}

.wrap{flex:1; width:100%; max-width:1120px; margin:0 auto; padding:30px 24px 70px}
.foot{text-align:center; color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:22px}

.page-title{margin:0 0 6px; font-size:27px; font-weight:800; letter-spacing:.02em}
.sub{margin:0 0 22px; font-size:14px}
.muted{color:var(--muted)}

/* flashes */
.flashes{margin-bottom:20px; display:flex; flex-direction:column; gap:9px}
.flash{padding:12px 15px; border-radius:10px; border:1px solid var(--line); font-size:14px; border-left-width:3px}
.flash-success{background:rgba(52,211,153,.10); border-left-color:var(--green)}
.flash-error{background:rgba(239,68,68,.10); border-left-color:var(--danger)}

/* buttons */
.btn{
  display:inline-block; cursor:pointer; border:none; border-radius:9px;
  padding:11px 18px; font-size:13px; font-weight:800; color:#fff;
  background:var(--panel2); font-family:inherit; letter-spacing:.06em;
  text-transform:uppercase; transition:.15s; border:1px solid var(--line);
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn-primary{
  background:linear-gradient(135deg,#8b46f0,#6d28d9); border:none;
  box-shadow:0 6px 18px rgba(124,58,237,.35);
}
.btn-primary:hover{box-shadow:0 8px 24px rgba(124,58,237,.5)}
.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold)); color:#241a04; border:none;
  box-shadow:0 6px 18px rgba(230,180,80,.28)}
.btn-discord{background:#5865f2; border:none; padding:13px 24px; font-size:14px; box-shadow:0 6px 18px rgba(88,101,242,.4)}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--text)}
.btn-ghost:hover{border-color:var(--violet2); color:var(--gold2)}
.btn-danger{background:transparent; border:1px solid rgba(239,68,68,.5); color:#ff8080}
.btn-danger:hover{background:var(--danger); color:#fff; border-color:var(--danger)}
.btn-done{background:var(--panel2); color:var(--muted); border:1px solid var(--line)}
.btn-sm{padding:7px 12px; font-size:12px}
.btn .ic{vertical-align:-2px; margin-right:6px}

/* hero (login / denied / lock) */
.hero{min-height:64vh; display:flex; align-items:center; justify-content:center}
.hero-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:16px; padding:46px 38px; max-width:430px;
  text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(167,139,250,.12);
}
.hero-mark{margin-bottom:14px}
.hero-card h1{margin:8px 0 12px; font-size:26px; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.hero-card h1 b{color:var(--gold)}
.fineprint{margin-top:20px; font-size:12px; color:var(--muted)}
.cf-turnstile{margin:16px auto}
code{font-family:Consolas,"SF Mono",monospace}

/* grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.16s; position:relative;
}
.card:hover{transform:translateY(-4px); border-color:var(--violet); box-shadow:0 14px 34px rgba(124,58,237,.28)}
.thumb-link,.card-title-link{display:block; text-decoration:none; color:inherit}
.thumb{
  position:relative; height:118px; background-size:cover; background-position:center;
  background-color:#0f0b1a; background-image:linear-gradient(135deg,#241a3c,#3a2a63);
}
.thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,9,18,.55))}
.stock{
  position:absolute; top:9px; right:9px; z-index:1; background:rgba(8,6,14,.85);
  color:var(--gold2); font-weight:800; font-size:12px; padding:3px 10px; border-radius:20px;
  border:1px solid rgba(230,180,80,.45); letter-spacing:.03em;
}
.card-body{padding:13px 15px 16px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-title{margin:0; font-size:15px; line-height:1.25; font-weight:700}
.card-title-link:hover .card-title{color:var(--gold2)}
.region{display:flex; flex-direction:column; gap:5px; flex:1}
.region-pill{
  align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--violet-dim); color:var(--violet2); padding:4px 10px; border-radius:6px;
  border:1px solid rgba(167,139,250,.25);
}
.region-soft{font-size:11px; color:var(--muted); font-style:italic}
.card-body .btn{width:100%; text-align:center}

.empty{background:var(--panel); border:1px dashed var(--line); border-radius:var(--radius); padding:44px; text-align:center; color:var(--muted)}

/* currency */
.balance-bar{display:flex; align-items:center; gap:12px; margin:-8px 0 24px}
.balance-chip{display:inline-flex; align-items:center; gap:7px; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(180deg,rgba(230,180,80,.16),rgba(230,180,80,.06)); color:var(--gold2);
  border:1px solid rgba(230,180,80,.4); padding:6px 13px; border-radius:20px; font-size:14px}
.coin{flex:0 0 auto}

/* panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:22px}
.panel h2{margin:0 0 16px; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding-left:11px; border-left:3px solid var(--gold)}
.panel h2 .muted,.panel h2 span{text-transform:none; letter-spacing:0}
.form-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.form-row input{flex:1; min-width:150px}
input,textarea,select{
  background:var(--bg2); border:1px solid var(--line); border-radius:8px; color:var(--text);
  padding:10px 12px; font-size:14px; font-family:inherit; width:100%;
}
input::placeholder,textarea::placeholder{color:#6f6788}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.check{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13px; white-space:nowrap; width:auto}
.check input{width:auto}
label{display:block; font-size:11px; color:var(--muted); margin:9px 0 4px; text-transform:uppercase; letter-spacing:.06em}

.admin-game{border:1px solid var(--line); border-radius:10px; padding:15px; margin-bottom:14px; background:linear-gradient(180deg,rgba(124,58,237,.05),transparent)}
.admin-game.inactive{opacity:.55}
.ag-head{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:13px; flex-wrap:wrap}
.ag-actions{display:flex; gap:8px; flex-wrap:wrap}
.ag-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.ag-col{display:flex; flex-direction:column}
.badge{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; background:var(--violet-dim); color:var(--violet2); padding:3px 9px; border-radius:6px; margin-left:6px}
.badge-dim{background:#241d33; color:var(--muted)}
.badge-off{background:rgba(239,68,68,.18); color:#ff9a9c}

.tbl{width:100%; border-collapse:collapse; margin-top:12px; font-size:13px}
.tbl th,.tbl td{text-align:left; padding:9px 11px; border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted); font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.06em}
.tbl code{background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:2px 7px; font-size:12px; white-space:nowrap; color:var(--gold2)}
.tag{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; padding:3px 9px; border-radius:6px}
.tag-available{background:rgba(52,211,153,.16); color:#5ee2ad}
.tag-claimed{background:#241d33; color:var(--muted)}
.row-actions{display:flex; gap:6px; white-space:nowrap}
.delta-pos{color:#5ee2ad; font-weight:800}
.delta-neg{color:#ff9a9c; font-weight:800}

/* console header + bulk */
.db-head{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.bulkbar{display:flex; flex-wrap:wrap; gap:8px}
.db-search{margin:4px 0 22px; font-size:14px}
.tbl-scroll{overflow-x:auto}

/* game detail */
.detail{display:grid; grid-template-columns:1fr 300px; gap:26px; align-items:start}
.detail-main{min-width:0}
.detail-side{position:sticky; top:90px}
.side-panel{padding:20px; background:linear-gradient(180deg,var(--panel2),var(--panel))}
.side-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:14px; border-bottom:1px solid var(--line)}
.side-row:last-of-type{border-bottom:none}
.stock-inline{color:var(--gold2); font-weight:800}
.steam-link{display:block; text-align:center; margin-top:14px; font-size:12px; text-transform:uppercase; letter-spacing:.08em}
.trailer{width:100%; border-radius:var(--radius); background:#000; aspect-ratio:16/9; border:1px solid var(--line)}
.detail-hero{width:100%; border-radius:var(--radius); border:1px solid var(--line)}
.detail-h2{font-size:14px; margin:24px 0 12px; text-transform:uppercase; letter-spacing:.1em; color:var(--gold); font-weight:800}
.detail-desc{color:var(--text); line-height:1.65; font-size:15px}
.trailer-strip{display:flex; gap:9px; overflow-x:auto; margin-top:11px; padding-bottom:4px}
.trailer-thumb{position:relative; flex:0 0 auto; width:122px; height:69px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#000}
.trailer-thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.7}
.trailer-thumb.active{border-color:var(--gold)}
.trailer-thumb:hover img{opacity:1}
.trailer-thumb .play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.trailer-thumb .play::before{content:""; width:0; height:0; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; filter:drop-shadow(0 1px 3px #000)}
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px}
.shot{width:100%; height:92px; object-fit:cover; border-radius:8px; border:1px solid var(--line); cursor:pointer; transition:.13s}
.shot:hover{border-color:var(--gold); transform:scale(1.02)}
.lightbox{position:fixed; inset:0; background:rgba(6,4,10,.94); z-index:50; align-items:center; justify-content:center; cursor:zoom-out; padding:32px}
.lightbox img{max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.7)}

@media(max-width:820px){ .detail{grid-template-columns:1fr} .detail-side{position:static} }
@media(max-width:640px){ .ag-grid{grid-template-columns:1fr} }