/* ============================================================
 * base.css — biến CSS (màu/ font), reset, nền trang, hiệu ứng glow.
 * Đổi bảng màu / font chữ của toàn bộ trang thì sửa ở đây.
 * ============================================================ */
:root{
  --void:#05070d; --bg:#080b14; --panel:rgba(12,17,30,.7); --panel-2:rgba(16,22,38,.5);
  --line:rgba(203,213,225,.1); --line-bright:rgba(148,196,255,.35);
  --blue:#7aa8ff; --cyan:#8fe3ea; --gold:#e7c98a;
  --text:#f4f6fb; --muted:#98a3ba; --dim:#5c6579;
  --display:"Space Grotesk","Inter",sans-serif; --sans:"Inter",sans-serif; --mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box} html,body{margin:0;padding:0;overflow-x:clip}
body{min-height:100vh;background:
  radial-gradient(circle at 18% 12%,rgba(122,168,255,.10),transparent 32%),
  radial-gradient(circle at 85% 82%,rgba(231,201,138,.05),transparent 30%),
  var(--void);
  color:var(--text);font-family:var(--sans);padding:20px}
.profile-content{min-height:100vh;opacity:.07;filter:blur(18px) saturate(.65);transform:scale(1.015);pointer-events:none;
  transition:opacity .65s var(--ease),filter .65s var(--ease),transform .65s var(--ease)}
body.profile-entered .profile-content{opacity:1;filter:blur(0) saturate(1);transform:scale(1);pointer-events:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

canvas#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.glow{position:fixed;width:32rem;height:32rem;border-radius:50%;filter:blur(120px);opacity:.16;pointer-events:none;z-index:0}
.glow-a{background:#3b5fd9;top:-14rem;left:-10rem}
.glow-b{background:#c9a869;right:-14rem;bottom:-14rem;opacity:.08}

/* ============================================================
 * .tilt-box — hiệu ứng dùng chung cho các "ô" hình khối trên
 * trang (panel, stat-cell): viền gradient tự xoay vòng liên tục
 * quanh cạnh, và nghiêng nhẹ theo hướng con trỏ khi rê chuột
 * (điều khiển bởi initTilt() trong effects.js). Đăng ký biến góc
 * qua @property để trình duyệt nội suy mượt giữa các khung hình.
 * ============================================================ */
@property --ring-angle{syntax:'<angle>';inherits:false;initial-value:0deg}

.tilt-box{position:relative}
.tilt-box:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  z-index:2;
  background:conic-gradient(from var(--ring-angle),
    transparent 0 74%,
    rgba(122,168,255,.7) 83%,
    rgba(143,227,234,.95) 90%,
    rgba(231,201,138,.6) 96%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.34;transition:opacity .45s var(--ease);
  animation:ringSpin 6.5s linear infinite}
@keyframes ringSpin{to{--ring-angle:360deg}}
.tilt-box:hover:before,.tilt-box.is-tilting:before{opacity:.9}

/* fast, responsive transition while the pointer is actively tilting the box;
   reverts to each element's own (slower) transition once it settles */
.tilt-box.is-tilting{transition:transform .16s ease-out}