/* ============================================================
   LOOPIN 777 - shared brand pieces (app, admin, static pages)
   - animated logo: chrome wordmark -> slot reels land on 7-7-7 -> coin drop
   - header casino ambience: marquee lights, coins, slot machines, dice, chip
   - ambient background rings
   - vault emblem base rules (partials/vault-emblem.ejs) for non-auth pages
   ============================================================ */
:root {
    --font-display: 'Orbitron', 'Segoe UI', system-ui, sans-serif;
    --gold: #f5c542;
    --gold-light: #fff6c4;
    --gold-dark: #8a6508;
    --neon-blue: #3fb0ff;
    --neon-blue-2: #8be4ff;
    --neon-mag: #ff3fc6;
}

/* ============================================================
   ANIMATED LOGO  (.nl = neon logo) - 12 second loop
   0-4s   chrome "LOOPIN 777"
   4-8s   "777" becomes three slot reels that spin and land on 7 7 7
   8-10s  gold coins drop across the wordmark
   ============================================================ */
.nl {
    display: inline-flex; align-items: baseline; gap: 0.34em; position: relative;
    font-family: var(--font-display); font-weight: 900; font-size: 21px; line-height: 1; letter-spacing: 0.04em;
    text-decoration: none; white-space: nowrap; user-select: none; color: #fff;
}
.nl-word, .nl-777 {
    display: inline-block; transform: skewX(-8deg);
    background: linear-gradient(180deg, #fff 0%, #ffe3f4 22%, #cfd6e4 46%, #fff 53%, #9aa6bd 78%, #e6ebf4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(1px 1.5px 0 #0a0d18) drop-shadow(0 0 8px rgba(140, 200, 255, 0.45));
}
.nl-slot { position: relative; display: inline-block; }
.nl-777 { animation: nl777 12s linear infinite; }
.nl-reels {
    position: absolute; left: -2px; right: -2px; top: 50%; height: 18px; margin-top: -10px;
    display: flex; gap: 2px; justify-content: center; align-items: center; opacity: 0;
    animation: nlReels 12s linear infinite, nlFlash 12s linear infinite;
}
.nl-reel {
    width: 13px; height: 18px; overflow: hidden; border-radius: 3px; position: relative; flex-shrink: 0;
    background: #070b16; border: 1px solid rgba(139, 228, 255, 0.6);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9), 0 0 6px rgba(63, 176, 255, 0.35);
}
.nl-reel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 35%, transparent 65%, rgba(0, 0, 0, 0.6));
}
.nl-strip { display: block; will-change: transform; animation: nlSpin1 12s infinite; }
.nl-reel:nth-child(2) .nl-strip { animation-name: nlSpin2; }
.nl-reel:nth-child(3) .nl-strip { animation-name: nlSpin3; }
.nl-strip i {
    display: flex; align-items: center; justify-content: center; height: 18px; font-style: normal;
    font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0; line-height: 1;
    color: var(--gold); text-shadow: 0 0 4px rgba(245, 197, 66, 0.7);
}
.nl-strip i.s7 { color: var(--neon-mag); text-shadow: 0 0 5px rgba(255, 63, 198, 0.85); font-size: 11px; }
.nl-strip i.sd { color: var(--neon-blue); text-shadow: 0 0 4px rgba(63, 176, 255, 0.8); }
.nl-strip i.ss { color: #34d399; text-shadow: 0 0 4px rgba(52, 211, 153, 0.8); }
.nl-strip i.sb { color: #fff; font-size: 5.5px; letter-spacing: 0.3px; text-shadow: none; }
.nl-coins { position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; pointer-events: none; }
.nl-coins i {
    position: absolute; top: 0; width: 9px; height: 9px; border-radius: 50%; opacity: 0;
    background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 40%, #c9971a 75%, var(--gold-dark) 100%);
    box-shadow: 0 0 5px rgba(245, 197, 66, 0.85), inset 0 0 2px rgba(255, 255, 255, 0.7);
    animation: nlCoin 12s linear infinite;
}
.nl-coins i:nth-child(1) { left: 4%;  animation-delay: 0s; }
.nl-coins i:nth-child(2) { left: 22%; animation-delay: -0.35s; width: 7px; height: 7px; }
.nl-coins i:nth-child(3) { left: 41%; animation-delay: -0.7s; }
.nl-coins i:nth-child(4) { left: 58%; animation-delay: -0.15s; width: 8px; height: 8px; }
.nl-coins i:nth-child(5) { left: 76%; animation-delay: -0.55s; }
.nl-coins i:nth-child(6) { left: 92%; animation-delay: -0.9s; width: 6px; height: 6px; }
.nl-coins i:nth-child(7) { left: 50%; animation-delay: -1.1s; width: 6px; height: 6px; }
@keyframes nl777   { 0%, 33% { opacity: 1; } 36%, 63% { opacity: 0; } 66%, 100% { opacity: 1; } }
@keyframes nlReels { 0%, 33% { opacity: 0; } 36%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes nlFlash { 0%, 57% { filter: none; } 59% { filter: brightness(1.9) drop-shadow(0 0 6px #fff); } 62%, 100% { filter: none; } }
@keyframes nlSpin1 { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 50%, 100% { transform: translateY(-162px); } }
@keyframes nlSpin2 { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 54%, 100% { transform: translateY(-162px); } }
@keyframes nlSpin3 { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 58%, 100% { transform: translateY(-162px); } }
@keyframes nlCoin {
    0%, 66% { opacity: 0; transform: translateY(-6px) rotateY(0deg); }
    68%     { opacity: 1; }
    80%     { opacity: 1; transform: translateY(36px) rotateY(720deg); }
    82%, 100% { opacity: 0; transform: translateY(42px) rotateY(720deg); }
}
.nl.nl-sm { font-size: 17px; }
.nl.nl-sm .nl-reels { height: 15px; margin-top: -8px; }
.nl.nl-sm .nl-reel { width: 11px; height: 15px; }
.nl.nl-sm .nl-strip i { height: 15px; font-size: 8.5px; }
.nl.nl-sm .nl-strip i.s7 { font-size: 9.5px; }
.nl.nl-sm .nl-strip { animation-name: nlSpin1s; }
.nl.nl-sm .nl-reel:nth-child(2) .nl-strip { animation-name: nlSpin2s; }
.nl.nl-sm .nl-reel:nth-child(3) .nl-strip { animation-name: nlSpin3s; }
@keyframes nlSpin1s { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 50%, 100% { transform: translateY(-135px); } }
@keyframes nlSpin2s { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 54%, 100% { transform: translateY(-135px); } }
@keyframes nlSpin3s { 0%, 36% { transform: translateY(0); animation-timing-function: cubic-bezier(0.12, 0.8, 0.25, 1.06); } 58%, 100% { transform: translateY(-135px); } }

/* ============================================================
   HEADER CASINO AMBIENCE  (inside .top-navbar / .admin-topbar)
   ============================================================ */
.nav-casino { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.nav-neonline {
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #3fb0ff 22%, #8be4ff 50%, #ff3fc6 78%, transparent);
    box-shadow: 0 0 12px rgba(63, 176, 255, 0.55); opacity: 0.9;
}
.cas { position: absolute; top: 50%; opacity: 0.55; animation: casBob 5.5s ease-in-out infinite; }
.cas-coin {
    width: 16px; height: 16px; border-radius: 50%; position: relative;
    background: radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 40%, #c9971a 75%, var(--gold-dark) 100%);
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.6), inset 0 0 3px rgba(255, 255, 255, 0.6);
    animation: coinSpin 3.4s linear infinite;
}
.cas-coin::after {
    content: '$'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 9px; color: #7a5a05;
}
.cas-coin.sm { width: 11px; height: 11px; animation-duration: 2.6s; }
.cas-coin.sm::after { font-size: 6px; }
@keyframes coinSpin { to { transform: rotateY(360deg); } }
@keyframes casBob { 0%, 100% { transform: translateY(-50%) translateY(-3px); } 50% { transform: translateY(-50%) translateY(3px); } }
.cas-dice {
    width: 14px; height: 14px; border-radius: 3px; background-color: #fff;
    background-image:
        radial-gradient(circle at 28% 28%, #14203f 1.4px, transparent 1.9px),
        radial-gradient(circle at 72% 72%, #14203f 1.4px, transparent 1.9px),
        radial-gradient(circle at 72% 28%, #14203f 1.4px, transparent 1.9px),
        radial-gradient(circle at 28% 72%, #14203f 1.4px, transparent 1.9px),
        radial-gradient(circle at 50% 50%, #14203f 1.4px, transparent 1.9px);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.35); animation: diceSpin 7s linear infinite;
}
@keyframes diceSpin { to { transform: rotate(360deg); } }
.cas-chip {
    width: 16px; height: 16px; border-radius: 50%; background: var(--neon-mag); border: 3px dashed #fff; position: relative;
    box-shadow: 0 0 8px rgba(255, 63, 198, 0.6); animation: diceSpin 9s linear infinite reverse;
}
.cas-chip::after { content: ''; position: absolute; inset: 1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); }
.cas-slot { width: 44px; height: 30px; overflow: visible; }
.cas-slot .w7 { font-family: var(--font-display); font-weight: 900; font-size: 8px; animation: slotFlick 0.55s steps(2) infinite; }
.cas-slot .w7.b { animation-delay: -0.18s; }
.cas-slot .w7.c { animation-delay: -0.36s; }
@keyframes slotFlick { 0% { fill: #ff3fc6; opacity: 1; } 50% { fill: #f5c542; opacity: 0.55; } 100% { fill: #8be4ff; opacity: 1; } }
.cas-slot .lamp { animation: lampBlink 1.1s ease-in-out infinite; }
@keyframes lampBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* placement (percent of the header width, in the gaps beside the centre menu) */
.cas.p1 { left: 19%; } .cas.p2 { left: 23.5%; } .cas.p3 { left: 27.5%; } .cas.p4 { left: 31%; }
.cas.p5 { left: 66%; } .cas.p6 { left: 70%; } .cas.p7 { left: 73.5%; } .cas.p8 { left: 77%; }
.cas.p2, .cas.p6 { animation-delay: -1.2s; } .cas.p3, .cas.p7 { animation-delay: -2.6s; } .cas.p4, .cas.p8 { animation-delay: -3.9s; }
/* Round 24: five tabs (Home, Add Friends, Reels, Messenger, Profile) - the two decorations next to the menu
   are gone and the menu paints the header background, so nothing ever sits on top of a label */
.cas.p4, .cas.p5 { display: none; }
@media (min-width: 769px) {
    .top-navbar > .nav-menu { align-self: start; height: calc(100% - 3px); padding: 0 12px; background: linear-gradient(180deg, #080e22 0%, var(--navbg) 100%); }
}
@media (max-width: 1180px) { .cas.p4, .cas.p8, .cas.p1 { display: none; } }
@media (max-width: 1000px) { .cas.p2, .cas.p3, .cas.p5 { display: none; } }
@media (max-width: 768px) { .cas { display: none; } }

/* ============================================================
   AMBIENT BACKGROUND RINGS (all app / admin pages)
   ============================================================ */
.bg-rings { position: fixed; width: 120vmax; height: 120vmax; left: -34vmax; top: -44vmax; opacity: 0.22; pointer-events: none; z-index: -1; }
.bg-rings svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; will-change: transform; }
.bg-rings .r1 { animation: ringSpin 220s linear infinite; }
.bg-rings .r2 { animation: ringSpin 300s linear infinite reverse; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
[data-theme="light"] .bg-rings { opacity: 0.07; }

/* ============================================================
   VAULT EMBLEM BASE (for pages that are not the login page)
   ============================================================ */
.emblem-box { position: relative; aspect-ratio: 1 / 1; }
.emblem-box .vault { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.vault-inner { position: absolute; inset: 0; transform-origin: 50% 50%; }
.vl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vl-ring { will-change: transform; transform-origin: 50% 50%; }
.vl-disc { filter: drop-shadow(0 0 24px rgba(0, 0, 0, 0.85)); }
.ring-a { animation: vSpin 38s linear infinite; }
.ring-b { animation: vSpinR 64s linear infinite; filter: drop-shadow(0 0 6px rgba(120, 230, 255, 0.55)); }
.ring-c { animation: vSpin 52s linear infinite; filter: drop-shadow(0 0 5px #ff3fc6) drop-shadow(0 0 14px rgba(255, 63, 198, 0.55)); }
.ring-d { animation: vSpinR 76s linear infinite; filter: drop-shadow(0 0 5px rgba(111, 212, 255, 0.9)) drop-shadow(0 0 12px rgba(63, 176, 255, 0.5)); }
.ring-e { animation: vSpin 96s linear infinite; filter: drop-shadow(0 0 6px #5cc8ff) drop-shadow(0 0 18px rgba(63, 176, 255, 0.75)); }
.ring-f { animation: vSpinR 120s linear infinite; }
.vl-mark { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 20px rgba(160, 200, 255, 0.28)); }
@keyframes vSpin { to { transform: rotate(360deg); } }
@keyframes vSpinR { to { transform: rotate(-360deg); } }

/* phone header: the logo shrinks to 17px, reels follow */
@media (max-width: 768px) {
    .top-navbar .nl-reels { height: 15px; margin-top: -8px; }
    .top-navbar .nl-reel { width: 11px; height: 15px; }
    .top-navbar .nl-strip i { height: 15px; font-size: 8.5px; }
    .top-navbar .nl-strip i.s7 { font-size: 9.5px; }
    .top-navbar .nl-strip { animation-name: nlSpin1s; }
    .top-navbar .nl-reel:nth-child(2) .nl-strip { animation-name: nlSpin2s; }
    .top-navbar .nl-reel:nth-child(3) .nl-strip { animation-name: nlSpin3s; }
}

@media (prefers-reduced-motion: reduce) {
    .nl-reels, .nl-coins, .nav-casino .cas { display: none !important; }
    .nl-777, .bg-rings svg, .vl-ring { animation: none !important; }
}