:root{
      --bg:#0b0b0d; --card:#0f1113; --muted:#9aa3ad; --accent:#b044ef; --glass: rgba(255,255,255,0.04);
      --radius:18px; --maxw:1100px;
      --shadow: 0 10px 30px rgba(2,6,23,0.6);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      padding:15px;
      display:flex; align-items:flex-start; justify-content:center;
      background: radial-gradient(1200px 600px at 10% 10%, rgba(255,68,68,0.06), transparent 6%),
                  radial-gradient(900px 500px at 90% 90%, rgba(80,80,255,0.03), transparent 6%),
                  var(--bg);
    }
    .wrap{width:100%; max-width:var(--maxw); overflow: visible; z-index: 100;}

    header{
      display:flex;align-items:center;justify-content:space-between;margin-bottom:28px; 
      background:linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3)); border:1px solid rgba(255,255,255,0.04);
      padding:22px;border-radius:var(--radius);box-shadow:var(--shadow); backdrop-filter: blur(5px);
    }
    .brand{display:flex;gap:14px;align-items:center}
    .logo{
      width:36px;height:36px;border-radius:100px;background: linear-gradient(135deg, #be65e7, #7d99e7, #be65e7); background-size: 200% 200%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0px 0px 30px rgb(232, 118, 255);
      animation: flowGradient 2s linear infinite;
    }
    @keyframes flowGradient {
      30% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      70% { background-position: 0% 50%; }
    }
    h1{margin:0;font-size:20px}
    h3{text-align: center;}
    p.lead{margin:0;color:var(--muted);font-size:13px}

    .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
    @media (max-width:840px){.grid{grid-template-columns:1fr}}

    .card{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.04);
      padding:22px;border-radius:var(--radius);box-shadow:var(--shadow);
      display:flex;flex-direction:column;gap:14px;min-height:300px;position:relative;overflow:hidden;
      z-index: -5;
    }

    .card .head{display:flex;align-items:start;gap:14px;}
    .icon{width:62px;height:62px;border-radius:12px;background:var(--glass);display:flex;align-items:center;justify-content:center;font-size:20px}
    .icon.pfp{
      -webkit-mask-image: linear-gradient(to top, transparent 5%, black 20%);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: cover;

      /* For non-webkit browsers */
      mask-image: linear-gradient(to top, transparent 5%, black 20%);
      mask-repeat: no-repeat;
      mask-size: cover;
    }
    .title{font-size:18px;margin:0}
    .sub{color:var(--muted);font-size:13px;margin-top:4px}

    .desc{color:#dbe7f3;font-size:14px;line-height:1.45;text-shadow: var(--bg) 0 0 5px;}
    .topdesc{color:#dbe7f3;font-size:16px;line-height:1.45; width: 100%;
      overflow: hidden;
      max-height: 700px; /* initial height */
      transition: max-height 1s ease;
    }

    .topdesc.expanded {
      max-height: 1000px; /* large enough to fit the full text */
    }

    @media (min-width: 800px) {
      .topdesc {
        max-height: 140px; /* large screens */
        width: 44vw;
      }
    }

    .songs {
        display: none;
    }
    @media (min-width: 1000px) {
      .songs {
        display: block;
      }
    }

    .tags{display:flex;flex-wrap:wrap;gap:8px}
    .tag{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(0, 0, 0, 0.3);border:1px solid rgba(255,255,255,0.5);color:var(--muted);text-decoration:none;backdrop-filter: blur(5px);}

    .actions{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
    .cta{background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.5);text-decoration:none;color:inherit;font-weight:600;backdrop-filter: blur(5px);}
    .socials{display:flex;gap:8px}
    .social{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.5);background:rgba(255,255,255,0.02);text-decoration:none;color:inherit;backdrop-filter: blur(5px);}

    .footer{z-index: 100;}
    footer.note{margin-top:10px;color:var(--muted);font-size:13px;text-align:center}

    /* subtle animated accent */
    .accent-spark{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:linear-gradient(180deg, rgba(239,68,68,0.06), transparent);filter:blur(40px);transform:rotate(10deg);pointer-events:none}

    /* small project grid for anchors */
    .projects{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px; z-index: 100;}
    @media (max-width:840px){.projects{grid-template-columns:repeat(2,1fr)}}
    .proj{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.03);font-size:13px}

    /* utility */
    .muted{color:var(--muted)}

    #game-card {
      z-index: 1;
    }
    #graphics-card {
      z-index: 1;
    }

    .icon img {
      width: 60px;      /* adjust as needed */
      height: 60px;
      border-radius: 10%; /* makes it round if you want */
      object-fit: cover;  /* crops instead of stretching */
    }

    /* Background image or GIF */
    .mizuki-bg {
        position: fixed;
        top: 200px;
        overflow: visible;
        inset: 0;
        background: url("Images/Mizuki.png") center no-repeat;
        z-index: -100;
        width: 110%;
        height: 110%;
        background-size: contain;
        pointer-events: none;
        transform: translate(100vw, 0px) rotate(45deg);
        transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .mizuki-bg.loaded {
        transform: translate(15vw, 0px) rotate(0.1deg);
        transition: transform 5s cubic-bezier(0.25, 1, 0.5, 1);
        animation: MizukiShake 7s ease-in-out infinite 4.9s; /* starts after transition */
    }

    /* Fade at the bottom */
    .mizuki-bg::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    @media (min-width: 800px) {
      .mizuki-bg {
        z-index: 0;
      }
    }

    /* Background image or GIF */
    .am-card-bg {
        position: absolute;
        inset: 0;
        background: url("Images/AboutMeBackground.jpg") bottom/cover no-repeat;
        z-index: -1;
        pointer-events: none;
    }

    /* Fade at the bottom */
    .am-card-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, transparent 0%, rgb(4, 4, 4));
    }

    .game-card-bg {
        position: absolute;
        inset: 0;
        background: url("Images/Game.webp") bottom/cover no-repeat;
        z-index: -1;
        pointer-events: none;
    }

    /* Fade at the bottom */
    .game-card-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, transparent 0%, rgb(4, 4, 4));
    }

    .graphics-card-bg {
        position: absolute;
        inset: 0;
        background: url("Images/Graphics.jpg") center/cover no-repeat;
        z-index: -1;
        pointer-events: none;
    }

    /* Fade at the bottom */
    .graphics-card-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, transparent 0%, rgb(4, 4, 4));
    }

    .background {
      position: fixed;
      overflow: visible;
      z-index: -100;
      background: url("Images/FullBackground.gif") bottom/cover no-repeat;
      top: -20px;
      width: 105vw;
      height: 105vh;
      filter: blur(15px);
      animation: blurCycle 20s ease-in-out infinite, cameraShake 10s ease-in-out infinite;
    }
    .background::after{
      content: "";
      position: absolute;
      inset: 0;
    }

    #vaultInput {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        padding: 15px;
        margin: 10px 0;
        border-radius: 10px;
        width: 100%;
        box-sizing: border-box; /* Ensures padding doesn't increase width */
        color: white;
        font-size: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        outline: none; /* Removes default browser outline on focus */
    }

    #vaultInput::placeholder {
        color: rgba(255, 255, 255, 0.8);
    }

    #vaultInput:focus {
        background: rgba(255, 255, 255, 0.3); /* Slightly less transparent on focus */
    }

    #vaultButton {
        background: rgba(255, 255, 255, 0.3);
        border: none;
        padding: 15px 20px;
        margin-top: 20px;
        border-radius: 10px;
        color: white;
        font-size: 16px;
        cursor: pointer;
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: background 0.3s ease;
    }

    #vaultButton:hover {
        background: rgba(255, 255, 255, 0.5);
    }

    @keyframes blurCycle {
      0% {
        filter: blur(15px);
      }
      50% {
        filter: blur(5px);
      }
      100% {
        filter: blur(15px);
      }
    }
    @keyframes cameraShake {
      0% { transform: translate(0px, 0px) rotate(0deg); }
      15% { transform: translate(5px, -5px) rotate(-0.1deg); }
      50% { transform: translate(-5px, 5px) rotate(0.1deg); }
      80% { transform: translate(-5px, -5px) rotate(-0.1deg); }
      100% { transform: translate(0px, 0px) rotate(0deg); }
    }

    @keyframes MizukiShake {
      0% { transform: translate(15vw, 0px) rotate(0.1deg); }
      15% { transform: translate(15.1vw, -2px) rotate(-0.1deg); }
      50% { transform: translate(14.9vw, 2px) rotate(0.1deg); }
      80% { transform: translate(15.1vw, -2px) rotate(-0.1deg); }
      100% { transform: translate(15vw, 0px) rotate(0.1deg); }
    }

    /* Loading screen */
    #loader {
      position: fixed;
      inset: 0;
      background: #0b0b0d;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--muted);
      z-index: 9999;
      transition: opacity 0.6s ease, visibility 0.6s ease;

      background: url("Images/FullBackground.gif") bottom/cover no-repeat;
      top: -20px;
      width: 105vw;
      height: 105vh;
      filter: blur(15px);
      animation: blurCycle 20s ease-in-out infinite, cameraShake 10s ease-in-out infinite;
    }

    #loader.fade-out {
      opacity: 0;
      visibility: hidden;
    }

    /* Spinner animation */
    .spinner {
      width: 50px;
      height: 50px;
      border: 4px solid rgba(255, 255, 255, 0.1);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }


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

    ::selection {
            background-color: rgb(192, 114, 255); /* Or use hex: #800080 */
            box-shadow: #b044ef 0 0 20px;
            color: rgb(190, 216, 255); /* Optional: Change text color for better contrast */
    }

    #NameText {
        display: inline-block;
        transition: all 0.2s ease;
    }

    .nametext-showtop {
        opacity: 0;
        transform: translateY(10px);
    }

    .nametext-show {
        opacity: 1;
        transform: translateY(0);
    }

    .nametext-hide {
        opacity: 0;
        transform: translateY(-10px);
    }