/* ─────────────────────────────────────────────────────────────
   NYXTAP — "Nyx, Goddess of Night" theme
   Deep midnight indigo, moonlit lavender, luminous gold + violet.
   ───────────────────────────────────────────────────────────── */
:root{
  --gold:#E8C86E; --gold-dark:#C9A94E; --violet:#8B6FE0; --violet-dark:#6E52C4;
  --ink:#ECEAFB; --ink-soft:#A6A2CC; --ink-faint:#726E96;
  --bg:#0A0A16; --surface:#14142A; --surface-2:#1B1B36; --line:#2C2C4E;
  --good:#4FD6A6; --danger:#F0708A;
  --radius:16px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --glow-gold:0 0 24px rgba(232,200,110,.35);
  --glow-violet:0 0 26px rgba(139,111,224,.4);
}
*{box-sizing:border-box}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(139,111,224,.16), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(232,200,110,.10), transparent 55%),
    #0A0A16;
  background-attachment:fixed;
  min-height:100vh;
}
/* faint starfield */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 70% 60%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,.35), transparent),
    radial-gradient(1.6px 1.6px at 85% 25%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.2px 1.2px at 55% 15%, rgba(255,255,255,.3), transparent),
    radial-gradient(1.3px 1.3px at 10% 70%, rgba(255,255,255,.4), transparent);
  background-repeat:repeat;background-size:520px 520px;opacity:.5;
}
main,nav,footer{position:relative;z-index:1;}

h1,h2,h3,h4,h5,.fw-black{font-family:'Cinzel','Nunito',serif;font-weight:700;letter-spacing:.5px;}
.fw-black{font-weight:900;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:#fff;text-decoration:none;}

/* ── Nav ── */
.nyx-nav{
  background:rgba(12,12,26,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nyx-nav .navbar-brand{
  font-family:'Cinzel',serif;font-weight:900;font-size:1.3rem;color:var(--ink);
  text-shadow:var(--glow-violet);
}
.nyx-logo{filter:drop-shadow(0 0 8px rgba(232,200,110,.7));}
.nyx-nav .nav-link{color:var(--ink-soft)!important;font-weight:600;}
.nyx-nav .nav-link:hover,.nyx-nav .nav-link.active{color:var(--gold)!important;}
.dropdown-menu{background:var(--surface);border:1px solid var(--line);}
.dropdown-item{color:var(--ink-soft);}
.dropdown-item:hover{background:var(--surface-2);color:var(--gold);}
.dropdown-item-text{color:var(--ink-faint);}
.dropdown-divider{border-color:var(--line);}
.navbar-toggler{border-color:var(--line);}
.navbar-toggler-icon{filter:invert(1) brightness(1.4);}
.nyx-faucet-menu{max-height:60vh;overflow:auto;min-width:230px;}
.nyx-faucet-menu .dropdown-item{display:flex;align-items:center;gap:.55rem;font-weight:600;}

/* ── Buttons ── */
.btn-nyx{
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border:0;color:#1a1330;font-weight:800;font-family:'Cinzel',serif;letter-spacing:.5px;
  border-radius:50px;padding:.55rem 1.5rem;transition:.15s;
}
.btn-nyx:hover{color:#1a1330;transform:translateY(-1px);box-shadow:var(--glow-gold);}
.btn-nyx:disabled{opacity:.5;transform:none;box-shadow:none;cursor:not-allowed;}
.btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:50px;padding:.5rem 1.3rem;font-weight:600;transition:.15s;
}
.btn-ghost:hover{border-color:var(--violet);color:#fff;}

/* ── Hero ── */
.nyx-hero{text-align:center;padding:2rem 0 2.4rem;}
.nyx-hero h1{
  font-size:2.6rem;
  background:linear-gradient(135deg,#fff,var(--gold) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(139,111,224,.25);
}
.nyx-hero p{color:var(--ink-soft);font-size:1.05rem;}

/* ── Faucet grid ── */
/* Fixed 5-per-row — for the current ~15 active coins that's 3 rows. Falls
   back to auto-fill on narrow screens (see the max-width:576px override
   below) rather than cramming 5 tiny columns onto a phone. */
.faucet-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.faucet-card{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;text-align:center;transition:.16s;display:block;color:var(--ink);
}
.faucet-card:hover{
  transform:translateY(-4px);border-color:var(--gold);
  box-shadow:var(--glow-gold);color:var(--ink);
}
.faucet-card img{width:44px;height:44px;margin-bottom:8px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.faucet-card .coin{font-family:'Cinzel',serif;font-weight:800;font-size:1.05rem;}
.faucet-card .rate{font-size:.78rem;color:var(--ink-soft);margin-top:3px;}
/* Dashboard's personalized faucet grid — same card, ready/cooldown state added. */
.dash-faucet-card.is-ready{border-color:var(--good);}
.dash-faucet-card.is-wait img{filter:grayscale(.5) opacity(.7);}

/* ── Cards / claim ── */
.card-nyx{
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.claim-amount{
  font-family:'Cinzel',serif;font-weight:900;font-size:2.1rem;line-height:1;
  color:var(--gold);text-shadow:var(--glow-gold);
}
.claim-sub{color:var(--ink-soft);}
.big-timer{font-family:'Cinzel',serif;font-weight:900;font-size:2.4rem;letter-spacing:2px;color:var(--violet);text-shadow:var(--glow-violet);}

.form-control{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:.6rem .9rem;
}
.form-control:focus{
  background:var(--bg);color:var(--ink);border-color:var(--violet);
  box-shadow:0 0 0 .2rem rgba(139,111,224,.25);
}
.form-control::placeholder{color:var(--ink-faint);}
/* Native <input type=date> renders its text/icon with browser chrome that
   doesn't inherit `color` — color-scheme tells the browser to draw its own
   controls (text, picker icon, the calendar popup) light-on-dark instead of
   assuming a white page; the icon filter is a Firefox fallback since Firefox
   doesn't yet re-tint the icon from color-scheme alone. */
input[type="date"]{color-scheme:dark;}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.85);cursor:pointer;}

.captcha-box img{border:1px solid var(--line);border-radius:10px;background:#FFFBF0;}
.payout-row{display:flex;justify-content:space-between;font-size:.85rem;padding:.45rem 0;border-bottom:1px dashed var(--line);color:var(--ink-soft);}
.payout-row:last-child{border-bottom:0;}
.payout-row .amt{color:var(--gold);font-weight:600;}

.alert{border-radius:12px;border:1px solid var(--line);}
.alert-success{background:rgba(79,214,166,.12);color:var(--good);border-color:rgba(79,214,166,.3);}
.alert-danger{background:rgba(240,112,138,.12);color:var(--danger);border-color:rgba(240,112,138,.3);}
.alert-warning{background:rgba(232,200,110,.12);color:var(--gold);border-color:rgba(232,200,110,.3);}
.alert-info{background:rgba(139,111,224,.12);color:#b9a7f0;border-color:rgba(139,111,224,.3);}

.text-muted{color:var(--ink-faint)!important;}

/* ── Footer ── */
.nyx-footer{background:rgba(12,12,26,.6);border-top:1px solid var(--line);padding:1.8rem 0;margin-top:2.5rem;}
.nyx-footer .nyx-logo{filter:drop-shadow(0 0 8px rgba(232,200,110,.7));}

/* ── Stat strip ── */
.stat-strip{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:1.2rem;}
.stat-pill{background:var(--surface);border:1px solid var(--line);border-radius:50px;padding:.35rem 1.05rem;font-size:.85rem;color:var(--ink-soft);}
.stat-pill strong{color:var(--gold);}
.nyx-online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:.45rem;vertical-align:middle;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:nyx-online-pulse 2s ease-out infinite;}
@keyframes nyx-online-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55);}70%{box-shadow:0 0 0 7px rgba(74,222,128,0);}100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}}
@media (prefers-reduced-motion:reduce){.nyx-online-dot{animation:none;}}

/* ── Site stats card (landing page) ──────────────────────────────────── */
.nyx-coin-stats{display:flex;flex-wrap:wrap;gap:.5rem;}
.ncst-item{
  display:flex;align-items:center;gap:.4rem;
  background:var(--surface-2,rgba(255,255,255,.04));border:1px solid var(--line);
  border-radius:10px;padding:.35rem .6rem;font-size:.78rem;color:var(--ink-soft);
}
.ncst-item img{width:20px;height:20px;object-fit:contain;}
.ncst-item strong{color:var(--gold);font-family:'JetBrains Mono',monospace;font-weight:600;}

/* ── Compact "contest is live" pill (faucet claim pages) ─────────────── */
.nyx-contest-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,rgba(232,200,110,.14),rgba(139,111,224,.14));
  border:1px solid var(--gold-dark);border-radius:50px;
  padding:.3rem .85rem;margin-bottom:.9rem;
  font-size:.78rem;color:var(--ink-soft);text-decoration:none;
  transition:transform .15s,border-color .15s;
}
.nyx-contest-pill:hover{color:var(--ink);transform:translateY(-1px);border-color:var(--gold);}
.nyx-contest-pill strong{color:var(--gold);font-family:'Cinzel',serif;}
.nyx-contest-pill .ncp-timer{font-family:'JetBrains Mono',monospace;color:var(--violet);}

/* ── Admin ── */
.admin-wrap{max-width:1000px;margin:0 auto;}
table.nyx-table{width:100%;border-collapse:collapse;font-size:.9rem;}
table.nyx-table th,table.nyx-table td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;}
table.nyx-table th{color:var(--ink-soft);font-family:'Cinzel',serif;font-size:.8rem;text-transform:uppercase;letter-spacing:1px;}
/* Scrollable table body with a header that stays put while paging through it */
.nyx-table-scroll{max-height:70vh;overflow-y:auto;overflow-x:auto;}
.nyx-table-scroll table.nyx-table thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;}

/* ── Ad slots + 3-column shell ───────────────────────────────────────────── */
.nyx-ad-wrap{width:100%;display:flex;justify-content:center;padding:14px 8px 4px;overflow-x:auto;}
.nyx-ad-wrap-bottom{padding:18px 8px 4px;}
/* Raw admin-pasted ad code (Admin -> Ads) is often a network's own
   <iframe width="728">/<img>/<ins> with a fixed pixel width. ad_slot()
   (includes/helpers.php) drops this straight into a bare .nyx-ad wherever
   it's called — some call sites (ad_mid_content, ad_home_banner,
   ad_home_row*_728) sit directly in the page container with no
   .nyx-ad-wrap/.card-nyx around them to contain it, so on a phone narrower
   than the creative's width it pushed the WHOLE PAGE sideways (the
   pinch-zoom-out-to-see-the-site bug). Contain every .nyx-ad at the
   source instead of relying on an ancestor: overflow:hidden + max-width
   traps it to its own box, and contain:layout paint also stops any ad
   code that self-styles with position:fixed from breaking out over the
   page (same fix PlayNXC's own .nxc-ad already uses in
   assets/css/theme.css). max-width alone can't beat an inline width=
   attribute, hence the descendant !important overrides. */
.nyx-ad{display:block;text-align:center;margin:0 auto;max-width:100%;overflow:hidden;position:relative;contain:layout paint;}
.nyx-ad iframe,.nyx-ad img,.nyx-ad ins,.nyx-ad embed,.nyx-ad object,
.nyx-ad a,.nyx-ad div,.nyx-ad table{max-width:100% !important;}
.nyx-ad-lbl{display:block;font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:3px;}
.nyx-ad-body{display:inline-block;line-height:0;max-width:100%;}
.nyx-ad-rail .nyx-ad-body{min-height:250px;}
.nyx-ad-box{display:block;}                     /* 300x250 stacked on its own row, e.g. inside the claim card */
/* in-card ad slots (claim card on the faucet + post-captcha pages) */
.card-nyx .nyx-ad{margin:12px 0;}
.card-nyx .nyx-ad-box .nyx-ad-body{min-height:250px;}

/* ── Admin settings tabs ─────────────────────────────────────────────────── */
.nyx-set-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.nyx-set-pane[hidden]{display:none !important;}

.nyx-shell{
  display:flex;gap:22px;align-items:flex-start;justify-content:center;
  max-width:1440px;margin:0 auto;padding:0 12px;
}
.nyx-main{flex:1 1 auto;min-width:0;max-width:960px;}
.nyx-rail{flex:0 0 300px;width:300px;position:sticky;top:84px;padding-top:18px;}
.nyx-rail.is-empty{display:none;}

.nyx-recent{margin:0 auto;}
.nyx-recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
@media(max-width:560px){ .nyx-recent-grid{grid-template-columns:1fr;} }

/* Below ~1180px there isn't room for 300 + content + 300 side by side —
   stack them instead of hiding the rails. Ads stay visible on mobile,
   they just move above/below the content rather than sitting beside it. */
@media(max-width:1180px){
  .nyx-shell{flex-direction:column;gap:14px;padding:0 12px;}
  .nyx-rail{position:static;width:100%;flex:none;padding-top:0;
    display:flex;justify-content:center;}
  .nyx-rail.is-empty{display:none;}
  .nyx-main{max-width:100%;margin:0;width:100%;}
}

/* ── Compact "How it works" — reveal on hover / focus ──────────────────── */
.howto{position:relative;display:inline-block;margin-left:.5rem;cursor:help;
  color:var(--violet);border-bottom:1px dotted var(--violet);white-space:nowrap;}
.howto:focus{outline:none;}
.howto-pop{
  position:absolute;left:0;top:calc(100% + 8px);z-index:40;
  width:min(300px,80vw);padding:12px 14px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line);box-shadow:var(--shadow);
  color:var(--ink-soft);font-size:.8rem;line-height:1.5;white-space:normal;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:.14s;
}
.howto-pop b{display:inline-block;width:16px;height:16px;line-height:16px;text-align:center;
  border-radius:50%;background:var(--violet);color:#fff;font-size:.7rem;}
.howto:hover .howto-pop,.howto:focus .howto-pop,.howto:focus-within .howto-pop{
  opacity:1;visibility:visible;transform:translateY(0);
}

@media(max-width:576px){
  .nyx-hero{padding:1.4rem 0 1.8rem;}
  .nyx-hero h1{font-size:1.7rem}
  .nyx-hero p{font-size:.95rem;}
  /* fixed 3-up: 1fr shrinks freely so it can never overflow a narrow
     viewport (minmax(104px,…) could, which forced a pinch-zoom). */
  .faucet-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  .faucet-card{padding:14px 6px;min-width:0;}
  .faucet-card img{width:36px;height:36px;}
  .faucet-card .coin{font-size:.95rem;}
  .faucet-card .rate{font-size:.72rem;word-break:break-word;}
  .card-nyx.p-4{padding:1.1rem !important;}
  .claim-amount{font-size:1.7rem;}
  .big-timer{font-size:1.9rem;}
  .container{padding-left:12px;padding-right:12px;}
  table.nyx-table{font-size:.78rem;}
  table.nyx-table th,table.nyx-table td{padding:.45rem .5rem;}
  .admin-wrap .row.g-2 > div{margin-bottom:.4rem;}
}

/* ── Referral box ─────────────────────────────────────────────────────── */
.nyx-refbox h5{font-family:'Cinzel',serif;color:var(--gold);}
.mono{font-family:'JetBrains Mono',monospace;font-size:.85rem;}

/* ── Verification spinner (pages/captcha-return.php) ─────────────────── */
.nyx-spinner{
  width:44px;height:44px;margin:0 auto;border:4px solid var(--line);
  border-top-color:var(--gold);border-radius:50%;animation:nyx-spin .8s linear infinite;
}
@keyframes nyx-spin{to{transform:rotate(360deg);}}

/* ── PTC — one horizontally-scrollable row of task cards per provider ── */
.nyx-ptc-wrap{position:relative;}
.nyx-ptc-row{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;cursor:grab;scrollbar-width:auto;scrollbar-color:var(--gold-dark) var(--surface-2);
}
.nyx-ptc-row.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none;}
.nyx-ptc-card{
  position:relative;flex:0 0 190px;scroll-snap-align:start;display:block;color:var(--ink);
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius-sm,12px);
  padding:14px;transition:.15s;
}
.nyx-ptc-card:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--ink);}
.nyx-ptc-row.is-dragging .nyx-ptc-card:hover{transform:none;border-color:var(--line);}
.nyx-ptc-card img{width:40px;height:40px;border-radius:8px;object-fit:cover;margin-bottom:8px;}
.nyx-ptc-title{font-weight:700;font-size:.9rem;line-height:1.25;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.nyx-ptc-desc{color:var(--ink-faint);font-size:.75rem;line-height:1.3;margin-bottom:8px;}
.nyx-ptc-reward{color:var(--gold);font-weight:800;font-size:.95rem;}
.nyx-ptc-meta{color:var(--ink-faint);font-size:.7rem;margin-top:2px;}
/* chunkier, always-visible scrollbar so the row is easy to grab on desktop */
.nyx-ptc-row::-webkit-scrollbar{height:10px;}
.nyx-ptc-row::-webkit-scrollbar-track{background:var(--surface-2);border-radius:5px;}
.nyx-ptc-row::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:5px;border:2px solid var(--surface-2);}
.nyx-ptc-row::-webkit-scrollbar-thumb:hover{background:var(--gold);}

/* ‹ › paddles — shown on hover-capable pointers only, JS toggles [hidden] at the ends */
.nyx-ptc-nav{
  position:absolute;top:calc(50% - 22px);z-index:3;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;line-height:1;
  background:var(--surface);color:var(--gold);border:1px solid var(--line);
  box-shadow:var(--shadow);cursor:pointer;transition:.15s;padding:0;
}
.nyx-ptc-nav:hover{background:var(--surface-2);border-color:var(--gold);transform:scale(1.08);}
.nyx-ptc-nav.prev{left:-6px;}
.nyx-ptc-nav.next{right:-6px;}
@media(hover:none){ .nyx-ptc-nav{display:none;} }

/* pending / done badge on a card the user just clicked */
.nyx-ptc-badge{
  position:absolute;top:8px;right:8px;z-index:2;font-size:.66rem;font-weight:800;
  padding:3px 8px;border-radius:999px;letter-spacing:.3px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);
}
.nyx-ptc-badge.pending{color:var(--gold);border-color:var(--gold-dark);animation:nyx-badge-pulse 1.6s ease-in-out infinite;}
.nyx-ptc-badge.done{color:var(--good);border-color:var(--good);}
.nyx-ptc-badge.stale{color:var(--ink-faint);}
.nyx-ptc-card.is-done{opacity:.62;}
.nyx-ptc-card.is-done .nyx-ptc-title{text-decoration:line-through;text-decoration-color:var(--ink-faint);}
@keyframes nyx-badge-pulse{0%,100%{opacity:1;}50%{opacity:.45;}}

/* sound toggle on the balance card */
.nyx-snd-btn{
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  border-radius:999px;padding:2px 10px;font-size:.78rem;cursor:pointer;transition:.15s;
}
.nyx-snd-btn:hover{border-color:var(--gold);color:var(--gold);}

/* pay toasts — top-right stack, clear of the sticky navbar */
.nyx-toast-wrap{
  position:fixed;right:16px;top:72px;z-index:1080;display:flex;flex-direction:column;
  gap:10px;max-width:min(340px,calc(100vw - 32px));pointer-events:none;
}
.nyx-toast{
  pointer-events:auto;background:var(--surface);border:1px solid var(--gold-dark);
  border-left:4px solid var(--gold);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);
  display:flex;gap:10px;align-items:flex-start;animation:nyx-toast-in .35s cubic-bezier(.2,.8,.2,1);
}
.nyx-toast.out{animation:nyx-toast-out .3s ease forwards;}
.nyx-toast.reverse{border-color:var(--danger);border-left-color:var(--danger);}
.nyx-toast .ic{font-size:1.3rem;line-height:1.2;}
.nyx-toast .tt{font-weight:800;font-size:.9rem;color:var(--ink);}
.nyx-toast .sb{font-size:.76rem;color:var(--ink-faint);margin-top:1px;}
@keyframes nyx-toast-in{from{transform:translateX(120%);opacity:0;}to{transform:translateX(0);opacity:1;}}
@keyframes nyx-toast-out{to{transform:translateX(120%);opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .nyx-toast,.nyx-toast.out{animation:none;}
  .nyx-ptc-badge.pending{animation:none;}
  .nyx-ptc-row{scroll-behavior:auto;}
}

@media(max-width:576px){
  .nyx-ptc-card{flex-basis:150px;padding:10px;}
}

/* ── Claim strip (templates/claim-strip.php, faucet claim pages only) ─── */
.nyx-claim-strip{
  position:relative;z-index:1;background:rgba(12,12,26,.6);
  border-bottom:1px solid var(--line);
}
.nyx-claim-strip .ncs-track{
  /* One centred row when everything fits; on a narrow screen it WRAPS to as
     many rows as needed rather than squeezing every coin down to an
     unreadable sliver (the old flex:1 1 0 / overflow:hidden behaviour). */
  display:flex;flex-wrap:wrap;gap:.4rem;padding:.55rem 12px;
  justify-content:center;
}
.ncs-item{
  flex:0 1 64px;min-width:58px;max-width:84px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.3rem .2rem;border-radius:12px;
  border:1px solid transparent;color:var(--ink-soft);text-decoration:none;
  transition:transform .15s,border-color .15s;
}
.ncs-item:hover{color:var(--ink);transform:translateY(-1px);}
.ncs-item img{width:100%;max-width:40px;height:auto;aspect-ratio:1/1;object-fit:contain;transition:filter .2s;}
.ncs-item .ncs-name{font-size:.6rem;text-transform:uppercase;letter-spacing:.5px;line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ncs-item .ncs-timer{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--gold);line-height:1;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ncs-item.is-ready{border-color:var(--gold-dark);box-shadow:var(--glow-gold);animation:ncsPulse 2.4s ease-in-out infinite;}
.ncs-item.is-ready .ncs-name{color:var(--gold);}
.ncs-item.is-wait img{filter:grayscale(.7) opacity(.5);}
/* Reserve health — thin bar under the icon, filled to reserve_status()'s pct. */
.ncs-health{display:block;width:28px;height:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;margin-top:1px;}
.ncs-health-fill{display:block;height:100%;background:var(--good);border-radius:2px;}
/* Empty — FaucetPay balance can't cover a payout right now. */
.ncs-item.is-empty{border-color:rgba(240,112,138,.35);}
.ncs-item.is-empty img{filter:grayscale(1) opacity(.35);}
.ncs-item.is-empty .ncs-name{color:var(--danger);}
.ncs-item .ncs-empty{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--danger);line-height:1;}
@keyframes ncsPulse{0%,100%{box-shadow:0 0 0 rgba(232,200,110,0);}50%{box-shadow:var(--glow-gold);}}
@media(min-width:992px){
  .ncs-item img{max-width:46px;}
}
@media(max-width:576px){
  .ncs-track{gap:.35rem;padding:.5rem 8px;}
  .ncs-item{flex-basis:56px;min-width:52px;max-width:72px;padding:.3rem .15rem;}
  .ncs-item img{max-width:34px;}
  .ncs-item .ncs-name{font-size:.56rem;}
  .ncs-item .ncs-timer{font-size:.62rem;}
}

/* ── Mobile bottom nav (templates/footer.php, < lg only) — playnxc-style ── */
.nyx-mnav,.nyx-msheet,.nyx-mbackdrop{display:none;}
@media(max-width:991.98px){
  html,body{overflow-x:hidden;}
  .nyx-mnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1050;height:58px;
    background:var(--surface);border-top:1px solid var(--line);
    box-shadow:0 -2px 16px rgba(0,0,0,.3);padding-bottom:env(safe-area-inset-bottom,0);
  }
  .nyx-mnav-item{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;border:0;background:none;color:var(--ink-faint);text-decoration:none;cursor:pointer;
    font:800 .58rem/1 'Nunito',sans-serif;transition:color .15s,transform .1s;
  }
  .nyx-mnav-item i{font-size:1.28rem;line-height:1;}
  .nyx-mnav-item.is-active{color:var(--gold);}
  .nyx-mnav-item:active{transform:translateY(1px);}

  .nyx-mbackdrop{
    display:block;position:fixed;inset:0;z-index:1046;background:rgba(0,0,0,.45);
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .nyx-mbackdrop.is-open{opacity:1;pointer-events:auto;}

  .nyx-msheet{
    display:block;position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0));z-index:1047;
    background:var(--surface);border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    box-shadow:0 -6px 28px rgba(0,0,0,.34);
    padding:.35rem .9rem calc(.75rem + env(safe-area-inset-bottom,0));
    max-height:70vh;overflow-y:auto;pointer-events:none;visibility:hidden;
    transform:translateY(calc(100% + 80px));
    transition:transform .24s ease, visibility 0s linear .24s;
  }
  .nyx-msheet.is-open{transform:translateY(0);pointer-events:auto;visibility:visible;transition:transform .24s ease;}
  .nyx-msheet-grip{width:38px;height:4px;border-radius:99px;background:var(--line);margin:.2rem auto .45rem;}
  .nyx-msheet a,.nyx-msheet button{
    display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem .35rem;
    border:0;background:none;color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;
    font:600 .95rem/1 'DM Sans',sans-serif;border-bottom:1px solid var(--line);
  }
  .nyx-msheet form{border-bottom:1px solid var(--line);}
  .nyx-msheet form button{border-bottom:0;}
  .nyx-msheet > a:last-child,.nyx-msheet > button:last-child{border-bottom:0;}
  .nyx-msheet i{font-size:1.05rem;color:var(--gold);width:1.5rem;text-align:center;}
  .nyx-msheet .nyx-msheet-danger,.nyx-msheet .nyx-msheet-danger i{color:var(--danger);}

  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0));}
}

/* ── Contest pages ──────────────────────────────────────────────────── */
.ct-bar{height:8px;border-radius:50px;background:var(--bg);border:1px solid var(--line);overflow:hidden;}
.ct-bar > span{display:block;height:100%;border-radius:50px;background:linear-gradient(90deg,var(--violet),var(--gold));}
.nyx-table tr.ct-you{background:rgba(139,111,224,.14);}
.nyx-table tr.ct-you td{color:var(--ink);}