/* ============================================================================
   MafiaDistrict — ELITE UI  (md_elite.css)
   Premium polish layer. Loads AFTER md.css and md_nextgen_real_ui.css so it
   wins on cascade order alone — NO !important arms race. Pure additive theme:
   touches presentation only, never markup the game logic depends on.
   ----------------------------------------------------------------------------
   Design thesis: "the operator's terminal" — a criminal command center.
   Keeps the existing navy/blue-purple DNA, adds a restrained gold "made-man"
   accent for prestige moments, tightens type, and brings real motion.
   ============================================================================ */

:root{
  /* Core surfaces */
  --el-bg:        #060912;
  --el-bg-2:      #0a1020;
  --el-panel:     rgba(16, 25, 43, .72);
  --el-panel-2:   rgba(9, 15, 28, .82);
  --el-line:      rgba(132, 168, 224, .14);
  --el-line-hot:  rgba(132, 168, 224, .30);

  /* Text */
  --el-text:      #eef3ff;
  --el-muted:     rgba(216, 228, 255, .58);
  --el-faint:     rgba(216, 228, 255, .38);

  /* Accents */
  --el-blue:      #5ca8ff;
  --el-purple:    #a78bfa;
  --el-cyan:      #34d3ee;
  --el-red:       #ff5d6c;
  --el-green:     #34d399;
  --el-amber:     #f6c052;
  --el-gold:      #e8c267;   /* prestige accent — used sparingly */

  /* Effects */
  --el-glow:      0 0 0 1px rgba(124,140,255,.10), 0 18px 50px rgba(0,0,0,.45);
  --el-glow-hot:  0 0 0 1px rgba(92,168,255,.30), 0 22px 70px rgba(20,40,90,.40);
  --el-radius:    16px;
  --el-radius-sm: 12px;
  --el-ease:      cubic-bezier(.22,.61,.36,1);
  --el-fast:      .16s var(--el-ease);
  --el-slow:      .34s var(--el-ease);
}

/* ---------------------------------------------------------------------------
   1. Global feel — smooth scroll, refined selection, custom scrollbar
   --------------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

::selection{ background:rgba(92,168,255,.30); color:#fff; }

*{ scrollbar-width:thin; scrollbar-color:rgba(124,140,255,.34) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(124,140,255,.42),rgba(92,168,255,.22));
  border-radius:999px; border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(124,140,255,.62),rgba(92,168,255,.38)); background-clip:content-box; }

/* Ambient backdrop — subtle, behind everything, no layout impact */
body.md-nextgen-ui::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 460px at 50% -6%, rgba(92,168,255,.10), transparent 70%),
    radial-gradient(900px 540px at 92% 108%, rgba(255,93,108,.08), transparent 70%),
    radial-gradient(760px 520px at 4% 90%, rgba(167,139,250,.07), transparent 72%);
  animation: elAmbient 26s ease-in-out infinite alternate;
}
@keyframes elAmbient{
  0%{ opacity:.8; transform:translateY(0); }
  100%{ opacity:1; transform:translateY(-12px); }
}

/* ---------------------------------------------------------------------------
   2. Panels & cards — unify the glass treatment used across pages
   --------------------------------------------------------------------------- */
body.md-nextgen-ui .panel,
body.md-nextgen-ui .card,
body.md-nextgen-ui .md-card,
body.md-nextgen-ui .ng-card{
  position:relative;
  border:1px solid var(--el-line);
  border-radius:var(--el-radius);
  background:linear-gradient(180deg,var(--el-panel),var(--el-panel-2));
  box-shadow:var(--el-glow);
  backdrop-filter:blur(7px) saturate(1.05);
  transition:border-color var(--el-fast), box-shadow var(--el-slow), transform var(--el-fast);
}
body.md-nextgen-ui .panel:hover,
body.md-nextgen-ui .card:hover,
body.md-nextgen-ui .md-card:hover{
  border-color:var(--el-line-hot);
  box-shadow:var(--el-glow-hot);
}

/* Thin gradient top-edge highlight — reads as "machined metal" */
body.md-nextgen-ui .panel::before,
body.md-nextgen-ui .card::before{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,140,255,.5),transparent);
  opacity:.7; pointer-events:none;
}

/* ---------------------------------------------------------------------------
   3. Buttons — tactile, with a sheen sweep on hover
   --------------------------------------------------------------------------- */
body.md-nextgen-ui .btn,
body.md-nextgen-ui button.btn,
body.md-nextgen-ui a.btn,
body.md-nextgen-ui .button{
  position:relative; overflow:hidden;
  border-radius:var(--el-radius-sm);
  transition:transform var(--el-fast), box-shadow var(--el-fast), filter var(--el-fast);
}
body.md-nextgen-ui .btn::after,
body.md-nextgen-ui .button::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .55s var(--el-ease); pointer-events:none;
}
body.md-nextgen-ui .btn:hover::after,
body.md-nextgen-ui .button:hover::after{ transform:translateX(120%); }
body.md-nextgen-ui .btn:hover,
body.md-nextgen-ui .button:hover{ transform:translateY(-1px); filter:brightness(1.07); }
body.md-nextgen-ui .btn:active,
body.md-nextgen-ui .button:active{ transform:translateY(0) scale(.985); }
body.md-nextgen-ui .btn:focus-visible,
body.md-nextgen-ui .button:focus-visible,
body.md-nextgen-ui a:focus-visible,
body.md-nextgen-ui button:focus-visible{
  outline:2px solid var(--el-cyan); outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   4. HUD — premium stat pills with animated fills
   --------------------------------------------------------------------------- */
body.md-nextgen-ui .hud-item{
  border-radius:13px;
  background:linear-gradient(180deg,rgba(18,28,46,.86),rgba(8,13,24,.86));
  border:1px solid var(--el-line);
  box-shadow:0 10px 28px rgba(0,0,0,.30);
  transition:border-color var(--el-fast), transform var(--el-fast);
}
body.md-nextgen-ui .hud-item:hover{ transform:translateY(-2px); border-color:var(--el-line-hot); }
body.md-nextgen-ui .hud-fill{ transition:width .6s var(--el-ease); }

/* HUD value count-up flash (driven by md_elite.js) */
body.md-nextgen-ui .el-bump{ animation: elBump .42s var(--el-ease); }
@keyframes elBump{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.16); color:var(--el-gold); }
  100%{ transform:scale(1); }
}

/* Heat at danger — pulse the heat pill red when high */
body.md-nextgen-ui .hud-item.is-hot{
  border-color:rgba(255,93,108,.42);
  animation: elHeat 1.5s ease-in-out infinite;
}
@keyframes elHeat{
  0%,100%{ box-shadow:0 10px 28px rgba(0,0,0,.30); }
  50%{ box-shadow:0 0 0 1px rgba(255,93,108,.5), 0 0 26px rgba(255,93,108,.30); }
}

/* ---------------------------------------------------------------------------
   5. Sidebar nav — refine the existing nextgen sidebar links
   --------------------------------------------------------------------------- */
body.md-nextgen-ui .md-ng-nav a{
  transition:background var(--el-fast), border-color var(--el-fast),
             transform var(--el-fast), color var(--el-fast);
}
body.md-nextgen-ui .md-ng-nav a:hover{ transform:translateX(3px); }
body.md-nextgen-ui .md-ng-nav a.active{
  background:linear-gradient(90deg,rgba(92,168,255,.22),rgba(167,139,250,.10));
  border-color:rgba(92,168,255,.34);
  box-shadow:inset 3px 0 0 var(--el-cyan), 0 10px 26px rgba(0,0,0,.20);
}
body.md-nextgen-ui .md-ng-brand{ transition:transform var(--el-slow); }
body.md-nextgen-ui .md-ng-brand:hover{ transform:scale(1.012); }

/* ---------------------------------------------------------------------------
   6. Tables — quiet zebra + hover lift for dense data pages
   --------------------------------------------------------------------------- */
body.md-nextgen-ui table.md-table tbody tr,
body.md-nextgen-ui .data-table tbody tr{ transition:background var(--el-fast); }
body.md-nextgen-ui table.md-table tbody tr:hover,
body.md-nextgen-ui .data-table tbody tr:hover{ background:rgba(92,168,255,.06); }

/* ---------------------------------------------------------------------------
   7. Page entrance — content fades up once per navigation (JS adds .el-enter)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  body.md-nextgen-ui main.el-enter > *,
  body.md-nextgen-ui .content.el-enter > *,
  body.md-nextgen-ui .page.el-enter > *{
    animation: elEnter .5s var(--el-ease) both;
  }
  body.md-nextgen-ui .el-enter > *:nth-child(2){ animation-delay:.05s; }
  body.md-nextgen-ui .el-enter > *:nth-child(3){ animation-delay:.10s; }
  body.md-nextgen-ui .el-enter > *:nth-child(4){ animation-delay:.15s; }
  body.md-nextgen-ui .el-enter > *:nth-child(n+5){ animation-delay:.18s; }
}
@keyframes elEnter{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------------------------------------------------------------------------
   8. Toasts — non-blocking notifications (md_elite.js)
   --------------------------------------------------------------------------- */
#el-toast-wrap{
  position:fixed; right:18px; bottom:18px; z-index:99999;
  display:flex; flex-direction:column; gap:10px; max-width:min(360px,calc(100vw - 36px));
  pointer-events:none;
}
.el-toast{
  pointer-events:auto;
  display:flex; gap:11px; align-items:flex-start;
  padding:13px 15px; border-radius:14px;
  background:linear-gradient(165deg,rgba(16,25,43,.96),rgba(7,11,20,.96));
  border:1px solid var(--el-line-hot);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  color:var(--el-text); font-size:13px; line-height:1.4;
  animation: elToastIn .34s var(--el-ease) both;
  transform-origin:bottom right;
}
.el-toast.is-out{ animation: elToastOut .26s var(--el-ease) both; }
.el-toast .el-toast-ico{ font-size:17px; line-height:1.2; flex:0 0 auto; }
.el-toast .el-toast-body{ min-width:0; }
.el-toast .el-toast-title{ font-weight:900; margin-bottom:1px; }
.el-toast .el-toast-msg{ color:var(--el-muted); }
.el-toast.ok{    border-color:rgba(52,211,153,.40); }
.el-toast.warn{  border-color:rgba(246,192,82,.40); }
.el-toast.err{   border-color:rgba(255,93,108,.46); }
.el-toast.prestige{ border-color:rgba(232,194,103,.55); box-shadow:0 0 0 1px rgba(232,194,103,.30),0 20px 60px rgba(0,0,0,.5); }
@keyframes elToastIn{  from{ opacity:0; transform:translateY(14px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes elToastOut{ to{ opacity:0; transform:translateX(20px) scale(.96); } }

/* ---------------------------------------------------------------------------
   9. Command palette  (Ctrl/Cmd-K)  — the signature next-gen moment
   --------------------------------------------------------------------------- */
#el-cmdk{
  position:fixed; inset:0; z-index:100000; display:none;
  align-items:flex-start; justify-content:center;
  padding-top:14vh;
  background:rgba(3,6,14,.62); backdrop-filter:blur(6px);
}
#el-cmdk.is-open{ display:flex; animation: elFade .18s ease both; }
@keyframes elFade{ from{opacity:0} to{opacity:1} }
.el-cmdk-box{
  width:min(620px,calc(100vw - 32px));
  background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(7,11,20,.98));
  border:1px solid var(--el-line-hot);
  border-radius:18px; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(124,140,255,.12);
  animation: elPop .22s var(--el-ease) both;
}
@keyframes elPop{ from{ transform:translateY(-14px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.el-cmdk-search{ display:flex; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--el-line); }
.el-cmdk-search svg{ width:18px; height:18px; flex:0 0 auto; opacity:.6; }
.el-cmdk-search input{
  flex:1; background:transparent; border:0; outline:0;
  color:var(--el-text); font-size:16px; font-weight:600;
}
.el-cmdk-search input::placeholder{ color:var(--el-faint); }
.el-cmdk-search kbd{
  font-size:10px; font-weight:800; color:var(--el-muted);
  padding:3px 7px; border-radius:7px; border:1px solid var(--el-line);
  background:rgba(255,255,255,.03); letter-spacing:.05em;
}
.el-cmdk-list{ max-height:48vh; overflow:auto; padding:8px; }
.el-cmdk-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:12px; cursor:pointer;
  color:var(--el-text); text-decoration:none; border:1px solid transparent;
}
.el-cmdk-item .el-cmdk-ico{ width:22px; text-align:center; flex:0 0 22px; font-size:15px; opacity:.92; }
.el-cmdk-item .el-cmdk-label{ font-weight:700; font-size:14px; }
.el-cmdk-item .el-cmdk-group{ margin-left:auto; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--el-faint); }
.el-cmdk-item.is-active,
.el-cmdk-item:hover{
  background:linear-gradient(90deg,rgba(92,168,255,.20),rgba(167,139,250,.10));
  border-color:rgba(92,168,255,.32);
}
.el-cmdk-empty{ padding:26px; text-align:center; color:var(--el-faint); font-size:13px; }
.el-cmdk-foot{
  display:flex; gap:16px; align-items:center; padding:10px 16px;
  border-top:1px solid var(--el-line); font-size:11px; color:var(--el-faint);
}
.el-cmdk-foot b{ color:var(--el-muted); }

/* ---------------------------------------------------------------------------
   10. Floating action hint chip (bottom-left) — discoverability for Ctrl+K
   --------------------------------------------------------------------------- */
#el-cmdk-hint{
  position:fixed; left:max(16px, calc(var(--ng-sidebar,300px) + 16px)); bottom:16px; z-index:9990;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 13px; border-radius:999px; cursor:pointer;
  background:linear-gradient(165deg,rgba(16,25,43,.92),rgba(7,11,20,.92));
  border:1px solid var(--el-line); color:var(--el-muted);
  font-size:12px; font-weight:700; box-shadow:0 14px 40px rgba(0,0,0,.4);
  transition:border-color var(--el-fast), color var(--el-fast), transform var(--el-fast);
}
#el-cmdk-hint:hover{ color:#fff; border-color:var(--el-line-hot); transform:translateY(-2px); }
#el-cmdk-hint kbd{
  font-size:10px; font-weight:900; padding:2px 6px; border-radius:6px;
  border:1px solid var(--el-line); background:rgba(255,255,255,.04); color:var(--el-text);
}
@media (max-width:1179px){ #el-cmdk-hint{ left:16px; } }
@media (max-width:760px){ #el-cmdk-hint{ display:none; } }

/* ---------------------------------------------------------------------------
   11. Prestige / gold flourishes — used only on rare wins (level up, achievement)
   --------------------------------------------------------------------------- */
.el-prestige-text{
  background:linear-gradient(110deg,#fff,var(--el-gold) 55%,#fff7d6);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* Confetti-free celebratory ring used by levelUp() */
.el-ring-burst{
  position:fixed; left:50%; top:42%; transform:translate(-50%,-50%);
  width:10px; height:10px; border-radius:999px; z-index:100001; pointer-events:none;
  box-shadow:0 0 0 0 rgba(232,194,103,.7);
  animation: elRing 1s var(--el-ease) forwards;
}
@keyframes elRing{
  to{ box-shadow:0 0 0 60vmax rgba(232,194,103,0); opacity:0; }
}

/* ---------------------------------------------------------------------------
   12. Accessibility & motion safety
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  body.md-nextgen-ui::before{ animation:none; }
}