:root {

  --blue: #0096ff;

  --cyan: #00e5ff;

  --purple: #7c3aed;

  --dark: #04091a;

  --card-bg: rgba(8,20,50,0.92);

}



* { margin: 0; padding: 0; box-sizing: border-box; }



body {

  min-height: 100vh;

  background: var(--dark);

  font-family: 'Rajdhani', sans-serif;

  overflow-x: hidden;

  position: relative;

}



body::before {

  content: '';

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-image: url('background.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  transform: rotate(360deg);

  z-index: -1;

}



/* ─── Background ─── */

.bg-grid {

  position: fixed; inset: 0;

  background-image:

    linear-gradient(rgba(0,150,255,0.04) 1px, transparent 1px),

    linear-gradient(90deg, rgba(0,150,255,0.04) 1px, transparent 1px);

  background-size: 60px 60px;

  z-index: 0; pointer-events: none;

}

.bg-orb {

  position: fixed; border-radius: 50%;

  filter: blur(90px); pointer-events: none;

  animation: pulse-orb 7s ease-in-out infinite alternate;

}

.bg-orb-1 { width:500px;height:500px; background:radial-gradient(circle,rgba(0,150,255,0.14) 0%,transparent 70%); top:-120px;left:-120px; }

.bg-orb-2 { width:400px;height:400px; background:radial-gradient(circle,rgba(120,0,255,0.12) 0%,transparent 70%); bottom:-80px;right:-80px; animation-delay:3s; }



@keyframes pulse-orb {

  0%  { opacity:.6; transform:scale(1); }

  100%{ opacity:1;  transform:scale(1.1); }

}



/* ─── Navbar ─── */

.navbar {

  position: fixed; top: 0; left: 0; right: 0;

  z-index: 100;

  height: 56px;

  background: rgba(4,9,26,0.85);

  backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(0,150,255,0.15);

  display: flex; align-items: center;

  padding: 0 28px;

  gap: 0;

}



.navbar::before {

  content: '';

  position: absolute; top: 0; left: 0; right: 0;

  height: 2px;

  background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--cyan) 50%, var(--purple) 70%, transparent);

}



.nav-logo {

  font-family: 'Cinzel Decorative', serif;

  font-size: 16px;

  font-weight: 900;

  letter-spacing: 6px;

  background: linear-gradient(135deg, #fff 0%, #a8d8ff 40%, var(--cyan) 70%, var(--purple) 100%);

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

  filter: drop-shadow(0 0 8px rgba(0,200,255,0.35));

  flex-shrink: 0;

}



.nav-spacer { flex: 1; }



.nav-actions {

  display: flex; align-items: center; gap: 6px;

}



.nav-btn {

  width: 34px; height: 34px;

  background: rgba(0,150,255,0.07);

  border: 1px solid rgba(0,150,255,0.15);

  border-radius: 6px;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  transition: all 0.2s;

  color: rgba(100,180,255,0.55);

  position: relative;

}

.nav-btn:hover {

  background: rgba(0,150,255,0.15);

  border-color: rgba(0,200,255,0.4);

  color: var(--cyan);

  box-shadow: 0 0 10px rgba(0,200,255,0.12);

}

.nav-btn svg { width:16px; height:16px; }



.nav-btn .dot {

  position: absolute; top: 6px; right: 7px;

  width: 5px; height: 5px;

  background: var(--cyan);

  border-radius: 50%;

  box-shadow: 0 0 6px var(--cyan);

}



.nav-divider {

  width: 1px; height: 28px;

  background: rgba(0,150,255,0.15);

  margin: 0 10px;

}



.profile-chip {

  display: flex; align-items: center; gap: 9px;

  padding: 5px 12px 5px 6px;

  background: rgba(0,150,255,0.07);

  border: 1px solid rgba(0,150,255,0.18);

  border-radius: 20px;

  cursor: pointer;

  transition: all 0.2s;

}

.profile-chip:hover {

  background: rgba(0,150,255,0.14);

  border-color: rgba(0,200,255,0.35);

}

.profile-avatar {

  width: 26px; height: 26px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--blue), var(--purple));

  display: flex; align-items: center; justify-content: center;

  font-family: 'Oxanium', sans-serif;

  font-size: 11px; font-weight: 800;

  color: #fff;

  letter-spacing: 0;

  flex-shrink: 0;

}

.profile-name {

  font-size: 13px; font-weight: 700;

  color: rgba(180,220,255,0.8);

  letter-spacing: 0.5px;

  white-space: nowrap;

}

.profile-arrow {

  width: 10px; height: 10px;

  color: rgba(0,200,255,0.4);

  margin-left: 2px;

}



/* ─── Main content ─── */

.main {

  position: relative; z-index: 10;

  padding-top: 56px;

  min-height: 100vh;

  display: flex; flex-direction: column;

  align-items: center; justify-content: center;

  padding-bottom: 40px;

}



.section-label {

  text-align: center;

  margin-bottom: 48px;

}

.section-label-top {

  font-size: 11px;

  letter-spacing: 6px;

  color: rgba(0,200,255,0.4);

  text-transform: uppercase;

  font-weight: 700;

  margin-bottom: 10px;

}

.section-label h1 {

  font-family: 'Oxanium', sans-serif;

  font-size: 30px;

  font-weight: 800;

  color: #000000;

  letter-spacing: 2px;

}

.section-label h1 span {

  background: linear-gradient(90deg, var(--cyan), var(--blue));

  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;

  filter: drop-shadow(-1px -1px 0 rgba(0,0,0,0.8))
          drop-shadow(1px -1px 0 rgba(0,0,0,0.8))
          drop-shadow(-1px 1px 0 rgba(0,0,0,0.8))
          drop-shadow(1px 1px 0 rgba(0,0,0,0.8));

}



.heading-line {

  display: flex; align-items: center; justify-content: center; gap: 8px;

  margin-top: 14px;

}

.heading-line-seg { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,255,0.5)); width: 60px; }

.heading-line-seg.r { background: linear-gradient(270deg, transparent, rgba(0,200,255,0.5)); }

.heading-line-diamond { width: 5px; height: 5px; border: 1px solid rgba(0,200,255,0.6); transform: rotate(45deg); }



/* ─── Game cards grid ─── */

.games-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  width: 100%;

  max-width: 760px;

  padding: 0 24px;

}



.game-card {

  position: relative;

  height: 180px;

  border-radius: 4px;

  overflow: hidden;

  cursor: pointer;

  border: 1px solid rgba(0,150,255,0.15);

  background: var(--card-bg);

  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s, border-color 0.25s;

  animation: fade-up 0.7s cubic-bezier(0.22,1,0.36,1) both;

}

.game-card:nth-child(1) { animation-delay: 0.15s; }

.game-card:nth-child(2) { animation-delay: 0.22s; }

.game-card:nth-child(3) { animation-delay: 0.29s; }

.game-card:nth-child(4) { animation-delay: 0.36s; }

.game-card:nth-child(5) { animation-delay: 0.43s; }

.game-card:nth-child(6) { animation-delay: 0.50s; }

.game-card:nth-child(7) { animation-delay: 0.57s; }

.game-card:nth-child(8) { animation-delay: 0.64s; }

.game-card:nth-child(9) { animation-delay: 0.71s; }



/* แชทรวม — คร่อม 2 คอลัมน์ */

.card-allchat {

  grid-column: 1 / -1;

  height: 110px;

}

.card-allchat .game-card-bg {

  background: radial-gradient(ellipse at 20% 50%, rgba(0,200,255,0.25), rgba(124,58,237,0.2) 60%, transparent);

}

.card-allchat .game-card-top {

  background: linear-gradient(90deg, transparent, var(--cyan) 30%, var(--purple) 70%, transparent);

}

.card-allchat .gc-corner::before,

.card-allchat .gc-corner::after { background: rgba(0,220,255,0.65); }

.card-allchat .game-tag { color: var(--cyan); }

.card-allchat .game-btn {

  background: rgba(0,200,255,0.1);

  color: var(--cyan);

  border: 1px solid rgba(0,200,255,0.3);

}

.card-allchat .game-btn:hover {

  background: rgba(0,200,255,0.2);

  box-shadow: 0 0 16px rgba(0,200,255,0.25);

}

.card-allchat:hover {

  border-color: rgba(0,220,255,0.5);

  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 40px rgba(0,150,255,0.18);

}



/* layout แนวนอนสำหรับการ์ดแชท */

.card-allchat .game-card-content {

  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 24px;

  padding: 20px 28px;

}

.card-allchat .game-card-content .text-group {

  display: flex; flex-direction: column; gap: 6px;

}

.card-allchat .game-icon-area {

  position: relative;

  top: unset; right: unset;

  transform: none;

  opacity: 0.55;

  flex-shrink: 0;

  width: 52px; height: 52px;

  overflow: hidden;

  transition: opacity 0.25s;

}

.card-allchat .game-icon-area svg {

  width: 52px; height: 52px;

  transition: opacity 0.25s, transform 0.25s;

  transform-origin: center center;

}

.card-allchat:hover .game-icon-area {

  opacity: 0.85;

}

.card-allchat:hover .game-icon-area svg {

  transform: scale(1.12);

}

.card-allchat .game-name { margin-bottom: 0; font-size: 20px; }



.game-card:hover {

  transform: translateY(-5px) scale(1.015);

  border-color: rgba(0,200,255,0.45);

  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(0,150,255,0.15);

}

.game-card:active { transform: scale(0.98); }



.game-card-bg {

  position: absolute; inset: 0;

  opacity: 0.18;

  transition: opacity 0.25s;

}

.game-card:hover .game-card-bg { opacity: 0.28; }



.card-roblox   .game-card-bg {

  background-image: url('roblox-bg.jpg') !important;

  background-size: cover !important;

  background-position: center center !important;

  opacity: 1 !important;

  transform: scaleX(1);

}

.card-roblox:hover .game-card-bg { opacity: 1 !important; }

.card-rov      .game-card-bg {

  background-image: url('rov-bg.jfif') !important;

  background-size: cover !important;

  background-position: center center !important;

  opacity: 1 !important;

  transform: scaleX(1);

}

.card-rov:hover .game-card-bg { opacity: 1 !important; }

.card-minecraft .game-card-bg {

  background-image: url('minecraft-bg.jpg') !important;

  background-size: cover !important;

  background-position: center center !important;

  opacity: 1 !important;

  transform: scaleX(1);

}

.card-minecraft:hover .game-card-bg { opacity: 1 !important; }

.card-genshin  .game-card-bg {

  background-image: url('genshin-bg.webp') !important;

  background-size: cover !important;

  background-position: center center !important;

  opacity: 1 !important;

  transform: scaleX(1);

}

.card-genshin:hover .game-card-bg { opacity: 1 !important; }

.card-mlbb      .game-card-bg {
  background-image: url('Mlbb.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 1 !important;
}

.card-mlbb:hover .game-card-bg { opacity: 1 !important; }

/* Free Fire Card - Lime-Blue Theme */

.card-freefire .gc-corner::before,

.card-freefire .gc-corner::after  { background: rgba(130,230,210,0.7); }

.card-freefire .game-card-top { background: linear-gradient(90deg, transparent, #82e6d2, transparent); }

.card-freefire .game-tag { color: #82e6d2; }

.card-freefire .game-btn { background: rgba(130,230,210,0.15); color: #a8f0e4; border: 1px solid rgba(130,230,210,0.3); transition: all 0.4s ease; }

.card-freefire .game-btn:hover { background: rgba(130,230,210,0.25);  box-shadow: 0 0 12px rgba(130,230,210,0.2); }

.card-freefire      .game-card-bg {
  background-image: url('Freefire.jfif') !important;
  background-size: cover !important;
  background-position: center center !important;
  opacity: 1 !important;
}

.card-freefire:hover .game-card-bg { opacity: 1 !important; }



/* Shimmer on hover */

.game-card-shine {

  position: absolute; inset: 0;

  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.06) 50%, transparent 70%);

  transform: translateX(-100%);

  transition: transform 0.55s ease;

  z-index: 2;

}

.game-card:hover .game-card-shine { transform: translateX(100%); }



/* Corner accents */

.gc-corner {

  position: absolute; width: 14px; height: 14px; z-index: 3;

}

.gc-corner::before, .gc-corner::after { content:''; position:absolute; }

.gc-corner::before { width:100%; height:1.5px; top:0; left:0; }

.gc-corner::after  { width:1.5px; height:100%; top:0; left:0; }

.gc-corner.tl { top:0; left:0; }

.gc-corner.tr { top:0; right:0; transform:scaleX(-1); }

.gc-corner.bl { bottom:0; left:0; transform:scaleY(-1); }

.gc-corner.br { bottom:0; right:0; transform:scale(-1,-1); }



.card-roblox    .gc-corner::before,

.card-roblox    .gc-corner::after  { background: rgba(255,100,100,0.7); }

.card-rov       .gc-corner::before,

.card-rov       .gc-corner::after  { background: rgba(0,200,255,0.7); }

.card-minecraft .gc-corner::before,

.card-minecraft .gc-corner::after  { background: rgba(130,200,70,0.7); }

.card-genshin   .gc-corner::before,

.card-genshin   .gc-corner::after  { background: rgba(255,210,60,0.7); }

.card-mlbb      .gc-corner::before,

.card-mlbb      .gc-corner::after  { background: rgba(168,85,247,0.7); }



/* Top accent line per card */

.game-card-top {

  position: absolute; top:0; left:0; right:0;

  height: 2px; z-index: 3;

  transition: opacity 0.25s;

}

.card-roblox    .game-card-top { background: linear-gradient(90deg, transparent, #ff4b4b, transparent); }

.card-rov       .game-card-top { background: linear-gradient(90deg, transparent, #00e5ff, transparent); }

.card-minecraft .game-card-top { background: linear-gradient(90deg, transparent, #7ec850, transparent); }

.card-genshin   .game-card-top { background: linear-gradient(90deg, transparent, #ffd700, transparent); }

.card-mlbb      .game-card-top { background: linear-gradient(90deg, transparent, #a855f7, transparent); }



/* Card content */

.game-card-content {

  position: relative; z-index: 4;

  height: 100%;

  display: flex; flex-direction: column;

  justify-content: flex-end;

  padding: 20px 22px;

}



/* Big icon area */

.game-icon-area {

  position: absolute;

  top: 50%; right: 22px;

  transform: translateY(-58%);

  z-index: 4;

  opacity: 0.22;

  transition: opacity 0.25s, transform 0.25s;

}

.game-card:hover .game-icon-area {

  opacity: 0.35;

  transform: translateY(-62%) scale(1.06);

}

.game-icon-area svg { width: 72px; height: 72px; }



.game-tag {

  font-size: 10px;

  letter-spacing: 3px;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 6px;

  opacity: 0.55;

}

.card-roblox    .game-tag { color: #ff7070; }

.card-rov       .game-tag { color: var(--cyan); }

.card-minecraft .game-tag { color: #9fdb60; }

.card-genshin   .game-tag { color: #ffd700; }

.card-mlbb      .game-tag { color: #c084fc; }



.game-name {

  font-family: 'Oxanium', sans-serif;

  font-size: 22px; font-weight: 800;

  color: #eef4ff;

  letter-spacing: 1.5px;

  line-height: 1;

  margin-bottom: 10px;

  text-shadow: 
    -1px -1px 0 rgba(0,0,0,0.7),
    1px -1px 0 rgba(0,0,0,0.7),
    -1px 1px 0 rgba(0,0,0,0.7),
    1px 1px 0 rgba(0,0,0,0.7);

}



.game-btn {

  display: inline-flex; align-items: center; gap: 6px;

  padding: 7px 16px;

  border-radius: 2px;

  border: none;

  font-family: 'Rajdhani', sans-serif;

  font-size: 12px; font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;

  cursor: pointer;

  width: fit-content;

  transition: all 0.2s;

  position: relative; overflow: hidden;

}

.card-roblox    .game-btn { background: rgba(255,70,70,0.15); color: #ff9090; border: 1px solid rgba(255,70,70,0.3); }

.card-rov       .game-btn { background: rgba(0,200,255,0.1);  color: var(--cyan); border: 1px solid rgba(0,200,255,0.25); }

.card-minecraft .game-btn { background: rgba(120,200,60,0.1); color: #9fdb60;      border: 1px solid rgba(120,200,60,0.25); }

.card-genshin   .game-btn { background: rgba(255,210,60,0.1); color: #ffd700;      border: 1px solid rgba(255,210,60,0.25); }

.card-mlbb      .game-btn { background: rgba(168,85,247,0.15); color: #d8b4fe; border: 1px solid rgba(168,85,247,0.3); }



.card-roblox    .game-btn:hover { background: rgba(255,70,70,0.25);  box-shadow: 0 0 12px rgba(255,70,70,0.2); }

.card-rov       .game-btn:hover { background: rgba(0,200,255,0.2);   box-shadow: 0 0 12px rgba(0,200,255,0.2); }

.card-minecraft .game-btn:hover { background: rgba(120,200,60,0.2);  box-shadow: 0 0 12px rgba(120,200,60,0.2); }

.card-genshin   .game-btn:hover { background: rgba(255,210,60,0.2);  box-shadow: 0 0 12px rgba(255,210,60,0.2); }

.card-mlbb      .game-btn:hover { background: rgba(168,85,247,0.25);  box-shadow: 0 0 12px rgba(168,85,247,0.2); }



.game-btn svg { width:12px; height:12px; }



/* Particles */

.particle {

  position: fixed; border-radius: 50%;

  pointer-events: none;

  animation: float-up linear infinite; z-index: 1;

}

@keyframes float-up {

  0%   { transform: translateY(100vh) scale(1); opacity:0; }

  10%  { opacity:1; }

  90%  { opacity:.5; }

  100% { transform: translateY(-10vh) scale(0); opacity:0; }

}



@keyframes fade-up {

  from { opacity:0; transform:translateY(24px); }

  to   { opacity:1; transform:translateY(0); }

}



/* ── Responsive Design ── */



/* Tablets */

@media (max-width: 768px) {

  .navbar { padding: 0 20px; }

  .nav-logo { font-size: 14px; letter-spacing: 5px; }

  .nav-btn { width: 32px; height: 32px; }

  .nav-btn svg { width: 15px; height: 15px; }

  .profile-chip { padding: 4px 10px 4px 5px; }

  .profile-avatar { width: 24px; height: 24px; font-size: 10px; }

  .profile-name { font-size: 12px; }

  

  .section-label { margin-bottom: 36px; }

  .section-label h1 { font-size: 26px; }

  .games-grid { gap: 16px; padding: 0 20px; }

  .game-card { height: 160px; }

  .card-allchat { height: 100px; }

  .card-allchat .game-card-content { padding: 16px 20px; gap: 18px; }

  .card-allchat .game-icon-area { width: 44px; height: 44px; }

  .card-allchat .game-icon-area svg { width: 44px; height: 44px; }

  .card-allchat .game-name { font-size: 18px; }

  .game-card-content { padding: 16px 18px; }

  .game-icon-area svg { width: 60px; height: 60px; }

  .game-name { font-size: 18px; }

  .game-btn { padding: 6px 14px; font-size: 11px; }

}



/* Mobile */

@media (max-width: 480px) {

  .navbar { padding: 0 14px; height: 52px; }

  .nav-logo { font-size: 12px; letter-spacing: 4px; }

  .nav-btn { width: 30px; height: 30px; }

  .nav-btn svg { width: 14px; height: 14px; }

  .nav-divider { display: none; }

  .profile-chip { padding: 4px 8px 4px 4px; }

  .profile-avatar { width: 22px; height: 22px; font-size: 9px; }

  .profile-name { display: none; }

  

  .main { padding-top: 52px; padding-bottom: 30px; }

  .section-label { margin-bottom: 28px; }

  .section-label-top { font-size: 10px; letter-spacing: 4px; }

  .section-label h1 { font-size: 22px; letter-spacing: 1.5px; }

  .heading-line-seg { width: 40px; }

  

  .games-grid { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }

  .game-card { height: 140px; }

  .card-allchat { height: 90px; grid-column: 1; }

  .card-allchat .game-card-content { padding: 14px 16px; gap: 14px; flex-direction: row; }

  .card-allchat .game-icon-area { width: 40px; height: 40px; }

  .card-allchat .game-icon-area svg { width: 40px; height: 40px; }

  .card-allchat .game-name { font-size: 16px; }

  .card-allchat .game-btn { padding: 5px 12px; font-size: 10px; }

  

  .game-card-content { padding: 14px 16px; }

  .game-icon-area { right: 16px; }

  .game-icon-area svg { width: 52px; height: 52px; }

  .game-tag { font-size: 9px; margin-bottom: 4px; }

  .game-name { font-size: 16px; margin-bottom: 8px; }

  .game-btn { padding: 5px 12px; font-size: 10px; letter-spacing: 1.5px; }

  .game-btn svg { width: 10px; height: 10px; }

  

  .bg-orb-1 { width: 300px; height: 300px; }

  .bg-orb-2 { width: 250px; height: 250px; }

}

/* ─── Sign In Button (Green) ─── */

.sign-in-btn {
  width: auto !important;
  min-width: 100px;
  padding: 6px 20px !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

.sign-in-btn:hover {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  border-color: rgba(34, 197, 94, 0.8) !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.4) !important;
  color: #ffffff !important;
}