/* =====================================================
   GameVault CMS 2.0 — Enhancements
   Author : Mr Arslan CEO
   URL    : https://www.codester.com/mrdigitalceo
   ===================================================== */

/* Subtle glass morph and refined card hover */
.game-card {
    transform: translateY(0);
    transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
    will-change: transform;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    display: block;
    position: relative;
}
.game-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 18px 40px -10px rgba(99,102,241,.25), 0 6px 20px -6px rgba(0,0,0,.18);
    border-color: rgba(99,102,241,.35);
}
.game-card .game-thumb-wrap {
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.game-card .game-thumb {
    width:100%; height:100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.game-card:hover .game-thumb { transform: scale(1.07); }

/* Hover overlay with play hint */
.game-card .game-thumb-wrap::after {
    content: ""; position: absolute; inset:0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
    opacity: 0; transition: opacity .25s;
    pointer-events: none;
}
.game-card:hover .game-thumb-wrap::after { opacity: 1; }
.game-card .game-info { padding: 12px 14px; }
.game-card .game-title {
    font-weight: 700; font-size: 14px; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.game-card .game-meta {
    display:flex; gap:12px; margin-top:6px;
    font-size: 12px; color: var(--text-muted);
}
.game-card .badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--gradient); color:#fff; font-size:11px; font-weight:700;
    padding: 4px 8px; border-radius: 6px;
    box-shadow: 0 4px 10px rgba(99,102,241,.4);
}
.game-card .badge-trending { background: linear-gradient(135deg,#f59e0b,#ef4444); }

/* Smooth grid */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

/* Author / footer credit */
.author-credit {
    display:inline-flex; align-items:center; gap:6px;
    font-size: 13px; color: var(--text-muted);
}
.author-credit a {
    color: var(--primary); font-weight: 600;
}
.author-credit a:hover { color: var(--accent); }
.author-credit .heart { color: #ec4899; animation: pulseHeart 1.6s ease-in-out infinite; }
@keyframes pulseHeart {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.18); }
}

/* Auth pages (login/register/forgot/reset) */
.auth-shell {
    min-height: calc(100vh - var(--header-h));
    display:flex; align-items:center; justify-content:center;
    padding: 32px 16px;
    background:
      radial-gradient(at 20% 20%, rgba(99,102,241,.18), transparent 50%),
      radial-gradient(at 80% 80%, rgba(236,72,153,.18), transparent 50%),
      var(--bg);
}
.auth-card {
    width: 100%; max-width: 460px;
    background: var(--surface); border:1px solid var(--border);
    border-radius: var(--radius-lg); padding: 32px;
    box-shadow: var(--shadow-lg);
}
.auth-card h1 { margin: 0 0 6px; font-size: 26px; }
.auth-card .lead { color: var(--text-muted); margin-bottom: 22px; font-size: 14px; }
.auth-card .form-control {
    width:100%; padding:12px 14px; border-radius:10px;
    border:1px solid var(--border); background: var(--bg-soft); color: var(--text);
    font-family: inherit; font-size: 14px; transition: .2s;
}
.auth-card .form-control:focus { outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.auth-card .form-group { margin-bottom: 14px; }
.auth-card label { font-size:13px; color: var(--text-muted); margin-bottom: 6px; display:block; }
.auth-card .btn-block { width:100%; justify-content: center; }
.auth-divider {
    display:flex; align-items:center; gap:10px; margin:18px 0;
    color: var(--text-light); font-size:12px;
}
.auth-divider::before, .auth-divider::after {
    content:""; flex:1; height:1px; background: var(--border);
}

/* User dashboard */
.user-shell { display:grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 20px 0; }
.user-side {
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    padding: 18px; height: max-content; position: sticky; top: calc(var(--header-h) + 20px);
}
.user-side .avatar-big {
    width:84px; height:84px; border-radius:50%; margin:0 auto 12px;
    background: var(--gradient); display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:32px; font-weight:800; box-shadow: 0 8px 20px rgba(99,102,241,.4);
}
.user-side .uname { text-align:center; font-weight:700; }
.user-side .uemail { text-align:center; color:var(--text-muted); font-size:12px; margin-bottom:14px; }
.user-side .menu a {
    display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 10px;
    color: var(--text-muted); font-weight:500; font-size:14px;
    transition: .2s;
}
.user-side .menu a:hover { background: var(--bg-soft); color: var(--primary); }
.user-side .menu a.active { background: var(--gradient); color:#fff; }
.user-side .menu a.active i { color:#fff; }
.user-main {
    background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
    padding: 24px;
}
.stat-row { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:12px; margin-bottom: 20px; }
.stat-pill {
    background: var(--bg-soft); padding:14px; border-radius: 10px;
    border:1px solid var(--border);
}
.stat-pill .v { font-size: 22px; font-weight: 800; }
.stat-pill .l { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Tag chips */
.tag-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; border-radius: 6px; font-size: 12px;
    background: rgba(99,102,241,.1); color: var(--primary); margin: 2px;
    transition: .2s;
}
.tag-chip:hover { background: var(--gradient); color:#fff; }

/* Skeleton loader */
.skeleton {
    background: linear-gradient(90deg, var(--bg-soft) 25%, var(--surface) 50%, var(--bg-soft) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Toast refinement */
.gv-toast {
    position: fixed; top: 88px; right: 16px; z-index: 9999;
    background: var(--surface); color: var(--text);
    padding: 12px 16px; border-radius: 10px;
    border:1px solid var(--border);
    box-shadow: var(--shadow-lg);
    animation: slideIn .25s ease;
    display:flex; align-items:center; gap:10px;
    max-width: 320px;
}
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1;} }
.gv-toast.success { border-left: 3px solid var(--success); }
.gv-toast.error   { border-left: 3px solid var(--danger); }
.gv-toast.info    { border-left: 3px solid var(--info); }

/* Featured section header glow */
.section-title .icon-wrap {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--gradient);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    box-shadow: 0 6px 18px rgba(99,102,241,.35);
}

/* Footer Author credit block */
.gv-author-block {
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border);
    text-align: center; font-size: 13px; color: var(--text-muted);
}
.gv-author-block a {
    color: var(--primary); font-weight: 700; transition: color .2s;
}
.gv-author-block a:hover { color: var(--accent); }

/* Game player polish */
.game-player-wrap {
    background: linear-gradient(135deg, #0f172a, #1e1b4b);
    border-radius: var(--radius-lg);
    overflow: hidden; aspect-ratio: 16/10;
    box-shadow: 0 24px 60px -12px rgba(99,102,241,.4);
}
.game-player-wrap iframe { width:100%; height:100%; border:0; display:block; }

/* Mobile tweaks */
@media (max-width: 900px) {
    .user-shell { grid-template-columns: 1fr; }
    .user-side  { position: static; }
    .game-grid  { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}