@font-face {
    font-family: ElmSans;
    src: url(/static/fonts/ElmsSans-Black.ttf) format("truetype");
}

:root {
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.26);
  --text-dim: rgba(255, 255, 255, 0.7);
}

body {
    font-family: ElmSans, sans-serif !important;
    background-color: #0f0f0f;
    color: #ffffff !important;
    margin: 0;
    padding: 0;
}

.card-link {
    text-decoration: none !important;
    color: #ffffff;
}

/* ── Foreground layout ── */
    .page {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 3rem 1.25rem 5rem;
      max-width: 680px;
      margin: 0 auto;
    }

    /* ── Dragon avatar ring ── */
    .avatar-wrap {
      position: relative;
      width: 140px;
      height: 140px;
      margin-bottom: 1.5rem;
    }

    .avatar-ring {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: conic-gradient(
        var(--green-glow) 0deg,
        var(--green-mid) 90deg,
        var(--gold) 180deg,
        var(--green-mid) 270deg,
        var(--green-glow) 360deg
      );
      animation: spin 6s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .avatar-ring::after {
      content: '';
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: var(--green-deep);
    }

    .avatar-inner {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      overflow: hidden;
    }

    .avatar-inner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
    }

    .badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 1.5rem;
    }

    .badge-noodl {
        background-color: #f63d3d;
        color: #fff !important;
    }

    .links {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin-bottom: 1.5rem;
    }

    .links .card {
      width: 100%;
      background-color: var(--glass-bg);
      border-color: var(--glass-border);
      color: #fff;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px) saturate(130%);
      -webkit-backdrop-filter: blur(10px) saturate(130%);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    }

    .links .card::before {
      content: "";
      position: absolute;
      top: -120%;
      left: -45%;
      width: 55%;
      height: 340%;
      transform: rotate(24deg) translateX(-180%);
      background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0.08) 70%,
        rgba(255, 255, 255, 0) 100%
      );
      pointer-events: none;
      opacity: 0;
      transition: opacity 180ms ease;
    }

    .links .card-link:hover .card,
    .links .card-link:focus-visible .card {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.38);
      box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .links .card-link:hover .card::before,
    .links .card-link:focus-visible .card::before {
      opacity: 1;
      animation: glassShimmer 900ms ease forwards;
    }

    @keyframes glassShimmer {
      from {
        transform: rotate(24deg) translateX(-180%);
      }
      to {
        transform: rotate(24deg) translateX(330%);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .links .card,
      .links .card::before,
      .links .card-link:hover .card,
      .links .card-link:focus-visible .card,
      .links .card-link:hover .card::before,
      .links .card-link:focus-visible .card::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
      }
    }

    .links .card-body {
      overflow: hidden;
    }

    .links .row {
      align-items: center;
    }

    .links .card-title,
    .links .card-subtitle {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    @media (max-width: 575.98px) {
      .links .row {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        align-items: center;
      }

      .links .row > .col-1:first-child {
        grid-column: 1;
        grid-row: 1 / span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.75rem;
        font-size: 1.35rem;
      }

      .links .row > .col-3 {
        grid-column: 2;
        grid-row: 1;
        width: auto;
      }

      .links .row > .col-7,
      .links .row > data.col-7 {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        min-width: 0;
      }

      .links .row > .col-1.text-end {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: auto;
        align-self: center;
        font-size: 1.75rem;
        line-height: 1;
        font-weight: 700;
      }

      .links .row > .col-3 .card-title {
        white-space: nowrap;
      }

      .links .row > .col-7 .card-subtitle,
      .links .row > data.col-7 .card-subtitle {
        display: inline-block;
        max-width: 100%;
        opacity: 0.9;
      }
    }

    /* ── Animated background ── */
    .bg-canvas {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .bg-canvas {
      background: url('/static/images/Background.jpg') center center / cover no-repeat;
    }

    .sakura-petal {
      position: absolute;
      top: -8vh;
      left: 0;
      width: var(--petal-size, 12px);
      height: calc(var(--petal-size, 12px) * 0.78);
      border-radius: 70% 40% 65% 45%;
      background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 226, 238, 0.9) 28%, rgba(255, 188, 214, 0.86) 68%, rgba(235, 128, 173, 0.82) 100%);
      box-shadow: inset -1px -2px 2px rgba(173, 57, 96, 0.24), 0 2px 8px rgba(235, 144, 185, 0.24);
      opacity: var(--petal-opacity, 0.7);
      filter: blur(var(--petal-blur, 0px));
      pointer-events: none;
      transform: translate3d(var(--x-start, 0vw), -10vh, 0) rotate(var(--rot-start, 0deg));
      animation: sakuraFall var(--fall-duration, 14s) linear var(--fall-delay, 0s) infinite;
      z-index: 1;
      will-change: transform, opacity;
    }

    @keyframes sakuraFall {
      0% {
        transform: translate3d(var(--x-start, 0vw), -12vh, 0) rotate(var(--rot-start, 0deg));
        opacity: 0;
      }
      8% {
        opacity: var(--petal-opacity, 0.7);
      }
      50% {
        transform: translate3d(calc(var(--x-start, 0vw) + var(--x-drift, 0vw)), 52vh, 0) rotate(calc((var(--rot-start, 0deg) + var(--rot-end, 360deg)) / 2));
      }
      100% {
        transform: translate3d(calc(var(--x-start, 0vw) + (var(--x-drift, 0vw) * 1.6)), 112vh, 0) rotate(var(--rot-end, 360deg));
        opacity: 0;
      }
    }

    .bg-canvas::before {
      content: '';
      position: absolute;
      inset: 0;
      backdrop-filter: blur(14px) brightness(0.45) saturate(0.8);
      background:
        radial-gradient(ellipse 80% 60% at 20% 10%, rgba(46,204,113,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 60% 80% at 80% 90%, rgba(30,92,42,0.20) 0%, transparent 60%);
      animation: bgPulse 8s ease-in-out infinite alternate;
    }

    @keyframes bgPulse {
      from { opacity: 0.8; }
      to   { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sakura-petal {
        animation: none;
        opacity: 0;
      }
    }

    /* ── Divider ── */
    .divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
      margin: 0.75rem 0 1.5rem;
    }

    /* ── Footer ── */
    .footer {
      margin-top: 2rem;
      font-size: 0.75rem;
      color: var(--text-dim);
      text-align: center;
      opacity: 0.6;
    }