/* =========================================================
   CARTRIDGE — hệ thống thiết kế dùng chung cho trang tải game
   Token: nền tím than sâu, hai accent (cyan điện & magenta),
   khối "cartridge" bo góc lệch làm chữ ký thị giác.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --bg:        #0D0B1E;
  --surface:   #16132C;
  --surface-2: #1E1A3A;
  --line:      #322C58;
  --text:      #F2EFFF;
  --text-dim:  #A79FD6;
  --violet:    #7C3AED;
  --cyan:      #00E5C7;
  --magenta:   #FF3D81;

  --display: 'Chakra Petch', sans-serif;
  --body: 'Manrope', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --notch: 18px; /* độ lệch góc "cartridge" */
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height:1.55;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* Nền có lưới quét nhẹ + glow, tạo cảm giác màn hình máy chơi game */
body::before{
  content:"";
  position: fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(0,229,199,.12), transparent 60%);
  pointer-events:none;
  z-index:0;
}

.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(13,11,30,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  font-family: var(--display);
  font-weight:700;
  font-size:1.35rem;
  letter-spacing:.5px;
  display:flex; align-items:center; gap:10px;
}
.logo .dot{
  width:10px; height:10px; border-radius:2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  transform: rotate(45deg);
}
.logo span.accent{ color: var(--cyan); }

nav.main-nav{ display:flex; gap:6px; align-items:center; }
nav.main-nav a{
  padding:9px 16px;
  font-size:.92rem; font-weight:600;
  color: var(--text-dim);
  border-radius:8px;
  transition: color .15s, background .15s;
}
nav.main-nav a:hover{ color: var(--text); background: var(--surface-2); }
nav.main-nav a.current{ color: var(--bg); background: var(--cyan); }

.header-actions{ display:flex; gap:10px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px;
  font-weight:700; font-size:.92rem;
  border-radius:8px;
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: var(--cyan);
  color: #04211C;
  box-shadow: 0 0 0 rgba(0,229,199,0);
}
.btn-primary:hover{ box-shadow: 0 0 22px rgba(0,229,199,.45); }

.btn-ghost{
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }

.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  padding: 86px 0 70px;
  position:relative;
}
.hero .eyebrow{
  font-family: var(--mono);
  color: var(--cyan);
  font-size:.82rem;
  letter-spacing:2px;
  text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.hero .eyebrow::before{
  content:""; width:26px; height:2px; background: var(--cyan);
}
.hero h1{
  font-family: var(--display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height:1.05;
  margin:0 0 22px;
  max-width: 780px;
}
.hero h1 .glow{ color: var(--cyan); text-shadow: 0 0 30px rgba(0,229,199,.35); }
.hero p.lead{
  color: var(--text-dim);
  font-size:1.08rem;
  max-width:560px;
  margin:0 0 34px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-stats{
  display:flex; gap:36px; margin-top:56px; flex-wrap:wrap;
}
.hero-stats div strong{
  display:block; font-family: var(--display); font-size:1.7rem; color: var(--text);
}
.hero-stats div span{ font-size:.82rem; color: var(--text-dim); }

/* ---------- Section headings ---------- */
.section{ padding: 60px 0; }
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:30px; gap:20px; flex-wrap:wrap;
}
.section-head h2{
  font-family: var(--display);
  font-size:1.7rem;
  margin:0 0 6px;
}
.section-head p{ color: var(--text-dim); margin:0; font-size:.95rem; }

/* ---------- Filter chips ---------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.chip{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.85rem; font-weight:600;
  color: var(--text-dim);
  cursor:pointer;
  transition: all .15s;
}
.chip:hover{ border-color: var(--cyan); color: var(--text); }
.chip.active{ background: var(--violet); border-color: var(--violet); color:#fff; }

/* ---------- Game cards (chữ ký thị giác: hình "cartridge") ---------- */
.game-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:22px;
}
.game-card{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 4px var(--notch) 4px var(--notch);
  overflow:hidden;
  position:relative;
  transition: transform .18s ease, border-color .18s ease;
}
.game-card:hover{ transform: translateY(-4px); border-color: var(--cyan); }
.game-card .thumb{
  height:150px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-size:2.4rem; font-weight:700;
  color: rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface));
  position:relative;
}
.game-card .thumb::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.03) 0 2px, transparent 2px 4px
  );
}
.game-card .badge{
  position:absolute; top:10px; right:10px;
  font-family: var(--mono); font-size:.68rem; font-weight:600;
  padding:4px 9px; border-radius:999px;
  background: rgba(0,0,0,.55);
  color: var(--cyan);
  border:1px solid rgba(0,229,199,.4);
  z-index:2;
}
.game-card .body{ padding:16px 18px 18px; }
.game-card h3{ margin:0 0 6px; font-size:1.02rem; font-family: var(--display); }
.game-card .meta{
  display:flex; gap:10px; color: var(--text-dim); font-size:.78rem;
  font-family: var(--mono); margin-bottom:14px;
}
.game-card .foot{ display:flex; align-items:center; justify-content:space-between; }
.game-card .price{ font-family: var(--mono); font-weight:600; color: var(--cyan); font-size:.88rem; }
.dl-btn{
  font-size:.8rem; font-weight:700;
  padding:8px 14px; border-radius:4px 10px 4px 10px;
  background: var(--surface-2);
  border:1px solid var(--line);
  color: var(--text);
  cursor:pointer;
  transition: all .15s;
}
.dl-btn:hover{ background: var(--cyan); color:#04211C; border-color: var(--cyan); }

/* ---------- Auth (đăng ký / đăng nhập) ---------- */
.auth-shell{
  min-height: calc(100vh - 77px);
  display:flex; align-items:center; justify-content:center;
  padding: 50px 20px;
}
.auth-card{
  width:100%; max-width:420px;
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 6px var(--notch) 6px var(--notch);
  padding: 40px 36px;
  position:relative;
}
.auth-card::before{
  content:""; position:absolute; top:-1px; left:24px; right:24px; height:3px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  border-radius: 0 0 4px 4px;
}
.auth-card .eyebrow{
  font-family: var(--mono); font-size:.78rem; letter-spacing:2px;
  color: var(--cyan); text-transform:uppercase; margin-bottom:8px;
}
.auth-card h1{
  font-family: var(--display); font-size:1.7rem; margin:0 0 8px;
}
.auth-card p.sub{ color: var(--text-dim); font-size:.9rem; margin:0 0 30px; }

.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:.82rem; font-weight:700;
  color: var(--text-dim); margin-bottom:7px;
}
.field input, .field select{
  width:100%;
  padding:12px 14px;
  background: var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  color: var(--text);
  font-size:.95rem;
  font-family: var(--body);
  transition: border-color .15s;
}
.field input:focus, .field select:focus{
  outline:none; border-color: var(--cyan);
}
.field .hint{ font-size:.76rem; color: var(--text-dim); margin-top:6px; }
.field-error{ font-size:.78rem; color: var(--magenta); margin-top:6px; display:none; }
.field.has-error input{ border-color: var(--magenta); }
.field.has-error .field-error{ display:block; }

.check-row{
  display:flex; align-items:flex-start; gap:10px;
  font-size:.83rem; color: var(--text-dim);
  margin-bottom:24px;
}
.check-row input{ margin-top:3px; accent-color: var(--cyan); }
.check-row a{ color: var(--cyan); font-weight:600; }

.auth-msg{
  margin-top:18px; padding:12px 14px; border-radius:6px;
  font-size:.85rem; display:none;
}
.auth-msg.show{ display:block; }
.auth-msg.ok{ background: rgba(0,229,199,.1); border:1px solid rgba(0,229,199,.35); color: var(--cyan); }
.auth-msg.err{ background: rgba(255,61,129,.1); border:1px solid rgba(255,61,129,.35); color: var(--magenta); }

.auth-switch{
  text-align:center; margin-top:24px; font-size:.88rem; color: var(--text-dim);
}
.auth-switch a{ color: var(--cyan); font-weight:700; }

.divider{
  display:flex; align-items:center; gap:12px;
  color: var(--text-dim); font-size:.78rem;
  margin: 22px 0;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background: var(--line); }

/* ---------- Terms page ---------- */
.terms-shell{ padding: 60px 0 100px; }
.terms-shell .eyebrow{
  font-family: var(--mono); font-size:.8rem; letter-spacing:2px;
  color: var(--cyan); text-transform:uppercase; margin-bottom:14px;
}
.terms-shell h1{ font-family: var(--display); font-size:2.2rem; margin:0 0 10px; }
.terms-shell .updated{ color: var(--text-dim); font-size:.88rem; margin-bottom:44px; }

.terms-layout{ display:grid; grid-template-columns: 240px 1fr; gap:48px; align-items:start; }
.terms-toc{
  position:sticky; top:96px;
  border-left:2px solid var(--line);
  padding-left:18px;
}
.terms-toc a{
  display:block; padding:7px 0; font-size:.86rem; color: var(--text-dim); font-weight:600;
}
.terms-toc a:hover{ color: var(--cyan); }

.terms-content section{ margin-bottom:38px; scroll-margin-top:96px; }
.terms-content h2{
  font-family: var(--display); font-size:1.15rem;
  display:flex; align-items:center; gap:12px;
  margin:0 0 14px;
}
.terms-content h2 .num{
  font-family: var(--mono); color: var(--cyan); font-size:.9rem;
}
.terms-content p, .terms-content li{ color: var(--text-dim); font-size:.94rem; }
.terms-content ul{ padding-left:20px; }
.terms-content strong{ color: var(--text); }

/* ---------- Footer ---------- */
footer.site-footer{
  border-top:1px solid var(--line);
  padding:36px 0;
  margin-top:40px;
}
footer.site-footer .wrap{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer.site-footer .links{ display:flex; gap:22px; }
footer.site-footer .links a{ color: var(--text-dim); font-size:.85rem; }
footer.site-footer .links a:hover{ color: var(--cyan); }
footer.site-footer small{ color: var(--text-dim); font-size:.8rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  nav.main-nav{ display:none; }
  .terms-layout{ grid-template-columns:1fr; }
  .terms-toc{ position:static; border-left:none; padding-left:0; display:flex; gap:14px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:16px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}