:root {
      color-scheme: dark;

      /* ---------- nền ---------- */
      --ink-900: #05070F;
      --ink-800: #0A0F20;
      --ink-700: #111936;
      --ink-600: #19214A;
      --plum-700: #25134D;

      /* ---------- nhấn chính: cyan ---------- */
      --cy-200: #D8FBFF;
      --cy-300: #A5F0FA;
      --cy-400: #5EE7F7;
      --cy-500: #2FC6DC;
      --cy-600: #17788C;

      /* ---------- nhấn phụ: tím ---------- */
      --vi-300: #C5BEFF;
      --vi-400: #8B7CFF;
      --vi-500: #6354D6;

      /* ---------- chữ ---------- */
      --paper: #EDF3FF;
      --paper-dim: #A9B7D8;

      /* ---------- vàng kem, chỉ dùng cho điểm nhấn nhỏ ---------- */
      --sun-400: #FFD166;


      /* ---------- MÀU RIÊNG CỦA HÌNH MINH HOẠ TỪNG GAME ----------
         Mấy biến dưới đây CỐ TÌNH giữ nguyên tông vàng/ngọc cũ.
         Chúng chỉ phục vụ artwork của từng game (nón quay, bàn ô ăn
         quan, ô chữ, chảo trứng…) để người chơi vẫn nhận ra game
         ngay từ cái nhìn đầu tiên. Đừng đổi chúng theo tông nền. */
      --gold-300: #FFE9A8;
      --gold-400: #FFD166;
      --gold-500: #EFA93A;
      --gold-600: #B0711C;

      --cream: #FFF4DC;
      --cream-dim: #E8D5B4;

      --jade: #3ECFAE;
      --violet: #A981FF;


      /* ---------- bộ chữ ---------- */
      --fx-display:
        "Anton",
        "Arial Narrow",
        Impact,
        sans-serif;

      --fx-body:
        "Be Vietnam Pro",
        "Segoe UI",
        system-ui,
        sans-serif;

      --fx-math:
        "Iowan Old Style",
        Palatino,
        "Palatino Linotype",
        Georgia,
        "Times New Roman",
        serif;

      --fx-mono:
        ui-monospace,
        SFMono-Regular,
        "SF Mono",
        Menlo,
        Consolas,
        monospace;
    }


    * {
      box-sizing: border-box;
    }


    body {
      margin: 0;

      min-height: 100%;

      overflow-x: hidden;

      font-family:
        var(--fx-body);

      color:
        var(--paper);

      background-color:
        var(--ink-900);

      background-image:
        radial-gradient(1200px 680px at 50% -16%,
          rgba(94, 231, 247, .16),
          transparent 64%),

        radial-gradient(780px 560px at 6% 8%,
          rgba(139, 124, 255, .18),
          transparent 62%),

        radial-gradient(760px 540px at 94% 16%,
          rgba(47, 198, 220, .12),
          transparent 62%),

        linear-gradient(168deg,
          var(--ink-700) 0%,
          var(--plum-700) 36%,
          var(--ink-800) 74%,
          var(--ink-900) 100%);

      background-attachment:
        fixed;

      padding-top:
        env(safe-area-inset-top, 0px);

      padding-bottom:
        env(safe-area-inset-bottom, 0px);
    }


    /* lưới toạ độ rất mờ — gợi giấy kẻ ô của dân toán */
    .bg-grid {
      position: fixed;

      inset: 0;

      pointer-events: none;

      z-index: 0;

      background-image:
        linear-gradient(to right,
          rgba(139, 124, 255, .11) 1px,
          transparent 1px),

        linear-gradient(to bottom,
          rgba(139, 124, 255, .11) 1px,
          transparent 1px);

      background-size:
        58px 58px;

      mask-image:
        radial-gradient(1100px 760px at 50% -4%,
          #000 0%,
          transparent 76%);

      -webkit-mask-image:
        radial-gradient(1100px 760px at 50% -4%,
          #000 0%,
          transparent 76%);
    }


    .vignette {
      position: fixed;

      inset: 0;

      pointer-events: none;

      z-index: 0;

      box-shadow:
        inset 0 0 220px 60px rgba(3, 5, 14, .74);
    }


    .wrap {
      position: relative;

      z-index: 1;

      max-width: 1120px;

      margin: 0 auto;

      padding-inline:
        16px;

      padding-block:
        28px 48px;
    }



    /* ============================================================
       ĐẦU TRANG
       ============================================================ */

    header {
      position: relative;

      text-align: center;

      margin-bottom: 20px;

      padding-top: 6px;
    }


    h1 {
      margin: 0;

      display: flex;

      align-items: center;

      justify-content: center;

      gap: .16em;

      line-height: .92;

      font-family:
        var(--fx-display);

      letter-spacing: .045em;

      font-size:
        clamp(34px, 8.6vw, 60px);
    }


    h1 .word {
      background:
        linear-gradient(180deg,
          #FFFFFF 0%,
          var(--cy-300) 44%,
          var(--cy-500) 100%);

      -webkit-background-clip:
        text;

      background-clip:
        text;

      color:
        transparent;

      filter:
        drop-shadow(0 0 20px rgba(94, 231, 247, .32));
    }


    .pi-mark {
      height: 1.02em;

      width: auto;

      flex: 0 0 auto;

      overflow: visible;

      filter:
        drop-shadow(0 0 16px rgba(94, 231, 247, .45));
    }


    header p {
      margin:
        10px auto 0;

      max-width: 44ch;

      font-size: 13.5px;

      line-height: 1.6;

      color:
        var(--paper-dim);

      opacity: .82;
    }



    /* ============================================================
       BỘ LỌC
       ============================================================ */

    .filters {
      display: none;
    }


    .js .filters {
      display: flex;

      flex-wrap: wrap;

      justify-content: center;

      gap: 8px;

      padding:
        2px 0 16px;
    }


    .chip {
      flex:
        0 0 auto;

      font-family:
        var(--fx-body);

      font-size: 13px;

      font-weight: 700;

      letter-spacing: .01em;

      white-space: nowrap;

      padding:
        9px 15px;

      border-radius:
        999px;

      cursor:
        pointer;

      color:
        var(--paper-dim);

      background:
        rgba(237, 243, 255, .05);

      border:
        1.5px solid rgba(94, 231, 247, .22);

      transition:
        background .16s,
        color .16s,
        border-color .16s;
    }


    .chip:hover {
      border-color:
        rgba(94, 231, 247, .5);
    }


    .chip[aria-pressed="true"] {
      color:
        #03151C;

      background:
        linear-gradient(180deg,
          #A5F0FA,
          var(--cy-400) 60%,
          #2FC6DC);

      border-color:
        var(--cy-500);

      box-shadow:
        0 3px 0 #116374;
    }


    .chip:focus-visible {
      outline:
        3px solid var(--cy-400);

      outline-offset:
        2px;
    }



    /* ============================================================
       LƯỚI GAME
       ============================================================ */

    .grid {
      list-style: none;

      margin: 0;

      padding: 0;

      display: grid;

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

      gap: 12px;
    }


    @media (min-width: 560px) {

      .grid {
        grid-template-columns:
          repeat(3, 1fr);

        gap: 14px;
      }

    }


    @media (min-width: 820px) {

      .grid {
        grid-template-columns:
          repeat(4, 1fr);

        gap: 16px;
      }

    }


    @media (min-width: 1040px) {

      .grid {
        grid-template-columns:
          repeat(5, 1fr);
      }

    }


    .tile {
      position: relative;
    }


    .tile[hidden] {
      display: none;
    }


    .tilelink {
      display: block;

      text-decoration: none;

      color: inherit;

      border-radius: 16px;

      overflow: hidden;

      border:
        1.5px solid rgba(94, 231, 247, .26);

      background:
        linear-gradient(180deg,
          rgba(28, 37, 78, .55),
          rgba(9, 13, 30, .9));

      box-shadow:
        0 10px 26px rgba(0, 0, 0, .42);

      transition:
        transform .2s cubic-bezier(.3, 1.1, .5, 1),
        border-color .2s,
        box-shadow .2s;
    }


    .tilelink:hover {
      transform:
        translateY(-4px);

      border-color:
        var(--cy-400);

      box-shadow:
        0 0 0 3px rgba(94, 231, 247, .16),
        0 16px 34px rgba(0, 0, 0, .55);
    }


    .tilelink:focus-visible {
      outline:
        3px solid var(--cy-400);

      outline-offset:
        3px;
    }



    /* ============================================================
       HÌNH MINH HỌA
       ============================================================ */

    .art {
      container-type: size;

      position: relative;

      aspect-ratio: 1;

      display: grid;

      place-items: center;

      background:
        linear-gradient(180deg,
          rgba(94, 231, 247, .13),
          rgba(6, 9, 22, .45));

      border-bottom:
        1px solid rgba(94, 231, 247, .2);

      overflow: hidden;
    }


    .art>* {
      transition:
        transform .3s cubic-bezier(.22, 1, .36, 1);
    }


    .tilelink:hover .art>* {
      transform:
        scale(1.06);
    }


    .label {
      padding:
        9px 10px 11px;

      min-height: 52px;

      display: grid;

      align-content: center;
    }


    .name {
      font-family:
        var(--fx-display);

      font-size:
        clamp(14px, 3.6vw, 17px);

      letter-spacing: .03em;

      line-height: 1.12;

      color:
        var(--cy-300);

      text-align: center;
    }


    @media (min-width: 560px) {

      .name {
        font-size: 17px;
      }

    }



    /* ============================================================
       NÚT THÔNG TIN
       ============================================================ */

    .info {
      position: absolute;

      top: 7px;

      right: 7px;

      z-index: 2;

      width: 30px;

      height: 30px;

      border-radius: 50%;

      display: grid;

      place-items: center;

      cursor: pointer;

      font-family:
        var(--fx-body);

      font-size: 14px;

      font-weight: 800;

      font-style: italic;

      color:
        var(--cy-300);

      background:
        rgba(8, 12, 28, .66);

      backdrop-filter:
        blur(3px);

      border:
        1.5px solid rgba(94, 231, 247, .4);

      transition:
        background .16s,
        color .16s,
        transform .16s;
    }


    .info:hover {
      background:
        var(--cy-400);

      color:
        #03151C;

      transform:
        scale(1.08);
    }


    .info:focus-visible {
      outline:
        3px solid var(--cy-400);

      outline-offset:
        2px;
    }


    .d-hidden {
      display: none;
    }



    /* ============================================================
       Ô CÒN NỮA
       ============================================================ */

    .soon .tilelink {
      border-style:
        dashed;

      border-color:
        rgba(237, 243, 255, .18);

      background:
        rgba(237, 243, 255, .03);

      cursor:
        default;

      pointer-events:
        none;
    }


    .soon .art {
      background:
        none;

      border-bottom-color:
        rgba(237, 243, 255, .12);
    }


    .soon .art b {
      font-family:
        var(--fx-display);

      font-size:
        clamp(15px, 4vw, 19px);

      letter-spacing:
        .04em;

      color:
        rgba(237, 243, 255, .42);
    }


    .soon .name {
      color:
        rgba(237, 243, 255, .35);
    }



    /* ============================================================
       POPUP GIỚI THIỆU
       ============================================================ */

    dialog {
      width:
        min(440px,
          calc(100vw - 32px));

      padding: 0;

      border:
        1.5px solid rgba(94, 231, 247, .35);

      border-radius:
        20px;

      background:
        linear-gradient(180deg,
          #1A2450,
          #080D1E 70%);

      color:
        var(--paper);

      box-shadow:
        0 30px 70px rgba(0, 0, 0, .7);
    }


    dialog::backdrop {
      background:
        rgba(4, 6, 16, .8);
    }


    .sheet-in {
      padding:
        22px 20px 20px;
    }


    .s-name {
      font-family:
        var(--fx-display);

      font-size: 26px;

      letter-spacing: .03em;

      line-height: 1.1;

      color:
        var(--cy-300);

      margin:
        0 34px 10px 0;
    }


    .s-desc {
      margin:
        0 0 14px;

      font-size: 14px;

      line-height: 1.65;

      color:
        var(--paper-dim);
    }


    .s-tags {
      display: flex;

      flex-wrap: wrap;

      gap: 6px;

      margin-bottom:
        18px;
    }


    .s-tags span {
      font-size: 10.5px;

      font-weight: 700;

      letter-spacing: .09em;

      text-transform:
        uppercase;

      padding:
        5px 10px;

      border-radius:
        999px;

      background:
        rgba(94, 231, 247, .13);

      border:
        1px solid rgba(94, 231, 247, .3);

      color:
        var(--cy-300);
    }


    .s-play {
      display: block;

      text-align: center;

      text-decoration: none;

      padding: 13px;

      border-radius:
        13px;

      font-family:
        var(--fx-display);

      font-size: 18px;

      letter-spacing: .08em;

      color:
        #03151C;

      background:
        linear-gradient(180deg,
          #A5F0FA,
          var(--cy-400) 45%,
          #2FC6DC);

      box-shadow:
        0 5px 0 #116374;
    }


    .s-close {
      position: absolute;

      top: 12px;

      right: 12px;

      width: 32px;

      height: 32px;

      border-radius:
        50%;

      cursor:
        pointer;

      font-size: 17px;

      line-height: 1;

      color:
        var(--paper-dim);

      background:
        rgba(237, 243, 255, .08);

      border:
        1px solid rgba(94, 231, 247, .25);
    }


    .s-close:hover {
      color:
        var(--paper);

      background:
        rgba(237, 243, 255, .16);
    }


    footer {
      margin-top:
        34px;

      text-align:
        center;

      font-size:
        12.5px;

      line-height:
        1.8;

      color:
        var(--paper-dim);

      opacity:
        .5;
    }



    

    /* ============================================================
       LỚP NỀN TOÁN HỌC
       ============================================================ */

    /* vòng tròn đồng tâm */
    .bg-rings {
      position: fixed;

      inset: 0;

      pointer-events: none;

      z-index: 0;

      background:
        repeating-radial-gradient(circle at 50% -8%,
          transparent 0 124px,
          rgba(94, 231, 247, .06) 124px 125.5px);

      mask-image:
        linear-gradient(to bottom,
          #000,
          transparent 66%);

      -webkit-mask-image:
        linear-gradient(to bottom,
          #000,
          transparent 66%);
    }


    /* π khổng lồ, rất mờ, nằm hẳn ngoài nền bên phải —
       cố tình KHÔNG đặt sau logo, để hai chữ π không chồng lên nhau */
    .pi-ghost {
      position: fixed;

      right: -6%;

      top: 30%;

      width:
        min(470px, 54vw);

      height: auto;

      pointer-events: none;

      z-index: 0;

      opacity: .05;

      fill: none;

      stroke: var(--cy-400);

      stroke-width: 14;

      stroke-linecap: round;

      stroke-linejoin: round;
    }


    /* đường sine chạy ngang phía dưới */
    .bg-wave {
      position: fixed;

      left: 0;

      bottom: 7%;

      width: 100%;

      height: 160px;

      pointer-events: none;

      z-index: 0;

      opacity: .5;
    }


    .bg-wave path {
      fill: none;

      stroke: var(--vi-400);

      stroke-width: 1.5;

      vector-effect:
        non-scaling-stroke;

      opacity: .35;
    }


    /* dãy số π trôi ngang phía trên tiêu đề.
       Nhãn "π =" đứng yên bên trái, chỉ phần số mới trôi —
       nếu để trôi hết thì người xem không đoán ra đó là số pi. */
    .digits {
      display: flex;

      align-items: center;

      gap: .55em;

      height: 15px;

      margin-bottom: 9px;
    }


    .digits em {
      flex: 0 0 auto;

      font-family:
        var(--fx-math);

      font-style: italic;

      font-size: 13px;

      line-height: 15px;

      color:
        var(--cy-400);

      opacity: .55;
    }


    .dz {
      flex: 1 1 auto;

      overflow: hidden;

      mask-image:
        linear-gradient(90deg,
          #000 0%,
          #000 58%,
          transparent 100%);

      -webkit-mask-image:
        linear-gradient(90deg,
          #000 0%,
          #000 58%,
          transparent 100%);
    }


    .digits b {
      display: inline-block;

      white-space: nowrap;

      font-family:
        var(--fx-mono);

      font-weight: 400;

      font-size: 11px;

      letter-spacing: .24em;

      line-height: 15px;

      color:
        var(--cy-400);

      opacity: .32;

      animation:
        drift 120s linear infinite;
    }


    @keyframes drift {
      to {
        transform:
          translateX(-50%);
      }
    }



    /* ============================================================
       QUỸ ĐẠO HIỆN RA KHI RÊ CHUỘT LÊN THẺ GAME
       ============================================================ */

    .art::after {
      content: "";

      position: absolute;

      inset: 13%;

      border-radius: 50%;

      border:
        1px dashed rgba(94, 231, 247, .26);

      opacity: 0;

      transform:
        scale(.8) rotate(0deg);

      transition:
        opacity .3s,
        transform .55s cubic-bezier(.22, 1, .36, 1);

      pointer-events: none;
    }


    .tilelink:hover .art::after {
      opacity: 1;

      transform:
        scale(1) rotate(32deg);
    }


    .soon .art::after {
      display: none;
    }



    /* ============================================================
       Ô CÒN NỮA — ĐỂ π THAY CHO CHỮ
       ============================================================ */

    .soon .art b {
      font-family:
        var(--fx-math);

      font-size:
        clamp(30px, 8vw, 44px);

      letter-spacing: .04em;

      color:
        rgba(165, 240, 250, .3);
    }



    /* ============================================================
       ĐUÔI TRANG
       ============================================================ */

    .pi-tail {
      display: inline-block;

      margin-top: 8px;

      font-family:
        var(--fx-mono);

      font-size: 11px;

      letter-spacing: .14em;

      color:
        var(--cy-400);

      opacity: .5;
    }


/* ============================================================
       AI LÀ TRIỆU PHÚ
       Dùng logo PNG thật thay vì logo CSS cũ
       ============================================================ */

    .altp-logo {
      width: 84%;

      height: 84%;

      object-fit:
        contain;

      filter:
        drop-shadow(0 0 3cqw rgba(169, 129, 255, .55)) drop-shadow(0 2cqw 4cqw rgba(0, 0, 0, .45));
    }



    /* ============================================================
       CHIẾC NÓN KỲ DIỆU
       ============================================================ */

    .wheelbox {
      position: relative;

      width: 62cqw;

      aspect-ratio: 1;
    }


    .wheel {
      width: 100%;

      height: 100%;

      border-radius: 50%;

      border:
        3cqw solid #8E5711;

      box-shadow:
        0 2cqw 5cqw rgba(0, 0, 0, .5);

      background:
        radial-gradient(circle,
          #FFE9A8 0 19%,
          transparent 19.5%),

        conic-gradient(#8E0E24 0deg 30deg,
          #F2B33C 30deg 60deg,

          #8E0E24 60deg 90deg,
          #3ECFAE 90deg 120deg,

          #8E0E24 120deg 150deg,
          #F2B33C 150deg 180deg,

          #A981FF 180deg 210deg,
          #F2B33C 210deg 240deg,

          #8E0E24 240deg 270deg,
          #F2B33C 270deg 300deg,

          #D62828 300deg 330deg,
          #F2B33C 330deg 360deg);

      animation:
        turn 14s linear infinite;
    }


    @keyframes turn {

      to {
        transform:
          rotate(360deg);
      }

    }


    .pin {
      position: absolute;

      top: -4cqw;

      left: 50%;

      transform:
        translateX(-50%);

      width: 0;

      height: 0;

      border-left:
        5cqw solid transparent;

      border-right:
        5cqw solid transparent;

      border-top:
        9cqw solid var(--gold-400);

      filter:
        drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .6));
    }



    /* ============================================================
       BẾP VIỆT ĐẠI CHIẾN
       ============================================================ */

    .bviet {
      position: relative;

      width: 82cqw;

      aspect-ratio: 1;

      display: grid;

      place-items: center;
    }


    .pan {
      position: relative;

      width: 60cqw;

      height: 60cqw;

      border-radius:
        50%;

      border:
        3cqw solid #17100C;

      background:
        radial-gradient(circle at 38% 32%,
          #514034,
          #2A1E17 68%);

      box-shadow:
        inset 0 0 7cqw rgba(0, 0, 0, .75),
        0 3cqw 6cqw rgba(0, 0, 0, .5);

      display: grid;

      place-items: center;
    }


    .pan::before {
      content: "";

      position: absolute;

      width: 30cqw;

      height: 6cqw;

      border-radius:
        3cqw;

      background:
        linear-gradient(180deg,
          #3A2A20,
          #1B130E);

      right:
        -26cqw;

      bottom:
        6cqw;

      transform:
        rotate(-18deg);
    }


    .egg {
      width: 34cqw;

      height: 30cqw;

      border-radius:
        52% 48% 46% 54%;

      background:
        radial-gradient(circle at 46% 44%,
          #F2B33C 0 20%,
          #FFF6E2 21%);

      box-shadow:
        0 0 2cqw rgba(0, 0, 0, .35);

      animation:
        sizzle 1.8s ease-in-out infinite;
    }


    @keyframes sizzle {

      50% {
        transform:
          translate(.6cqw, -.4cqw) rotate(1.5deg);
      }

    }


    .steam {
      position: absolute;

      bottom: 62%;

      width: 2.6cqw;

      height: 12cqw;

      border-radius:
        99px;

      background:
        linear-gradient(180deg,
          transparent,
          rgba(255, 244, 220, .5));

      filter:
        blur(.6cqw);

      animation:
        rise 2.6s ease-in-out infinite;
    }


    .steam.s1 {
      left: 34%;

      animation-delay:
        0s;
    }


    .steam.s2 {
      left: 48%;

      animation-delay:
        .5s;

      height: 16cqw;
    }


    .steam.s3 {
      left: 62%;

      animation-delay:
        1s;
    }


    @keyframes rise {

      0% {
        opacity: 0;

        transform:
          translateY(4cqw) scaleY(.6);
      }


      35% {
        opacity: .9;
      }


      100% {
        opacity: 0;

        transform:
          translateY(-12cqw) scaleY(1.15);
      }

    }



    /* ============================================================
       Ô ĂN QUAN
       ============================================================ */

    .oaq {
      width: 86cqw;

      aspect-ratio:
        190 / 74;

      display: grid;

      grid-template-columns:
        14cqw repeat(5, 1fr) 14cqw;

      grid-template-rows:
        1fr 1fr;

      gap: 1.4cqw;

      padding: 2.4cqw;

      border-radius:
        5cqw;

      background:
        linear-gradient(170deg,
          #3B2418,
          #2B1A12 70%,
          #1C110B);

      border:
        1px solid rgba(255, 209, 102, .3);

      box-shadow:
        inset 0 1cqw 4cqw rgba(0, 0, 0, .6),
        0 2cqw 5cqw rgba(0, 0, 0, .45);
    }


    .oaq i {
      border-radius:
        1.8cqw;

      background:
        rgba(0, 0, 0, .3);

      border:
        1px solid rgba(255, 233, 168, .18);

      display: grid;

      place-items: center;
    }


    .oaq i.q {
      grid-row:
        1 / 3;

      border-radius:
        99px;

      border-color:
        rgba(255, 209, 102, .4);
    }


    .oaq i.q1 {
      grid-column: 1;
    }


    .oaq i.q2 {
      grid-column: 7;
    }


    .oaq i.q::after {
      content: "";

      width: 7cqw;

      height: 7cqw;

      border-radius:
        50%;

      background:
        radial-gradient(circle at 32% 28%,
          #FFF3C9,
          var(--gold-400) 48%,
          #8C5A0E);

      box-shadow:
        0 0 3cqw rgba(255, 209, 102, .65);
    }


    .oaq i.d::after {
      content: "";

      width: 3.4cqw;

      height: 3.4cqw;

      border-radius:
        50%;

      background:
        radial-gradient(circle at 32% 28%,
          #F2E4CB,
          #B9A183 55%,
          #6E5B45);

      animation:
        hop 2.6s ease-in-out infinite;
    }


    .oaq i:nth-child(3)::after {
      animation-delay: .18s;
    }


    .oaq i:nth-child(4)::after {
      animation-delay: .36s;
    }


    .oaq i:nth-child(5)::after {
      animation-delay: .54s;
    }


    .oaq i:nth-child(6)::after {
      animation-delay: .72s;
    }


    .oaq i:nth-child(9)::after {
      animation-delay: .3s;
    }


    .oaq i:nth-child(10)::after {
      animation-delay: .48s;
    }


    .oaq i:nth-child(11)::after {
      animation-delay: .66s;
    }


    .oaq i:nth-child(12)::after {
      animation-delay: .84s;
    }


    @keyframes hop {

      0%,
      72%,
      100% {
        transform:
          translateY(0);
      }


      80% {
        transform:
          translateY(-2.5cqw);
      }


      88% {
        transform:
          translateY(0);
      }

    }



    /* ============================================================
       Ô CHỮ BÍ MẬT
       ============================================================ */

    .xword {
      display: grid;

      grid-template-columns:
        repeat(5, 12cqw);

      gap: 2.4cqw;
    }


    .xword i {
      width: 12cqw;

      height: 12cqw;

      border-radius:
        3cqw;

      background:
        rgba(255, 244, 220, .12);

      border:
        1px solid rgba(255, 209, 102, .28);
    }


    .xword i.k {
      background:
        linear-gradient(180deg,
          #FFE9A8,
          var(--gold-400));

      border-color:
        var(--gold-500);

      box-shadow:
        0 1cqw 2cqw rgba(0, 0, 0, .45);

      animation:
        kglow 2.6s ease-in-out infinite;
    }


    .xword i.off {
      opacity: 0;

      border-color:
        transparent;

      background:
        none;
    }


    @keyframes kglow {

      50% {
        filter:
          brightness(1.18);
      }

    }



    /* ============================================================
       CẢ TIN
       ============================================================ */

    .rulecard {
      position: relative;

      width: 58cqw;

      padding:
        7cqw 6.5cqw 8cqw;

      background:
        #E7E2D3;

      border:
        1px solid #B9B2A0;

      box-shadow:
        0 2cqw 5cqw rgba(0, 0, 0, .5);

      transform:
        rotate(-2.5deg);
    }


    .rl-h {
      display: block;

      font-size: 4cqw;

      font-weight: 800;

      letter-spacing: .2em;

      text-transform:
        uppercase;

      color:
        #7A7364;

      margin-bottom:
        4.5cqw;
    }


    .rl1,
    .rl2,
    .rl3 {
      display: block;

      height: 2.6cqw;

      border-radius:
        1cqw;

      background:
        #8E887A;

      margin-bottom:
        2.6cqw;
    }


    .rl2 {
      width: 84%;
    }


    .rl3 {
      width: 56%;

      margin-bottom: 0;
    }


    .strike {
      position: absolute;

      left: 5cqw;

      top: 58%;

      height: 1.3cqw;

      width: 0;

      background:
        #C0271D;

      box-shadow:
        0 0 2cqw rgba(192, 39, 29, .85);

      animation:
        strike 3.8s ease-in-out infinite;
    }


    @keyframes strike {

      0%,
      14% {
        width: 0;

        opacity: 0;
      }


      24% {
        opacity: 1;
      }


      52%,
      84% {
        width:
          calc(100% - 10cqw);

        opacity: 1;
      }


      100% {
        width:
          calc(100% - 10cqw);

        opacity: 0;
      }

    }



    /* ============================================================
       GIẢM CHUYỂN ĐỘNG
       ============================================================ */

    @media (prefers-reduced-motion: reduce) {

      * {
        animation:
          none !important;

        transition:
          none !important;
      }

    }


/* ============================================================
   π GAMES — BRAND POLISH
   ============================================================ */

.brand-tagline {
  margin-top: 10px;
  font-family: var(--fx-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .34em;
  color: var(--cy-300);
  text-transform: uppercase;
  opacity: .78;
  text-shadow: 0 0 16px rgba(94, 231, 247, .26);
}

.brand-tagline span {
  color: var(--vi-300);
  margin-inline: .24em;
}

header::before,
header::after {
  content: "";
  position: absolute;
  top: 54px;
  width: 112px;
  height: 72px;
  pointer-events: none;
  opacity: .12;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0 25px,
      var(--cy-400) 26px 27px,
      transparent 28px
    ),
    linear-gradient(
      30deg,
      transparent 48.5%,
      var(--vi-400) 49% 50%,
      transparent 50.5%
    );
}

header::before {
  left: max(0px, calc(50% - 370px));
  transform: rotate(-12deg);
}

header::after {
  right: max(0px, calc(50% - 370px));
  transform: rotate(12deg) scaleX(-1);
}


/* ============================================================
   MOBILE CATEGORY MENU
   ============================================================ */

.mobile-filter {
  display: none;
  position: relative;
  z-index: 8;
  padding-bottom: 14px;
}

.filter-trigger {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 13px;
  border: 1.5px solid rgba(94, 231, 247, .32);
  border-radius: 16px;
  color: var(--paper);
  background:
    linear-gradient(
      180deg,
      rgba(31, 47, 92, .86),
      rgba(10, 15, 34, .92)
    );
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  text-align: left;
}

.filter-trigger:focus-visible {
  outline: 3px solid var(--cy-400);
  outline-offset: 3px;
}

.filter-trigger-icon {
  width: 34px;
  height: 34px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(94, 231, 247, .11);
  border: 1px solid rgba(94, 231, 247, .18);
}

.filter-trigger-icon span {
  display: block;
  height: 2px;
  border-radius: 99px;
  background: var(--cy-300);
}

.filter-trigger-icon span:nth-child(2) {
  width: 70%;
}

.filter-trigger-copy {
  display: grid;
  gap: 1px;
}

.filter-trigger-copy small {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  opacity: .72;
}

.filter-trigger-copy strong {
  font-size: 13.5px;
  color: var(--cy-200);
}

.filter-chevron {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  color: var(--cy-300);
  transition: transform .18s ease;
}

.filter-trigger[aria-expanded="true"] .filter-chevron {
  transform: rotate(180deg);
}

.filter-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 7px;
  border-radius: 16px;
  border: 1.5px solid rgba(94, 231, 247, .34);
  background:
    linear-gradient(
      180deg,
      rgba(25, 36, 75, .98),
      rgba(7, 11, 26, .99)
    );
  box-shadow:
    0 22px 52px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(139, 124, 255, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform-origin: top;
}

.filter-menu:not([hidden]) {
  animation: filterMenuIn .16s ease-out;
}

@keyframes filterMenuIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(.985);
  }

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

.filter-option {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  font-family: var(--fx-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--paper-dim);
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.filter-option:hover,
.filter-option:focus-visible {
  color: var(--paper);
  background: rgba(94, 231, 247, .09);
  outline: none;
}

.filter-option.is-active {
  color: #06151B;
  background:
    linear-gradient(
      180deg,
      var(--cy-300),
      var(--cy-400)
    );
}

.filter-check {
  opacity: 0;
  font-weight: 900;
}

.filter-option.is-active .filter-check {
  opacity: 1;
}


/* ============================================================
   RESPONSIVE REFINEMENTS
   ============================================================ */

@media (max-width: 639px) {
  .js .filters {
    display: none;
  }

  .js .mobile-filter {
    display: block;
  }

  .wrap {
    padding-inline: 12px;
    padding-block: 18px 40px;
  }

  header {
    margin-bottom: 14px;
    padding-top: 2px;
  }

  header::before,
  header::after {
    display: none;
  }

  .digits {
    margin-inline: 4px;
    margin-bottom: 7px;
  }

  h1 {
    font-size: clamp(35px, 12vw, 50px);
  }

  .brand-tagline {
    margin-top: 8px;
    font-size: 8.5px;
    letter-spacing: .27em;
  }

  header p {
    margin-top: 8px;
    max-width: 34ch;
    font-size: 12.5px;
    line-height: 1.55;
  }

  .grid {
    gap: 10px;
  }

  .tilelink {
    border-radius: 15px;
  }

  .label {
    min-height: 50px;
    padding: 8px 7px 10px;
  }

  .name {
    font-size: clamp(13px, 3.9vw, 16px);
  }

  .info {
    top: 6px;
    right: 6px;
    width: 29px;
    height: 29px;
  }

  .bg-wave {
    opacity: .3;
  }

  .pi-ghost {
    opacity: .035;
    right: -26%;
    top: 37%;
    width: 76vw;
  }
}

@media (min-width: 640px) {
  .mobile-filter {
    display: none !important;
  }
}


/* ============================================================
   π GAMES — FULL VISUAL REDESIGN
   Bản này cố tình kéo giao diện gần mockup neon/toán học hơn.
   ============================================================ */

:root {
  --hero-cyan: #58E7FF;
  --hero-blue: #2E7CFF;
  --hero-violet: #8B78FF;
  --hero-magenta: #C66BFF;
}

body {
  background-color: #040711;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(43, 115, 255, .22), transparent 28%),
    radial-gradient(circle at 87% 24%, rgba(107, 76, 255, .20), transparent 30%),
    radial-gradient(circle at 73% 80%, rgba(198, 107, 255, .11), transparent 28%),
    linear-gradient(180deg, #07142E 0%, #081633 36%, #081024 62%, #050812 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    radial-gradient(circle, rgba(88, 231, 255, .70) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(182, 113, 255, .62) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .55) 0 .8px, transparent 1.4px);
  background-size: 190px 190px, 260px 260px, 330px 330px;
  background-position: 12px 8px, 100px 70px, 40px 130px;
  opacity: .28;
}

body::after {
  background:
    radial-gradient(850px 210px at 50% 100%, rgba(31, 134, 255, .16), transparent 70%);
}

.bg-grid {
  background-image:
    linear-gradient(to right, rgba(88, 231, 255, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(88, 231, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 52%, transparent 92%);
  -webkit-mask-image:
    linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 52%, transparent 92%);
}

.bg-rings {
  opacity: .58;
}

.vignette {
  box-shadow:
    inset 0 0 240px 50px rgba(2, 4, 13, .72);
}

.floor-glow {
  position: fixed;
  left: -5vw;
  right: -5vw;
  bottom: -90px;
  height: 250px;
  z-index: 0;
  pointer-events: none;
  opacity: .7;
  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      transparent 0 58px,
      rgba(65, 153, 255, .22) 59px 60px,
      transparent 61px 116px
    );
  transform: perspective(300px) rotateX(58deg);
  transform-origin: center bottom;
}

.wrap {
  max-width: 1280px;
  padding-inline: 18px;
  padding-block: 26px 56px;
}

.hero {
  position: relative;
  min-height: 245px;
  margin-bottom: 4px;
  padding-top: 0;
  display: grid;
  align-items: start;
  justify-items: center;
  overflow: visible;
}

.hero::before,
.hero::after {
  display: none;
}

.hero-center {
  position: relative;
  z-index: 3;
  width: min(600px, 100%);
  margin-inline: auto;
  padding-top: 32px;
}

.hero h1 {
  font-size: clamp(52px, 6.4vw, 88px);
  gap: .12em;
  letter-spacing: .03em;
  filter: drop-shadow(0 0 30px rgba(70, 199, 255, .16));
}

.hero h1 .word {
  background:
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #D9F7FF 22%,
      #7AE4FF 59%,
      #54C9F3 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 16px rgba(88, 231, 255, .42))
    drop-shadow(0 5px 0 rgba(15, 44, 89, .25));
}

.hero .pi-mark {
  height: 1.02em;
  filter:
    drop-shadow(0 0 18px rgba(88, 231, 255, .55))
    drop-shadow(0 0 34px rgba(139, 120, 255, .24));
}

.brand-tagline {
  margin-top: 12px;
  font-size: 10.5px;
  letter-spacing: .40em;
  color: #A9F6FF;
  opacity: .95;
  text-shadow: 0 0 18px rgba(88, 231, 255, .50);
}

.hero p {
  max-width: 50ch;
  margin-top: 12px;
  color: #C6D3EE;
  font-size: 14px;
  line-height: 1.65;
  opacity: .88;
}

.digits {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 18px;
  margin: 0;
  padding-inline: 2px;
}

.digits em {
  font-size: 12px;
  color: #68E4FF;
  opacity: .72;
}

.digits b {
  font-size: 10px;
  color: #56DDF8;
  opacity: .40;
  letter-spacing: .28em;
}

.hero-art {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero-art-left {
  left: 0;
  top: 36px;
  width: 31%;
  height: 210px;
}

.hero-pi {
  position: absolute;
  left: -20px;
  top: -8px;
  width: min(240px, 20vw);
  height: auto;
  overflow: visible;
  opacity: .40;
  filter:
    drop-shadow(0 0 12px rgba(88, 231, 255, .45))
    drop-shadow(0 0 36px rgba(139, 120, 255, .26));
}

.hero-pi path {
  fill: none;
  stroke: url(#heroPiStroke);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-pi-digits {
  position: absolute;
  left: 105px;
  top: 112px;
  width: 290px;
  transform: rotate(10deg);
  font-family: var(--fx-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: #70DDF4;
  opacity: .30;
  white-space: nowrap;
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(95, 226, 255, .23);
  border-radius: 50%;
  transform: rotate(-17deg);
}

.orbit-a {
  left: 36px;
  top: 42px;
  width: 205px;
  height: 72px;
}

.orbit-b {
  left: 58px;
  top: 62px;
  width: 175px;
  height: 115px;
  transform: rotate(27deg);
  border-color: rgba(166, 112, 255, .18);
}

.hero-art-right {
  right: 0;
  top: 31px;
  width: 31%;
  height: 220px;
}

.math-board {
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: .72;
}

.math-grid path {
  fill: none;
  stroke: rgba(89, 193, 255, .10);
  stroke-width: 1;
}

.math-axes path,
.math-circle,
.math-radius,
.math-triangle,
.math-triangle-inner,
.math-wave {
  fill: none;
  stroke: rgba(80, 203, 255, .46);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.math-triangle,
.math-triangle-inner {
  stroke: rgba(112, 128, 255, .42);
}

.math-wave {
  stroke: rgba(116, 129, 255, .56);
}

.math-dot {
  fill: #5AE9FF;
  filter: drop-shadow(0 0 5px rgba(90, 233, 255, .75));
}

.math-dot-2 {
  fill: #8D8BFF;
}

.math-board text {
  fill: rgba(102, 189, 255, .36);
  font-family: var(--fx-math);
  font-style: italic;
  font-size: 15px;
}

.js .filters {
  position: relative;
  z-index: 5;
  gap: 9px;
  padding: 5px 0 18px;
}

.chip {
  min-width: 88px;
  padding: 10px 17px;
  color: #C0CAE3;
  background:
    linear-gradient(180deg, rgba(35, 48, 90, .74), rgba(18, 24, 52, .80));
  border-color: rgba(107, 183, 255, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.chip:hover {
  color: #ECF9FF;
  border-color: rgba(88, 231, 255, .68);
  background:
    linear-gradient(180deg, rgba(43, 65, 119, .84), rgba(20, 30, 64, .90));
}

.chip[aria-pressed="true"] {
  color: #031720;
  background:
    linear-gradient(180deg, #A9F7FF 0%, #63E7F6 50%, #33BDD5 100%);
  border-color: #67E7F5;
  box-shadow:
    0 4px 0 #0B6071,
    0 0 22px rgba(88, 231, 255, .30);
}

.grid {
  position: relative;
  z-index: 4;
  gap: 14px;
}

.tilelink {
  border-radius: 18px;
  border: 1.5px solid rgba(72, 195, 255, .38);
  background:
    linear-gradient(180deg, rgba(24, 53, 101, .80), rgba(7, 13, 31, .94));
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .38),
    inset 0 1px 0 rgba(255, 255, 255, .025);
}

.tilelink:hover {
  transform: translateY(-5px) scale(1.01);
  border-color: #5CE7FF;
  box-shadow:
    0 0 0 1px rgba(92, 231, 255, .22),
    0 0 26px rgba(58, 182, 255, .22),
    0 18px 38px rgba(0, 0, 0, .54);
}

.art {
  background:
    radial-gradient(circle at 50% 20%, rgba(75, 164, 255, .20), transparent 40%),
    linear-gradient(180deg, rgba(25, 62, 113, .52), rgba(6, 12, 28, .68));
  border-bottom-color: rgba(72, 195, 255, .32);
}

.art::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.025), transparent 42%);
}

.label {
  min-height: 54px;
  background:
    linear-gradient(180deg, rgba(5, 12, 29, .70), rgba(5, 10, 25, .94));
}

.name {
  color: #B8F4FF;
  text-shadow: 0 0 12px rgba(88, 231, 255, .22);
}

.info {
  border-color: rgba(88, 231, 255, .52);
  background: rgba(4, 14, 32, .72);
  box-shadow: 0 0 16px rgba(88, 231, 255, .08);
}

.info:hover {
  box-shadow: 0 0 18px rgba(88, 231, 255, .30);
}

.soon .tilelink {
  border-color: rgba(155, 176, 214, .22);
  background:
    linear-gradient(180deg, rgba(18, 26, 51, .52), rgba(7, 11, 24, .78));
}

.soon .art b {
  color: rgba(150, 207, 232, .46);
  text-shadow: 0 0 18px rgba(88, 231, 255, .12);
}

.bg-wave {
  bottom: 4%;
  height: 210px;
  opacity: .72;
}

.bg-wave path {
  stroke: url(#unused);
  stroke: rgba(119, 103, 255, .48);
  stroke-width: 1.6;
}

.pi-ghost {
  right: -4%;
  top: 48%;
  width: min(400px, 37vw);
  opacity: .035;
  stroke-width: 11;
}

footer {
  position: relative;
  z-index: 3;
}


/* Desktop spacing closer to the generated concept */
@media (min-width: 1040px) {
  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }

  .art {
    aspect-ratio: 1.04;
  }

  .label {
    min-height: 56px;
  }

  .name {
    font-size: 16px;
  }
}


/* Mobile: keep it clean; hide the heavy hero artwork */
@media (max-width: 639px) {
  body {
    background-image:
      radial-gradient(circle at 18% 12%, rgba(55, 112, 255, .20), transparent 34%),
      radial-gradient(circle at 86% 20%, rgba(138, 89, 255, .16), transparent 36%),
      linear-gradient(180deg, #08142E 0%, #09142A 42%, #050812 100%);
  }

  .wrap {
    padding-inline: 12px;
    padding-block: 14px 42px;
  }

  .hero {
    min-height: auto;
    margin-bottom: 7px;
  }

  .hero-center {
    padding-top: 26px;
  }

  .hero-art {
    display: none;
  }

  .digits {
    top: 0;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .brand-tagline {
    font-size: 8px;
    letter-spacing: .28em;
  }

  .hero p {
    max-width: 32ch;
    font-size: 12px;
  }

  .hero-break {
    display: none;
  }

  .floor-glow {
    opacity: .36;
  }

  .grid {
    gap: 10px;
  }

  .tilelink {
    border-radius: 16px;
  }
}


/* ============================================================
   π GAMES V3 — NEON / COSMIC HYBRID
   ============================================================ */

body {
  background:
    radial-gradient(900px 430px at 50% 3%, rgba(32, 112, 255, .24), transparent 72%),
    radial-gradient(730px 510px at 7% 33%, rgba(54, 108, 255, .23), transparent 70%),
    radial-gradient(780px 560px at 94% 35%, rgba(126, 71, 255, .22), transparent 71%),
    radial-gradient(780px 500px at 72% 88%, rgba(211, 75, 255, .10), transparent 73%),
    linear-gradient(180deg, #03112B 0%, #061636 37%, #071027 68%, #040711 100%);
}

.ambient-decor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .13;
  mix-blend-mode: screen;
}

.aurora-cyan {
  left: -15vw;
  top: 17vh;
  background: #1bc8ff;
}

.aurora-violet {
  right: -14vw;
  top: 24vh;
  background: #914cff;
}

.star-layer {
  position: absolute;
  inset: -10%;
  background-repeat: repeat;
  mix-blend-mode: screen;
}

.star-layer-a {
  opacity: .55;
  background-image:
    radial-gradient(circle, rgba(191,251,255,.95) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(92,225,255,.85) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(180,123,255,.88) 0 1px, transparent 1.6px);
  background-size: 137px 137px, 223px 223px, 311px 311px;
  background-position: 17px 29px, 79px 13px, 31px 141px;
  animation: starDriftA 36s linear infinite;
}

.star-layer-b {
  opacity: .24;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 .8px, transparent 1.4px),
    radial-gradient(circle, rgba(101,177,255,.85) 0 .7px, transparent 1.4px);
  background-size: 83px 83px, 173px 173px;
  background-position: 4px 14px, 50px 80px;
  animation: starDriftB 52s linear infinite;
}

@keyframes starDriftA {
  to { transform: translate3d(-70px, 40px, 0); }
}

@keyframes starDriftB {
  to { transform: translate3d(55px, -35px, 0); }
}

.crystal {
  position: absolute;
  width: 98px;
  height: auto;
  opacity: .66;
  filter: drop-shadow(0 0 18px rgba(61, 215, 255, .34));
  animation: crystalFloat 7s ease-in-out infinite;
}

.crystal-left {
  left: 1.3vw;
  top: 60vh;
  transform: rotate(-15deg);
}

.crystal-right {
  right: 2.8vw;
  top: 58vh;
  width: 76px;
  animation-delay: -2.1s;
}

.crystal-small {
  right: 14vw;
  bottom: 8vh;
  width: 48px;
  opacity: .48;
  animation-delay: -4.2s;
}

@keyframes crystalFloat {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -12px; rotate: 3deg; }
}

.neon-floor {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: -72px;
  height: 260px;
  perspective: 620px;
  opacity: .85;
}

.neon-floor::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 110px;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(41,155,255,.28) 27%, rgba(92,231,255,.46) 50%, rgba(191,74,255,.34) 75%, transparent 94%);
  filter: blur(28px);
}

.floor-ring {
  position: absolute;
  left: 50%;
  border: 1.4px solid rgba(65, 177, 255, .30);
  border-radius: 50%;
  transform: translateX(-50%) rotateX(72deg);
  box-shadow: 0 0 20px rgba(61, 187, 255, .12);
}

.floor-ring-1 {
  width: 36vw;
  height: 150px;
  bottom: -1px;
}

.floor-ring-2 {
  width: 58vw;
  height: 220px;
  bottom: -30px;
  border-color: rgba(127, 93, 255, .26);
}

.floor-ring-3 {
  width: 84vw;
  height: 310px;
  bottom: -78px;
  border-color: rgba(220, 70, 255, .21);
}

.hero {
  min-height: 292px;
  isolation: isolate;
}

.hero-galaxy-pi {
  position: absolute;
  z-index: 1;
  left: -62px;
  top: 4px;
  width: clamp(260px, 31vw, 430px);
  opacity: .88;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 18px rgba(68, 211, 255, .18))
    drop-shadow(0 0 44px rgba(105, 94, 255, .18));
}

.hero-math-art {
  position: absolute;
  z-index: 1;
  right: -18px;
  top: 16px;
  width: clamp(300px, 37vw, 520px);
  opacity: .76;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 24px rgba(72, 152, 255, .12));
}

.hero-center {
  padding-top: 42px;
}

.logo-aura {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 490px;
  height: 180px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(119, 206, 255, .24), rgba(121, 83, 255, .12) 42%, transparent 72%);
  filter: blur(18px);
  z-index: -1;
}

.hero h1 {
  position: relative;
  font-size: clamp(62px, 7vw, 96px);
  filter:
    drop-shadow(0 0 10px rgba(100, 234, 255, .42))
    drop-shadow(0 0 30px rgba(94, 118, 255, .20));
}

.hero h1 .word {
  background:
    linear-gradient(
      105deg,
      #7EF0FF 0%,
      #CFFBFF 23%,
      #D9C2FF 48%,
      #FFB8F3 66%,
      #6FEAFF 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter:
    drop-shadow(0 0 11px rgba(102, 231, 255, .52))
    drop-shadow(0 0 28px rgba(167, 108, 255, .28));
}

.hero .pi-mark {
  filter:
    drop-shadow(0 0 9px rgba(99, 235, 255, .72))
    drop-shadow(0 0 24px rgba(156, 91, 255, .38));
}

.hero-orbit-system {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 96px;
  width: 560px;
  height: 120px;
  transform: translateX(-50%);
  pointer-events: none;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(100, 223, 255, .33);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.orbit-1 {
  width: 545px;
  height: 86px;
}

.orbit-2 {
  width: 482px;
  height: 112px;
  border-color: rgba(177, 106, 255, .20);
  transform: translate(-50%, -50%) rotate(9deg);
}

.orbit-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 18px currentColor, 0 0 36px currentColor;
}

.orbit-dot-a {
  left: 17px;
  top: 58px;
  color: #ffbf47;
  background: #ffd66a;
  animation: orbitDotA 6.8s ease-in-out infinite;
}

.orbit-dot-b {
  right: 24px;
  top: 32px;
  color: #5ceeff;
  background: #8ff5ff;
  animation: orbitDotB 8.3s ease-in-out infinite;
}

@keyframes orbitDotA {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(510px,-34px); }
}

@keyframes orbitDotB {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(-470px,56px); }
}

.brand-tagline {
  color: #B9F7FF;
  text-shadow:
    0 0 12px rgba(103, 233, 255, .55),
    0 0 28px rgba(128, 113, 255, .30);
}

.hero p {
  color: #D2DCF3;
}

.js .filters {
  padding-top: 8px;
  padding-bottom: 20px;
}

.chip {
  border-color: rgba(102, 169, 255, .45);
  background:
    linear-gradient(180deg, rgba(31, 50, 95, .76), rgba(14, 20, 47, .88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(78, 121, 255, .04);
}

.chip[aria-pressed="true"] {
  background:
    linear-gradient(180deg, #A7FBFF 0%, #55E7F5 55%, #25BFD6 100%);
  box-shadow:
    0 4px 0 #0D6170,
    0 0 16px rgba(74, 228, 247, .38),
    0 0 34px rgba(67, 177, 255, .22);
}

.grid {
  gap: 16px;
}

.tilelink {
  position: relative;
  border-color: transparent;
  background:
    linear-gradient(#08142F, #060C1C) padding-box,
    linear-gradient(145deg, rgba(83, 222, 255, .86), rgba(82, 126, 255, .45) 48%, rgba(187, 90, 255, .68)) border-box;
  border: 1.6px solid transparent;
  box-shadow:
    0 18px 36px rgba(0,0,0,.38),
    0 0 0 1px rgba(72, 173, 255, .05);
}

.tilelink::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: .0;
  box-shadow:
    0 0 18px rgba(73, 214, 255, .28),
    0 0 38px rgba(115, 93, 255, .20);
  transition: opacity .22s ease;
}

.tilelink:hover::after {
  opacity: 1;
}

.art {
  background:
    radial-gradient(circle at 50% 44%, rgba(69, 158, 255, .22), transparent 40%),
    radial-gradient(circle at 50% 110%, rgba(124, 75, 255, .12), transparent 48%),
    linear-gradient(180deg, rgba(22, 52, 100, .70), rgba(5, 11, 28, .82));
}

.art::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(68, 213, 255, .12), transparent 66%);
  filter: blur(10px);
  opacity: .75;
}

.tilelink:hover .art::before {
  opacity: 1;
  background: radial-gradient(circle, rgba(77, 219, 255, .19), rgba(141, 79, 255, .06) 52%, transparent 69%);
}

.label {
  background:
    linear-gradient(180deg, rgba(5, 12, 31, .74), rgba(4, 9, 23, .97));
}

.name {
  color: #C4F8FF;
  text-shadow:
    0 0 8px rgba(82, 225, 255, .22),
    0 0 18px rgba(102, 128, 255, .10);
}

.info {
  border-color: rgba(91, 230, 255, .72);
  color: #BDF8FF;
  box-shadow:
    0 0 12px rgba(74, 220, 255, .12),
    inset 0 0 10px rgba(66, 148, 255, .08);
}

.bg-wave {
  opacity: .95;
}

.bg-wave path {
  stroke: rgba(127, 98, 255, .58);
  filter: drop-shadow(0 0 7px rgba(93, 122, 255, .22));
}

footer {
  text-shadow: 0 0 16px rgba(70, 197, 255, .08);
}


/* -------- Mobile: calmer but still branded -------- */
@media (max-width: 639px) {
  .ambient-decor .crystal,
  .hero-galaxy-pi,
  .hero-math-art,
  .hero-orbit-system {
    display: none;
  }

  .star-layer-a {
    opacity: .32;
  }

  .star-layer-b {
    opacity: .15;
  }

  .neon-floor {
    opacity: .48;
    height: 180px;
  }

  .hero {
    min-height: auto;
  }

  .hero-center {
    padding-top: 27px;
  }

  .logo-aura {
    width: 320px;
    height: 118px;
    opacity: .72;
  }

  .hero h1 {
    font-size: clamp(40px, 12.5vw, 56px);
  }

  .brand-tagline {
    font-size: 8px;
    letter-spacing: .26em;
  }

  .grid {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .star-layer,
  .crystal,
  .orbit-dot {
    animation: none !important;
  }
}


/* ============================================================
   π GAMES V4 — HERO GỌN HƠN
   ============================================================ */

.brand-tagline {
  margin-top: 13px;
  font-size: 12px;
  letter-spacing: .34em;
}

.hero {
  min-height: 238px;
}

.hero-center {
  padding-top: 42px;
}

@media (max-width: 639px) {
  .brand-tagline {
    margin-top: 9px;
    font-size: 9px;
    letter-spacing: .24em;
  }

  .hero {
    min-height: auto;
  }
}


/* ============================================================
   π GAMES V5 — QUỸ ĐẠO ELLIPSE CHÍNH XÁC
   ============================================================ */

.hero-orbit-system {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 95px;
  width: 560px;
  height: 120px;
  transform: translateX(-50%);
  pointer-events: none;
  overflow: visible;
}

/* Vô hiệu các style animation cũ cho orbit div/dot nếu còn trong CSS. */
.hero-orbit-system .orbit,
.hero-orbit-system .orbit-dot {
  display: none !important;
}

.orbit-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.orbit-line-a {
  stroke: rgba(100, 223, 255, .34);
  stroke-width: 1;
}

.orbit-line-b {
  stroke: rgba(177, 106, 255, .22);
  stroke-width: 1;
}

.orbit-moving-dot-gold {
  opacity: .98;
}

.orbit-moving-dot-cyan {
  opacity: .98;
}

@media (max-width: 639px) {
  .hero-orbit-system {
    display: none;
  }
}


/* ============================================================
   π GAMES V7 — FIX LOGO CARD SIZE
   ============================================================ */

.art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.game-logo {
  position: relative;
  z-index: 1;

  display: block;

  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;

  object-fit: contain;
  object-position: center;

  margin: auto;

  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, .34))
    drop-shadow(0 0 10px rgba(91, 218, 255, .10));

  transform: translateZ(0) scale(1);

  transition:
    transform .28s cubic-bezier(.22, 1, .36, 1),
    filter .28s ease;
}

/* Không để rule .art > * cũ làm ảnh phóng sai ngoài card. */
.art > .game-logo {
  width: 88%;
  height: 88%;
  max-width: 88%;
  max-height: 88%;
}

.tilelink:hover .game-logo {
  transform: translateY(-2px) scale(1.04);

  filter:
    drop-shadow(0 12px 18px rgba(0, 0, 0, .38))
    drop-shadow(0 0 16px rgba(91, 218, 255, .20))
    drop-shadow(0 0 28px rgba(144, 93, 255, .12));
}

@media (max-width: 639px) {
  .game-logo,
  .art > .game-logo {
    width: 84%;
    height: 84%;
    max-width: 84%;
    max-height: 84%;
  }
}