/* ─── Reset ─────────────────────────────────────────── */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ─── Body ───────────────────────────────────────────── */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    height: 100vh;
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: hidden;
    background: linear-gradient(315deg, rgb(207, 207, 207), rgba(60,132,206,1) 38%, rgb(47,185,245) 68%, rgb(83,96,246) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
    font-size: 30px;
}

/* ─── Theme toggle button ────────────────────────────── */
.theme-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: #11111100;
    backdrop-filter: blur(5px);
    color: white;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}
body:not(.dark) .theme-btn {
    background: #424040;
    border-color: transparent;
}
.theme-btn:hover { transform: scale(1.2); }

/* ─── Dark mode ──────────────────────────────────────── */
.dark {
    min-height: 100vh;
    background: linear-gradient(to bottom, #0b0b2b, #1b2735 70%, #090a0f);
    overflow: hidden;
}
.dark .card {
    background: #1e1e1e;
    color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* ─── Main card ──────────────────────────────────────── */
.card {
    position: relative;
    display: flex;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: white;
    width: 650px;
    height: 500px;
    padding: 30px;
    border-radius: 12px;
    border-top: 40px solid rgb(54,54,54);
    box-shadow: 0 15px 20px black;
    color: black;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card p { margin-top: 20px; font-size: 20px; }
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}

/* ─── Card buttons ───────────────────────────────────── */
.card button {
    display: block;
    margin: 20px auto 0 auto;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: rgb(83,82,82);
    color: white;
    font-size: 20px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
.button-group {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}
.card button:hover {
    background: #ff7e5f;
    transform: scale(1.2);
}

/* ─── Popup overlay ──────────────────────────────────── */
.popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.popup.active {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Popup content (default small) ─────────────────── */
.popup-content {
    position: absolute;
    cursor: grab;
    background: white;
    padding: 30px;
    border-radius: 12px;
    border-top: 20px solid rgb(54,54,54);
    width: 300px;
    text-align: left;
    color: black;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.popup-content.dragging { cursor: grabbing; }
.popup-content h3 { text-align: center; }
.popup.active .popup-content { transform: scale(1); }

/* ─── Info popup overrides ───────────────────────────── */
.popup-info::-webkit-scrollbar { display: none; }
.popup-info {
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: min(92vw, 420px);
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 16px;
    border-top: none;
    background: white;
    display: flex;
    flex-direction: column;
}

/* ─── Close button (default) ─────────────────────────── */
.close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: red;
    background: none;
    border: none;
    line-height: 1;
    padding: 0;
}

/* ─── Info popup creative close button ───────────────── */
.card .close-btn-info,
.close-btn-info {
    position: absolute;
    top: 12px; right: 14px;
    width: 40px; height: 40px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 200;
    transition: background 0.25s ease, transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.close-btn-info:hover {
    background: rgba(255, 90, 60, 0.15);
    transform: scale(1.12);
}
.close-btn-info:hover,
.close-btn-info:focus {
    box-shadow: none;
}
.close-btn-info:active {
    transform: scale(0.93);
}
.close-icon {
    width: 40px; height: 40px;
    display: block;
    overflow: visible;
}
.close-ring {
    stroke: rgba(255,255,255,0.7);
    stroke-dasharray: 107;
    stroke-dashoffset: 107;
    animation: ringDraw 0.55s cubic-bezier(.4,0,.2,1) 0.05s forwards;
    transition: stroke 0.2s ease;
}
.close-btn-info:hover .close-ring {
    stroke: #ff6b4a;
    filter: drop-shadow(0 0 4px rgba(255,107,74,0.7));
}
.close-line {
    stroke: rgba(255,255,255,0.9);
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: lineDraw 0.3s ease forwards;
    transition: stroke 0.2s ease;
}
.close-line:nth-child(2) { animation-delay: 0.45s; }
.close-line:nth-child(3) { animation-delay: 0.55s; }
.close-btn-info:hover .close-line {
    stroke: #ff6b4a;
}
.close-btn-info:hover .close-icon {
    animation: spinOnce 0.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ringDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes lineDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes spinOnce {
    from { transform: rotate(0deg); }
    to   { transform: rotate(90deg); }
}

/* ─── Info header banner ─────────────────────────────── */
.info-header {
    background: linear-gradient(135deg, #ff7e5f, #feb47b);
    padding: 28px 28px 20px;
    text-align: center;
}
.info-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
}
.info-name {
    font-family: monospace;
    color: white;
    font-size: 1.3rem;
    margin: 0;
}
.info-title {
    color: rgba(255,255,255,0.8);
    font-size: 0.78rem;
    margin-top: 4px;
    font-family: monospace;
}
.info-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 30px;
    padding: 4px 12px;
    margin-top: 10px;
    font-size: 0.72rem;
    color: white;
}
.status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    animation: blink 2s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ─── Info body ──────────────────────────────────────── */
.info-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.info-section { display: flex; flex-direction: column; }

/* ─── Section header ─────────────────────────────────── */
.section-header {
    font-family: monospace;
    font-size: 0.65rem;
    color: #ff7e5f;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-line {
    flex: 1;
    height: 1px;
    background: #eee;
    display: block;
}

/* ─── About rows ─────────────────────────────────────── */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.85rem;
}
.info-row.border-bottom { border-bottom: 1px solid #f0f0f0; }
.info-label { color: #999; }
.info-value { font-weight: 600; }

/* ─── Spoken language tags ───────────────────────────── */
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 30px;
    padding: 5px 13px;
    font-size: 0.78rem;
}
.lang-tag:first-child { border-color: #ff7e5f; background: rgba(255,126,95,0.06); }
.lang-tag:last-child  { border-color: #4a90d9; background: rgba(74,144,217,0.06); }
.lang-badge {
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 700;
    margin-left: 2px;
    color: white;
}
.badge-native { background: #ff7e5f; }
.badge-fluent  { background: #4a90d9; }

/* ─── Education rows ─────────────────────────────────── */
.edu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}
.edu-row.border-bottom { border-bottom: 1px solid #f0f0f0; }
.edu-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,126,95,0.1);
    border: 1px solid rgba(255,126,95,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.edu-name { font-weight: 600; font-size: 0.85rem; }
.edu-sub  { color: #999; font-size: 0.75rem; margin-top: 1px; }

/* ─── Keyboard tray ──────────────────────────────────── */
.keyboard-tray {
    background: #2a2a2e;
    border-radius: 16px;
    padding: 14px 12px 12px;
    border: 2px solid #1a1a1e;
    box-shadow: 0 8px 0 #111, 0 10px 20px rgba(0,0,0,0.35);
}
.keyboard-label {
    font-family: monospace;
    font-size: 0.55rem;
    color: #555;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.key-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 8px;
}
.key-row:last-child { margin-bottom: 0; }
.key-row-offset { padding-left: 16px; }

/* ─── Keycap ─────────────────────────────────────────── */
.keycap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    width: 78px;
    height: 76px;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: visible;
    opacity: 0;
}
.keycap:active, .keycap.pressed {
    transform: translateY(3px) !important;
    box-shadow: none !important;
}
.keycap.popped {
    animation: keyPop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes keyPop {
    0%   { opacity:0; transform: translateY(10px) scale(0.85); }
    70%  { transform: translateY(-3px) scale(1.04); }
    100% { opacity:1; transform: translateY(0) scale(1); }
}
.kc-face {
    width: 100%; height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 6px 6px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.kc-face::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}
.kc-emoji { font-size: 1.3rem; line-height: 1; }
.kc-label {
    font-family: monospace;
    font-weight: 800;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.1;
}
.kc-sub {
    font-family: monospace;
    font-size: 0.52rem;
    opacity: 0.55;
    letter-spacing: 0.3px;
}

/* ─── Keycap popup tooltip ───────────────────────────── */
.kc-popup {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(0.92);
    background: #12121f;
    border: 1.5px solid var(--kc-col, #888);
    border-radius: 11px;
    padding: 10px 12px 9px;
    width: 140px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.34,1.4,0.64,1);
    z-index: 200;
}
.kc-popup.kc-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}
.kc-popup::after {
    content: '';
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: var(--kc-col, #888);
}
.kc-popup-head {
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--kc-col, #eee);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
}
.kc-popup-pct { font-size: 0.65rem; opacity: 0.75; }
.kc-popup-track {
    width: 100%;
    height: 7px;
    background: #252540;
    border-radius: 99px;
    overflow: hidden;
}
.kc-popup-fill {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    background: var(--kc-col, #888);
    box-shadow: 0 0 8px var(--kc-col, #888);
    transition: width 0.65s cubic-bezier(0.22,1,0.36,1);
}
.kc-popup-label {
    font-family: monospace;
    font-size: 0.58rem;
    color: #555;
    margin-top: 6px;
    text-align: center;
    font-style: italic;
}

/* ─── Interest bento cards ───────────────────────────── */
.ib-grid { display: grid; gap: 7px; }
.ib-grid-6040 { grid-template-columns: 1.6fr 1fr; }
.ib-grid-4060 { grid-template-columns: 1fr 1.6fr; }
.ib-grid-5050 { grid-template-columns: 1fr 1fr; }
.ib-mb { margin-bottom: 7px; }

.ib {
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: default;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    padding: 14px 16px;
}
.ib:hover { transform: translateY(-3px) scale(1.02); }
.ib::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transition: opacity 0.3s;
    pointer-events: none;
}
.ib:hover::after { opacity: 1; animation: shimmer 0.6s ease forwards; }
@keyframes shimmer {
    from { background-position: -200% 0; }
    to   { background-position:  200% 0; }
}
.ib-emoji { font-size: 2rem; line-height: 1; display: block; }
.ib-label { font-weight: 800; letter-spacing: -0.3px; margin-top: 6px; font-size: 0.88rem; }
.ib-sub   { opacity: 0.65; font-size: 0.67rem; margin-top: 2px; }

/* individual card themes */
.ib-gaming     { background: linear-gradient(135deg,#1a0a2e,#2d1155); border: 1.5px solid #7c3aed; box-shadow: 0 0 18px #7c3aed30; }
.ib-jpop       { background: linear-gradient(160deg,#ff6b6b,#ffa552); border: 1.5px solid #ff8c42; box-shadow: 0 0 14px #ff6b6b25; }
.ib-otters     { background: linear-gradient(150deg,#fdf0e0,#f5d9b0); border: 1.5px solid #c8864a; box-shadow: 0 0 12px #c8864a20; text-align: center; padding: 14px 12px; }
.ib-webdev     { background: linear-gradient(135deg,#0d1f0d,#0a2a0a); border: 1.5px solid #22c55e; box-shadow: 0 0 16px #22c55e25; font-family: monospace; }
.ib-night      { background: linear-gradient(160deg,#0a0f2e,#141d4a); border: 1.5px solid #6366f1; box-shadow: 0 0 14px #6366f120; overflow: hidden; padding: 14px 12px; }
.ib-gamecoding { background: linear-gradient(135deg,#1a0030,#2d0050); border: 1.5px solid #e040fb; box-shadow: 0 0 14px #e040fb25; padding: 14px 12px; }

/* decorative elements inside cards */
.ib-dots {
    position: absolute;
    right: 12px; top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0.25;
}
.ib-dot { width: 5px; height: 5px; border-radius: 50%; background: #e2d9ff; }

.ib-otter-svg { display: block; margin: 0 auto; }
.ib-otters .ib-label { font-size: 0.82rem; margin-top: 7px; }

.ib-cursor {
    display: inline-block;
    width: 6px; height: 11px;
    background: #4ade80;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 1px;
    border-radius: 1px;
}

.ib-stars {
    position: absolute;
    top: 8px; right: 8px;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: white;
    opacity: 0.6;
    box-shadow: 8px 5px 0 white, 15px 2px 0 rgba(255,255,255,0.4), 5px 14px 0 rgba(255,255,255,0.5), 22px 10px 0 rgba(255,255,255,0.3);
}

.ib-pixels {
    position: absolute;
    bottom: 10px; right: 10px;
    display: grid;
    grid-template-columns: repeat(3, 5px);
    gap: 2px;
    opacity: 0.3;
}
.ib-pixels > div { width: 5px; height: 5px; }

/* ─── Social links ───────────────────────────────────── */
.social-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: #f8f8f8;
    border: 1px solid #eee;
    text-decoration: none;
    color: #111;
    transition: all 0.2s;
}
.social-link:hover {
    border-color: #ff7e5f;
    background: rgba(255,126,95,0.06);
}
.social-link-mt { margin-top: 8px; }
.social-icon {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.social-text { flex: 1; }
.social-name   { font-weight: 600; font-size: 0.85rem; }
.social-handle { color: #999; font-size: 0.75rem; }
.social-arrow  { color: #bbb; font-size: 0.8rem; }

/* ─── Misc ───────────────────────────────────────────── */
.orange { color: #ff7e5f; }

/* ─── Stars & shooting stars ─────────────────────────── */
.stars {
    width: 1px; height: 1px;
    position: absolute;
    background: white;
    box-shadow: 2vw 5vh 2px white, 10vw 8vh 2px white, 15vw 15vh 1px white,
        22vw 22vh 1px white, 28vw 12vh 2px white, 32vw 32vh 1px white,
        38vw 18vh 2px white, 42vw 35vh 1px white, 48vw 25vh 2px white,
        53vw 42vh 1px white, 58vw 15vh 2px white, 63vw 38vh 1px white,
        68vw 28vh 2px white, 73vw 45vh 1px white, 78vw 32vh 2px white,
        83vw 48vh 1px white, 88vw 20vh 2px white, 93vw 52vh 1px white,
        98vw 35vh 2px white, 5vw 60vh 1px white, 12vw 65vh 2px white,
        18vw 72vh 1px white, 25vw 78vh 2px white, 30vw 85vh 1px white,
        35vw 68vh 2px white, 40vw 82vh 1px white, 45vw 92vh 2px white,
        50vw 75vh 1px white, 55vw 88vh 2px white, 60vw 95vh 1px white,
        65vw 72vh 2px white, 70vw 85vh 1px white, 75vw 78vh 2px white,
        80vw 92vh 1px white, 85vw 82vh 2px white, 90vw 88vh 1px white,
        95vw 75vh 2px white;
    animation: twinkle 8s infinite linear;
}
.stars::after {
    content: "";
    position: absolute;
    width: 1px; height: 1px;
    background: white;
    box-shadow: 8vw 12vh 2px white, 16vw 18vh 1px white, 24vw 25vh 2px white,
        33vw 15vh 1px white, 41vw 28vh 2px white, 49vw 35vh 1px white,
        57vw 22vh 2px white, 65vw 42vh 1px white, 73vw 28vh 2px white,
        81vw 48vh 1px white, 89vw 32vh 2px white, 97vw 45vh 1px white,
        3vw 68vh 2px white, 11vw 75vh 1px white, 19vw 82vh 2px white,
        27vw 88vh 1px white, 35vw 72vh 2px white, 43vw 85vh 1px white,
        51vw 92vh 2px white, 59vw 78vh 1px white;
    animation: twinkle 6s infinite linear reverse;
}
.shooting-star {
    position: absolute;
    width: 100px; height: 2px;
    background: linear-gradient(90deg, white, transparent);
    animation: shoot 3s infinite ease-in;
}
.shooting-star:nth-child(1) { top: 20%; left: -100px; animation-delay: 0s; }
.shooting-star:nth-child(2) { top: 35%; left: -100px; animation-delay: 1s; }
.shooting-star:nth-child(3) { top: 50%; left: -100px; animation-delay: 2s; }

@keyframes twinkle {
    0%, 100% { opacity: 0.8; }
    50%       { opacity: 0.4; }
}
@keyframes shoot {
    0%   { transform: translateX(0) translateY(0) rotate(25deg); opacity: 1; }
    100% { transform: translateX(120vw) translateY(50vh) rotate(25deg); opacity: 0; }
}

/* ─── Gradient wave ──────────────────────────────────── */
@keyframes gradient {
    0%   { background-position: 0% 0%; }
    50%  { background-position: 100% 100%; }
    100% { background-position: 0% 0%; }
}
.wave {
    background: rgb(255, 239, 239);
    border-radius: 1000% 1000% 0 0;
    position: absolute;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0,0,0);
    bottom: 0; left: 0;
    z-index: 0;
}
.wave:nth-of-type(2) { bottom: -1.25em; animation: wave 18s linear reverse infinite; opacity: 0.8; }
.wave:nth-of-type(3) { bottom: -2.5em;  animation: wave 20s -1s reverse infinite;   opacity: 0.9; }

@keyframes wave {
    2%   { transform: translateX(1); }
    25%  { transform: translateX(-25%); }
    50%  { transform: translateX(-50%); }
    75%  { transform: translateX(-25%); }
    100% { transform: translateX(1); }
}

/* ─── Stars/wave container visibility ───────────────── */
.stars-container { display: block; }
.wave-container  { display: none; }

/* ─── Scroll progress bar ────────────────────────────── */
.scroll-progress-bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    border-radius: 0 2px 2px 0;
    z-index: 100;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255,126,95,0.6);
}

/* ─── Typing animation cursor ────────────────────────── */
.typed-cursor {
    display: inline-block;
    color: rgba(255,255,255,0.8);
    animation: cursorBlink 0.75s step-end infinite;
    font-weight: 300;
    margin-left: 1px;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ─── Now Playing widget ─────────────────────────────── */
.now-playing {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a0a2e, #2d0a4e);
    border: 1.5px solid #a855f7;
    border-radius: 14px;
    padding: 11px 14px;
    box-shadow: 0 0 18px rgba(168,85,247,0.2);
}
.np-album {
    font-size: 2rem;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(168,85,247,0.15);
    border: 1px solid rgba(168,85,247,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    animation: albumSpin 12s linear infinite;
}
@keyframes albumSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.np-info { flex: 1; min-width: 0; }
.np-badge {
    font-family: monospace;
    font-size: 0.55rem;
    color: #a855f7;
    letter-spacing: 2px;
    margin-bottom: 3px;
}
.np-song {
    font-weight: 800;
    font-size: 0.85rem;
    color: #f0e6ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.np-artist {
    font-size: 0.72rem;
    color: rgba(200,170,255,0.65);
    margin-top: 1px;
}
/* Equalizer bars */
.np-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    flex-shrink: 0;
}
.np-bar {
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(to top, #a855f7, #e879f9);
    animation: eqBounce 0.8s ease-in-out infinite alternate;
}
.np-bar:nth-child(1) { animation-delay: 0.0s; height: 60%; }
.np-bar:nth-child(2) { animation-delay: 0.15s; height: 90%; }
.np-bar:nth-child(3) { animation-delay: 0.3s;  height: 45%; }
.np-bar:nth-child(4) { animation-delay: 0.45s; height: 75%; }
.np-bar:nth-child(5) { animation-delay: 0.1s;  height: 55%; }
@keyframes eqBounce {
    from { transform: scaleY(0.3); }
    to   { transform: scaleY(1);   }
}

/* ─── GitHub stats badges ────────────────────────────── */
.gh-stats {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-end;
    margin-left: auto;
    margin-right: 8px;
}
.gh-stat {
    font-family: monospace;
    font-size: 0.62rem;
    color: #999;
    background: #f0f0f0;
    border-radius: 20px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ─── GitHub contribution heatmap ────────────────────── */
.gh-contrib-card {
    margin-top: 10px;
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 12px;
    padding: 12px 14px 10px;
}
.gh-contrib-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.gh-contrib-title {
    font-family: monospace;
    font-size: 0.65rem;
    color: #8b949e;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.gh-contrib-count {
    font-family: monospace;
    font-size: 0.65rem;
    color: #39d353;
}
.gh-contrib-loading {
    font-family: monospace;
    font-size: 0.62rem;
    color: #444;
    text-align: center;
    padding: 12px 0;
    animation: blink 1.2s step-end infinite;
}
.gh-contrib-grid {
    display: flex;
    gap: 3px;
    overflow: hidden;
}
.gh-contrib-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gh-contrib-cell {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: #161b22;
    flex-shrink: 0;
    cursor: default;
    transition: transform 0.1s ease;
    position: relative;
}
.gh-contrib-cell:hover {
    transform: scale(1.4);
    z-index: 10;
}
.gh-contrib-cell[data-count="0"] { background: #161b22; }
.gh-contrib-cell[data-level="1"] { background: #0e4429; }
.gh-contrib-cell[data-level="2"] { background: #006d32; }
.gh-contrib-cell[data-level="3"] { background: #26a641; }
.gh-contrib-cell[data-level="4"] { background: #39d353; }
.gh-contrib-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    justify-content: flex-end;
    font-family: monospace;
    font-size: 0.58rem;
    color: #8b949e;
}
.gh-legend-box {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}
/* ─── Fun stuff popup ────────────────────────────────── */
.popup-fun {
    width: min(92vw, 360px);
    cursor: default;
}
.popup-fun h3 {
    text-align: center;
    margin-bottom: 16px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.fun-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fun-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1.5px solid #e8e8e8;
    background: #f9f9f9;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    min-height: 80px;
}
.fun-btn:hover {
    background: #ff7e5f;
    border-color: #ff7e5f;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(255,126,95,0.35);
}
.fun-btn:hover .fun-arrow { opacity: 1; }
.fun-btn:hover .fun-badge { background: white; color: #ff7e5f; }

.fun-icon { font-size: 1.4rem; line-height: 1; }

.fun-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    flex: 1;
}

.fun-arrow {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.75rem;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.fun-btn-new {
    border-color: #ffb8a0;
    background: rgba(255,126,95,0.06);
}

.fun-badge {
    font-size: 0.58rem;
    background: #ff7e5f;
    color: white;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

/* Dark mode */
.dark .fun-btn {
    background: #2a2a2a;
    border-color: #3a3a3a;
    color: #ddd;
}
.dark .fun-btn:hover {
    background: #ff7e5f;
    border-color: #ff7e5f;
    color: white;
}
.dark .fun-btn-new {
    border-color: rgba(255,126,95,0.4);
    background: rgba(255,126,95,0.1);
}

/* Mobile */
@media (max-width: 700px) {
    .card {
        width: min(95vw, 420px);
        height: auto;
        min-height: 320px;
        padding: 24px 20px 28px;
        border-top-width: 28px;
    }
    .card h1 { font-size: 1.6rem; }
    .card p  { font-size: 0.95rem; margin-top: 12px; }
    .button-group {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
    }
    .card button { font-size: 0.9rem; padding: 9px 18px; margin: 0; }
    .popup-info  { width: min(96vw, 420px); max-height: 90vh; }
    .popup-fun   { width: min(92vw, 340px); }
}
@media (max-width: 400px) {
    .fun-grid { grid-template-columns: 1fr; }
    .card h1 { font-size: 1.35rem; }
}