<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="description" content="Sign in to your TryGames account and start earning real money." />
  <meta name="theme-color" content="#0b0d1c" />
  <title>Login | TryGames - Play Games & Earn Cash</title>

  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=Press+Start+2P&display=swap" rel="stylesheet" />

  <!-- Icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <link rel="icon" type="image/png" sizes="32x32" href="img/logo.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/logo.png">
<link rel="apple-touch-icon" href="img/logo.png">
<link rel="shortcut icon" href="img/logo.png">

  <style>
    :root {
      --teal-700: #0a6e63;
      --teal-600: #00c2a8;
      --teal-500: #00e6d8;
      --violet-600: #7c3aed;
      --violet-500: #8b5cf6;
      --gold: #ffc23c;
      --ink: #eef1fb;
      --ink-soft: #a7b0cc;
      --paper: #05060f;
      --card: rgba(13, 16, 32, 0.66);
      --line: rgba(255,255,255,0.10);
      --line-bright: rgba(255,255,255,0.2);
      --radius-lg: 26px;
      --radius-md: 14px;
      --shadow-soft: 0 30px 80px -20px rgba(0,0,0,0.7);
      --ease: cubic-bezier(.4,0,.2,1);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--paper);
      color: var(--ink);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .display { font-family: 'Space Grotesk', sans-serif; }
    .arcade { font-family: 'Press Start 2P', 'JetBrains Mono', monospace; }

    @media (prefers-reduced-motion: reduce) {
      *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    }

    /* ============ BACKGROUND VIDEO ============ */
    .bg-video { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
    .bg-video video {
      position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
      filter: saturate(1.15) contrast(1.05) brightness(0.5);
      transform: scale(1);
      animation: kenburns 26s ease-in-out infinite alternate;
    }
    @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

    .bg-video-poster {
      position: absolute; inset: 0;
      background: linear-gradient(160deg, #0a6e63 0%, #0b0d1c 55%, #1a0b18 100%);
      background-size: 220% 220%;
      animation: poster-shift 9s ease-in-out infinite;
    }
    @keyframes poster-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

    .bg-overlay {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        linear-gradient(180deg, rgba(4,5,13,0.6) 0%, rgba(4,5,13,0.78) 50%, rgba(4,5,13,0.94) 100%),
        radial-gradient(760px 560px at 50% -10%, rgba(0,230,216,0.30), transparent 62%),
        radial-gradient(560px 480px at 92% 100%, rgba(139,92,246,0.22), transparent 60%);
    }

    .bg-grid {
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
      background-size: 44px 44px;
      -webkit-mask-image: radial-gradient(ellipse 1000px 700px at 50% 25%, #000 0%, transparent 75%);
      mask-image: radial-gradient(ellipse 1000px 700px at 50% 25%, #000 0%, transparent 75%);
    }

    /* ============ SCANLINES (arcade CRT texture, very subtle) ============ */
    .bg-scanlines {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
      background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px);
      mix-blend-mode: overlay;
    }

    .bg-video-toggle {
      position: fixed; right: 20px; bottom: 20px; z-index: 40;
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(6,7,17,0.7);
      border: 1px solid var(--line-bright);
      backdrop-filter: blur(8px);
      color: var(--ink); font-size: 13px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease, color .2s ease;
    }
    .bg-video-toggle:hover { border-color: var(--teal-500); color: var(--teal-500); transform: translateY(-2px); }

    .float-motif {
      position: fixed; z-index: 0; pointer-events: none;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      backdrop-filter: blur(2px);
      color: rgba(255,255,255,0.55);
      animation: drift 10s var(--ease) infinite;
    }
    .float-motif.m1 { width: 58px; height: 40px; top: 10%; left: 8%; animation-delay: 0s; font-size: 16px; }
    .float-motif.m2 { width: 42px; height: 30px; top: 70%; left: 6%; animation-delay: 1.6s; font-size: 13px; }
    .float-motif.m3 { width: 66px; height: 46px; top: 16%; right: 8%; animation-delay: 2.8s; font-size: 18px; }
    .float-motif.m4 { width: 38px; height: 26px; bottom: 12%; right: 10%; animation-delay: .9s; font-size: 12px; }
    @keyframes drift {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-14px) rotate(3deg); }
    }
    @media (max-width: 860px) { .float-motif { display: none; } }
    @media (prefers-reduced-motion: reduce) { .float-motif { animation: none; } }

    /* ============ SHELL ============ */
    .shell {
      position: relative; z-index: 1; min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 32px 20px;
    }
    .stage { width: 100%; max-width: 440px; }

    /* ============ CARD ============ */
    .card {
      position: relative;
      background: var(--card);
      backdrop-filter: blur(26px) saturate(150%);
      -webkit-backdrop-filter: blur(26px) saturate(150%);
      border-radius: var(--radius-lg);
      border: 1px solid var(--line-bright);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      animation: rise .6s var(--ease);
      padding: 38px 34px 30px;
    }
    .card::before {
      content: "";
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--teal-500), var(--gold), var(--violet-500));
      background-size: 200% 100%;
      animation: shimmer 5s linear infinite;
      z-index: 2;
    }
    @keyframes shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

    /* ---- cursor-tracked spotlight glow (sits under text, over card bg) ---- */
    .card-spotlight {
      position: absolute; inset: 0; z-index: -1; pointer-events: none;
      opacity: 0; transition: opacity .35s ease;
      background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(0,230,216,0.20), rgba(139,92,246,0.10) 45%, transparent 70%);
    }
    .card:hover .card-spotlight { opacity: 1; }

    /* ---- HUD corner brackets, arcade-console framing ---- */
    .hud-corner { position: absolute; width: 20px; height: 20px; z-index: 2; pointer-events: none; opacity: .55; animation: hud-pulse 2.6s ease-in-out infinite; }
    .hud-corner.tl { top: 12px; left: 12px; border-top: 2px solid var(--teal-500); border-left: 2px solid var(--teal-500); border-top-left-radius: 6px; }
    .hud-corner.tr { top: 12px; right: 12px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); border-top-right-radius: 6px; animation-delay: .3s; }
    .hud-corner.bl { bottom: 12px; left: 12px; border-bottom: 2px solid var(--violet-500); border-left: 2px solid var(--violet-500); border-bottom-left-radius: 6px; animation-delay: .6s; }
    .hud-corner.br { bottom: 12px; right: 12px; border-bottom: 2px solid var(--teal-500); border-right: 2px solid var(--teal-500); border-bottom-right-radius: 6px; animation-delay: .9s; }
    @keyframes hud-pulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
    @media (prefers-reduced-motion: reduce) { .hud-corner { animation: none; opacity: .55; } }

    /* ============ CARD VIDEO (hero-video2.mp4) ============ */
    .card-video-frame {
      position: relative;
      width: calc(100% + 68px);
      margin: -38px -34px 22px;
      overflow: hidden;
      border-bottom: 1px solid var(--line-bright);
      line-height: 0;
    }
    .card-video-frame video {
      display: block;
      width: 100%;
      height: auto;
      filter: saturate(1.1) contrast(1.05) brightness(0.85);
    }
    .card-video-frame::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(5,6,15,0) 35%, var(--paper) 100%),
                  linear-gradient(180deg, rgba(5,6,15,0.15) 0%, rgba(5,6,15,0.15) 100%);
      mix-blend-mode: normal;
    }
    .card-video-frame .card-video-badge {
      position: absolute; left: 14px; bottom: 12px; z-index: 2;
      display: flex; align-items: center; gap: 7px;
      font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
      font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--ink);
      background: rgba(5,6,15,0.55);
      border: 1px solid var(--line-bright);
      padding: 6px 10px;
      border-radius: 999px;
      backdrop-filter: blur(6px);
    }
    .card-video-frame .card-video-badge i { color: var(--gold); font-size: 0.68rem; }

    @media (max-width: 600px) {
      .card-video-frame { margin: -30px -22px 20px; }
    }

    .brand-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
    .brand-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 18px; }
    .brand-mark .badge {
      width: 48px; height: 48px; border-radius: 14px; background: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 5px rgba(0,230,216,0.14), 0 8px 22px rgba(0,0,0,0.35);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .brand-mark:hover .badge { transform: translateY(-2px) rotate(-4deg); box-shadow: 0 0 0 5px rgba(0,230,216,0.22), 0 10px 26px rgba(0,0,0,0.4); }
    .brand-mark .badge img { width: 30px; height: 30px; object-fit: contain; }
    .brand-mark span { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
    .brand-mark span b { color: var(--violet-500); }

    .brand-header .eyebrow {
      font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
      font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--gold);
      display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
      line-height: 1;
    }
    .brand-header .eyebrow::before, .brand-header .eyebrow::after {
      content: ""; width: 16px; height: 1px; background: var(--gold); opacity: 0.6;
    }
    .brand-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
    .brand-header p { font-size: 0.88rem; color: var(--ink-soft); }

    .stat-chips {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
      background: var(--line); border: 1px solid var(--line); border-radius: 14px;
      overflow: hidden; margin-bottom: 16px;
    }
    .stat-chips div { background: rgba(255,255,255,0.03); padding: 12px 6px; text-align: center; animation: chip-in .5s var(--ease) both; }
    .stat-chips div:nth-child(1) { animation-delay: .05s; }
    .stat-chips div:nth-child(2) { animation-delay: .15s; }
    .stat-chips div:nth-child(3) { animation-delay: .25s; }
    @keyframes chip-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
    .stat-chips b {
      display: block; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem;
      background: linear-gradient(100deg, var(--teal-500), var(--gold));
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
    .stat-chips span {
      display: block; font-size: 0.66rem; color: var(--ink-soft);
      text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px;
    }

    /* ---- streak bar, "welcome back" flavor ---- */
    .xp-track {
      position: relative; height: 26px; border-radius: 999px; margin-bottom: 24px;
      background: rgba(255,255,255,0.05); border: 1px solid var(--line); overflow: hidden;
    }
    .xp-fill {
      position: absolute; inset: 0; width: 0%; border-radius: 999px;
      background: linear-gradient(90deg, #ff5d3d, #ff9a3c 55%, var(--gold));
      box-shadow: 0 0 12px rgba(255,93,61,.5);
      animation: xp-grow 1.2s .3s var(--ease) both, xp-glow 1.8s ease-in-out 1.5s infinite;
    }
    @keyframes xp-grow { from { width: 0%; } to { width: 62%; } }
    @keyframes xp-glow { 0%, 100% { box-shadow: 0 0 10px rgba(255,93,61,.4); } 50% { box-shadow: 0 0 20px rgba(255,93,61,.8); } }
    .xp-label {
      position: relative; z-index: 1; height: 100%; width: 100%;
      display: flex; align-items: center; justify-content: center; gap: 7px;
      padding: 0 12px;
      font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.02em;
      color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.65);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .xp-label i { color: #ffcf80; font-size: 0.7rem; flex-shrink: 0; }
    .live-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #ff3d5a;
      box-shadow: 0 0 8px rgba(255,61,90,.9); flex-shrink: 0;
      animation: live-pulse 1.4s ease-in-out infinite;
    }
    @keyframes live-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
    .live-tag {
      font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
      font-size: 0.5rem; letter-spacing: 0.03em; color: #ffe082; flex-shrink: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      .xp-fill { animation: none; width: 62%; box-shadow: 0 0 12px rgba(255,93,61,.5); }
      .live-dot { animation: none; }
    }
    @media (max-width: 420px) {
      .xp-track { height: 30px; }
      .xp-label { font-size: 0.56rem; gap: 5px; padding: 0 8px; }
      .xp-label i { font-size: 0.62rem; }
      .live-tag { font-size: 0.4rem; }
      .live-dot { width: 6px; height: 6px; }
    }

    .form-horizontal { display: flex; flex-direction: column; gap: 14px; }
    .field { position: relative; }
    .field i.leading {
      position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
      color: #7b85a8; font-size: 0.85rem; pointer-events: none;
    }
    .form-control {
      width: 100%; padding: 13px 16px 13px 40px;
      background: rgba(255,255,255,0.045);
      border: 1.5px solid var(--line); border-radius: var(--radius-md);
      color: var(--ink); font-size: 0.93rem; font-family: inherit;
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
    }
    .form-control::placeholder { color: #7b85a8; }
    .form-control:hover { border-color: var(--line-bright); }
    .form-control:focus {
      outline: none; background: rgba(255,255,255,0.07);
      border-color: var(--teal-500); box-shadow: 0 0 0 4px rgba(0,230,216,0.18);
    }
    .field.has-toggle .form-control { padding-right: 42px; }
    .field-toggle {
      position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
      width: 32px; height: 32px; border: none; background: transparent;
      color: #7b85a8; cursor: pointer; border-radius: 8px;
      display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
      transition: color .2s ease, background .2s ease;
    }
    .field-toggle:hover { color: var(--teal-500); background: rgba(255,255,255,0.06); }
    .field-toggle:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }

    .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.85rem; flex-wrap: wrap; }
    .custom-control { display: flex; align-items: center; gap: 7px; }
    .custom-control-input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--teal-600); }
    .custom-control-label { color: var(--ink-soft); cursor: pointer; margin: 0; }
    .forgot-link { color: var(--teal-500); text-decoration: none; font-weight: 600; transition: color .2s var(--ease); }
    .forgot-link:hover { color: #fff; text-decoration: underline; }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 24px; border-radius: var(--radius-md);
      font-weight: 700; font-size: 0.95rem; font-family: 'Space Grotesk', sans-serif; letter-spacing: 0.01em;
      border: none; cursor: pointer;
      transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
      width: 100%;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--violet-500), var(--violet-600));
      color: #fff; box-shadow: 0 10px 26px -8px rgba(139,92,246,0.6);
    }
    .btn-primary i { transition: transform .25s var(--ease); }
    .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
    .btn-primary:hover .fa-sign-in-alt { transform: translateX(3px); }
    .btn-primary:active { transform: translateY(0); }
    .btn-primary.is-loading { pointer-events: none; opacity: 0.85; }
    .btn-primary .fa-spinner { display: none; }
    .btn-primary.is-loading .fa-spinner { display: inline-block; animation: spin 0.7s linear infinite; }
    .btn-primary.is-loading .fa-sign-in-alt { display: none; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .alert {
      padding: 12px 14px; border-radius: var(--radius-md); margin-bottom: 16px;
      font-size: 0.87rem; display: flex; align-items: flex-start; gap: 10px;
      background: rgba(139,92,246,0.12); border: 1px solid rgba(139,92,246,0.35); color: #c9b3ff;
    }
    .alert i { margin-top: 2px; flex-shrink: 0; }

    .foot { margin-top: 24px; text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
    .foot a { color: var(--teal-500); font-weight: 600; text-decoration: none; }
    .foot a:hover { text-decoration: underline; color: #fff; }

    .divider {
      display: flex; align-items: center; gap: 10px; margin: 22px 0 18px;
      font-size: 0.7rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.1em;
    }
    .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

    .trust-row { display: flex; justify-content: center; gap: 18px; font-size: 0.72rem; color: var(--ink-soft); }
    .trust-row span { display: flex; align-items: center; gap: 6px; }
    .trust-row i { color: var(--gold); font-size: 0.8rem; }

    @media (max-width: 600px) {
      .shell { padding: 20px 16px; min-height: 100vh; min-height: 100dvh; }
      .stage { max-width: 100%; }
      .card { padding: 30px 22px 26px; border-radius: 20px; }
    }

    /* ============ MOBILE SCROLL PERFORMANCE ============
       Three `position:fixed` full-viewport layers (bg-video, bg-overlay,
       bg-grid) sitting under a 26px-blur glass card is the classic setup
       for scroll jank on phones: many mobile browsers repaint fixed,
       filtered layers on every scroll frame instead of compositing them
       once. Since this page never scrolls past one viewport-height card
       anyway, switching those layers to `absolute` costs nothing visually
       and removes the repaint trigger entirely. */
    @media (max-width: 768px) {
      .bg-video, .bg-overlay, .bg-grid { position: absolute; }
      html, body { position: relative; height: 100%; }
      .bg-video video { animation: none; transform: scale(1); }
      .bg-scanlines { display: none; }
      .bg-video-toggle { backdrop-filter: blur(4px); }
      /* A 26px blur recalculated behind a video is expensive on phone
         GPUs; 14px reads almost identically but is much cheaper. */
      .card { backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
    }
  </style>
</head>

<body>

  <div class="bg-video">
    <div class="bg-video-poster"></div>
    <video id="bg-video" autoplay muted loop playsinline preload="auto">
      <source src="hero-video.mp4" type="video/mp4">
    </video>
  </div>
  <div class="bg-overlay"></div>
  <div class="bg-grid"></div>
  <div class="bg-scanlines"></div>

  <div class="float-motif m1"><i class="fas fa-dollar-sign"></i></div>
  <div class="float-motif m2"><i class="fas fa-dollar-sign"></i></div>
  <div class="float-motif m3"><i class="fas fa-dollar-sign"></i></div>
  <div class="float-motif m4"><i class="fas fa-dollar-sign"></i></div>

  <button class="bg-video-toggle" id="bg-toggle" aria-label="Pause background video" aria-pressed="false">
    <i class="fas fa-pause" id="bg-toggle-icon"></i>
  </button>

  <div class="shell">
    <div class="stage">
      <div class="card" id="loginCard">
        <span class="hud-corner tl"></span>
        <span class="hud-corner tr"></span>
        <span class="hud-corner bl"></span>
        <span class="hud-corner br"></span>
        <div class="card-spotlight"></div>

        <div class="card-video-frame">
          <video id="card-video" autoplay muted loop playsinline preload="auto">
            <source src="hero-video2.mp4" type="video/mp4">
          </video>
          <span class="card-video-badge"><i class="fas fa-circle-play"></i> Live gameplay</span>
        </div>

        <div class="brand-header">
          <a href="/" class="brand-mark">
            <span class="badge"><img src="img/logo.png" alt="TryGames logo" /></span>
            <span class="display">Try<b>Games</b></span>
          </a>
          <span class="eyebrow arcade">Welcome back</span>
          <h1 class="display">Sign in to your account</h1>
          <p>Pick up where you left off and keep the cash coming in.</p>
        </div>

        <div class="stat-chips">
          <div><b class="display">$5</b><span>Welcome bonus</span></div>
          <div><b class="display">0%</b><span>Sign‑up cost</span></div>
          <div><b class="display">24/7</b><span>Cash‑out</span></div>
        </div>

        <div class="xp-track" aria-hidden="true">
          <div class="xp-fill"></div>
          <span class="xp-label"><span class="live-dot"></span><span class="live-tag">LIVE</span> <i class="fas fa-fire"></i> Sign in to keep your streak alive</span>
        </div>

        <?php
        if (isset($_SESSION['message'])) {
            echo $_SESSION['message'];
        }
        ?>

        <form class="form-horizontal" action="<?= site_url('auth/login') ?>" autocomplete="on" method="POST" id="loginForm">

          <input type="hidden" name="<?= $csrf_name ?>" value="<?= $csrf_hash ?>">

          <div class="field">
            <i class="fas fa-user leading"></i>
            <input type="text" name="email" class="form-control" id="email" placeholder="Enter email or username" required autofocus>
          </div>

          <div class="field has-toggle">
            <i class="fas fa-lock leading"></i>
            <input type="password" name="password" class="form-control" id="password" placeholder="Enter password" required>
            <button type="button" class="field-toggle" data-toggle-for="password" aria-label="Show password" aria-pressed="false">
              <i class="fas fa-eye"></i>
            </button>
          </div>

          <div class="form-footer">
            <div class="custom-control">
              <input type="checkbox" name="remember" class="custom-control-input" id="remember">
              <label class="custom-control-label" for="remember">Remember me</label>
            </div>
            <a href="/forgot-password" class="forgot-link">Forgot password?</a>
          </div>

          <button class="btn btn-primary waves-effect waves-light" type="submit" id="loginSubmit">
            <i class="fas fa-spinner"></i>
            <i class="fas fa-sign-in-alt"></i> Sign in
          </button>

        </form>

        <div class="divider">Secure login</div>
        <div class="trust-row">
          <span><i class="fas fa-shield-halved"></i> Encrypted</span>
          <span><i class="fas fa-lock"></i> Private</span>
          <span><i class="fas fa-bolt"></i> Fast payouts</span>
        </div>

        <div class="foot">
          Don't have an account? <a href="/register">Create one now</a>
        </div>
      </div>
    </div>
  </div>

  <!-- JAVASCRIPT -->
  <script src="/assets/libs/jquery/jquery.min.js"></script>
  <script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="/assets/libs/metismenu/metisMenu.min.js"></script>
  <script src="/assets/libs/simplebar/simplebar.min.js"></script>
  <script src="/assets/libs/node-waves/waves.min.js"></script>
  <script src="/assets/js/app.js?v=4.4.4"></script>
  <script src="/assets/js/vie/captcha.js"></script>

  <script>
    (function(){
      const video = document.getElementById('bg-video');
      const cardVideo = document.getElementById('card-video');
      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
      const toggle = document.getElementById('bg-toggle');
      const toggleIcon = document.getElementById('bg-toggle-icon');

      [video, cardVideo].forEach((v) => {
        if (v) {
          v.muted = true;
          v.playsInline = true;
          const tryPlay = () => v.play().catch(()=>{});
          tryPlay();
          v.addEventListener('loadeddata', tryPlay, { once: true });
        }
      });

      if (reduceMotion) {
        if (video) {
          video.pause();
          video.removeAttribute('autoplay');
        }
        if (cardVideo) {
          cardVideo.pause();
          cardVideo.removeAttribute('autoplay');
        }
        if (toggle) {
          toggleIcon.className = 'fas fa-play';
          toggle.setAttribute('aria-pressed', 'true');
          toggle.setAttribute('aria-label', 'Play background video');
        }
      }

      if (toggle && video) {
        toggle.addEventListener('click', () => {
          if (video.paused) {
            video.play().catch(()=>{});
            toggleIcon.className = 'fas fa-pause';
            toggle.setAttribute('aria-pressed', 'false');
            toggle.setAttribute('aria-label', 'Pause background video');
          } else {
            video.pause();
            toggleIcon.className = 'fas fa-play';
            toggle.setAttribute('aria-pressed', 'true');
            toggle.setAttribute('aria-label', 'Play background video');
          }
        });
      }
    })();

    /* ---------- cursor-tracked spotlight on the card ---------- */
    (function(){
      const card = document.getElementById('loginCard');
      if (!card || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
      card.addEventListener('mousemove', (e) => {
        const r = card.getBoundingClientRect();
        card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
        card.style.setProperty('--my', (e.clientY - r.top) + 'px');
      });
    })();

    /* ---------- password visibility toggle ---------- */
    (function(){
      document.querySelectorAll('.field-toggle').forEach((btn) => {
        btn.addEventListener('click', () => {
          const input = document.getElementById(btn.dataset.toggleFor);
          if (!input) return;
          const showing = input.type === 'text';
          input.type = showing ? 'password' : 'text';
          btn.innerHTML = showing ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
          btn.setAttribute('aria-pressed', String(!showing));
          btn.setAttribute('aria-label', showing ? 'Show password' : 'Hide password');
        });
      });
    })();

    /* ---------- submit loading state (native validation still runs first) ---------- */
    (function(){
      const form = document.getElementById('loginForm');
      const submitBtn = document.getElementById('loginSubmit');
      if (!form || !submitBtn) return;
      form.addEventListener('submit', () => {
        if (form.checkValidity()) submitBtn.classList.add('is-loading');
      });
    })();
  </script>

</body>

</html>