/* =========================================================
   Hero galaxy (v1.0.0) — the owner at the core, skills as orbiting planets.
   The galaxy itself is painted on <canvas> by hero-galaxy.js; planets are
   real buttons positioned every frame so they stay accessible.
   ========================================================= */
.galaxy {
    --gx-gold: var(--gold-rgb, 248, 184, 78);
    --gx-cyan: var(--cyan-rgb, 56, 217, 255);
    --gx-ink: var(--ink-rgb, 255, 255, 255);
    --gx-panel: rgba(var(--s4-rgb, 13, 13, 20), .82);
    --gx-core: clamp(118px, 21%, 156px);
    position: relative;
    width: min(100%, 700px);
    aspect-ratio: 1 / .9;
    margin-inline: auto;
    isolation: isolate;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.galaxy-canvas { position: absolute; inset: -8%; width: 116%; height: 116%; z-index: 0; pointer-events: none; }
.galaxy-planets { position: absolute; inset: 0; pointer-events: none; } /* no z-index: planets stack against the core */

/* ---------- the core: you ---------- */
.galaxy-core {
    position: absolute; left: 50%; top: 50%; z-index: 5;
    width: var(--gx-core); height: var(--gx-core);
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    pointer-events: none;
}
.galaxy-core-halo {
    position: absolute; inset: -42%; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gx-gold), .38) 0%, rgba(var(--gx-gold), .12) 32%, rgba(var(--gx-cyan), .05) 52%, transparent 70%);
    animation: gxBreath 5s ease-in-out infinite;
}
.galaxy-core-ring {
    position: absolute; inset: -7px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgb(var(--gx-gold)), rgba(var(--gx-gold), 0) 28%, rgb(var(--gx-cyan)) 50%, rgba(var(--gx-cyan), 0) 78%, rgb(var(--gx-gold)));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: gxSpin 7s linear infinite;
    filter: drop-shadow(0 0 8px rgba(var(--gx-gold), .7));
}
.galaxy-core-photo {
    position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #2a2233, #0b0b12);
    box-shadow: 0 0 0 4px rgba(7, 7, 11, .85), 0 0 60px rgba(var(--gx-gold), .45), 0 0 120px rgba(var(--gx-gold), .18), inset 0 0 30px rgba(0, 0, 0, .55);
}
.galaxy-core-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; transform: scale(1.04); }
.galaxy-core-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 45%), linear-gradient(to top, rgba(7, 7, 11, .35), transparent 45%); }
.galaxy-core-name {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
    display: grid; justify-items: center; gap: 2px; white-space: nowrap; text-align: center;
}
.galaxy-core-name b { font-size: 15px; color: rgb(var(--text-rgb, 247, 245, 240)); text-shadow: 0 2px 14px rgba(0, 0, 0, .8); letter-spacing: .01em; }
.galaxy-core-name small { font-size: 9.5px; letter-spacing: .24em; font-weight: 700; color: rgb(var(--gx-gold)); opacity: .85; }
@keyframes gxSpin { to { transform: rotate(360deg); } }
@keyframes gxBreath { 50% { transform: scale(1.08); opacity: .8; } }

/* ---------- planets ---------- */
.gx-planet {
    --c: var(--gx-gold);
    --size: 34px;
    position: absolute; left: 0; top: 0;
    display: grid; justify-items: center; gap: 7px;
    padding: 0; border: 0; background: none; cursor: pointer;
    pointer-events: auto;
    transform-origin: 50% calc(var(--size) / 2);
    will-change: transform, opacity;
    color: inherit; font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.gx-planet:focus, .gx-planet:focus-visible { outline: none !important; }
.gx-sphere {
    position: relative; width: var(--size); height: var(--size); border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .35) 9%, transparent 30%),
        radial-gradient(circle at 70% 75%, rgba(0, 0, 0, .55), transparent 55%),
        radial-gradient(circle at 45% 45%, rgb(var(--c)), rgba(var(--c), .55) 60%, rgba(10, 10, 20, .95) 100%);
    box-shadow: 0 0 18px rgba(var(--c), .55), 0 0 42px rgba(var(--c), .22), inset -6px -8px 14px rgba(0, 0, 0, .45);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
/* surface bands so each world looks alive */
.gx-sphere::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: repeating-linear-gradient(-18deg, transparent 0 5px, rgba(255, 255, 255, .07) 5px 7px, transparent 7px 11px);
    mix-blend-mode: overlay; opacity: .9;
    animation: gxSurface 9s linear infinite;
}
@keyframes gxSurface { to { background-position: 60px 0; } }
.gx-planet.has-ring .gx-sphere::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 190%; height: 46%;
    border-radius: 50%; border: 2px solid rgba(var(--c), .7);
    box-shadow: 0 0 10px rgba(var(--c), .45), inset 0 0 6px rgba(var(--c), .4);
    transform: translate(-50%, -50%) rotate(-16deg);
    -webkit-mask: linear-gradient(#000 48%, transparent 48%); mask: linear-gradient(#000 48%, transparent 48%);
}
.gx-moon {
    position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(var(--c), .9) 60%);
    box-shadow: 0 0 8px rgba(var(--c), .9);
    animation: gxMoon 4.6s linear infinite;
}
@keyframes gxMoon {
    from { transform: rotate(0deg) translateX(calc(var(--size) * .82)) scale(1); z-index: 1; }
    to { transform: rotate(360deg) translateX(calc(var(--size) * .82)) scale(1); }
}
.gx-label {
    display: inline-flex; align-items: center; gap: 6px;
    max-width: 172px; padding: 4px 10px 4px 8px; unicode-bidi: plaintext; border-radius: 999px;
    background: var(--gx-panel);
    border: 1px solid rgba(var(--c), .38);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .01em;
    color: rgb(var(--text-rgb, 247, 245, 240));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: border-color .3s, background .3s;
}
.gx-label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 8px rgb(var(--c)); }
.gx-planet:hover .gx-sphere, .gx-planet:focus-visible .gx-sphere, .gx-planet.is-active .gx-sphere {
    transform: scale(1.22);
    box-shadow: 0 0 26px rgba(var(--c), .85), 0 0 70px rgba(var(--c), .35), inset -6px -8px 14px rgba(0, 0, 0, .45);
}
.gx-planet:hover .gx-label, .gx-planet:focus-visible .gx-label, .gx-planet.is-active .gx-label { border-color: rgb(var(--c)); background: rgba(var(--c), .2); }
.gx-planet:focus-visible .gx-label { box-shadow: 0 0 0 2px rgba(var(--c), .6); }

/* accents */
.gx-planet.c-purple { --c: var(--purple-rgb, 169, 112, 255); }
.gx-planet.c-cyan { --c: var(--cyan-rgb, 56, 217, 255); }
.gx-planet.c-green { --c: var(--green-rgb, 83, 233, 164); }
.gx-planet.c-pink { --c: var(--pink-rgb, 255, 94, 188); }
.gx-planet.c-red { --c: var(--red-rgb, 255, 97, 94); }
.gx-planet.c-blue { --c: var(--blue-rgb, 95, 145, 255); }
.gx-planet.c-orange { --c: 255, 150, 70; }
.gx-planet.c-yellow, .gx-planet.c-gold { --c: var(--gold-rgb, 248, 184, 78); }

/* ---------- skill card ---------- */
.galaxy-card {
    position: absolute; z-index: 8; left: 50%; bottom: 2%;
    width: min(330px, 92%);
    padding: 14px 16px 13px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--gx-ink), .07), rgba(var(--gx-ink), .02)), rgba(var(--s3-rgb, 10, 10, 16), .88);
    border: 1px solid rgba(var(--c, var(--gx-gold)), .45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--c, var(--gx-gold)), .15);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    opacity: 0; transform: translate(-50%, 14px) scale(.97);
    transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1), border-color .3s;
    pointer-events: none;
}
.galaxy-card.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.galaxy-card-cat { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgb(var(--c, var(--gx-gold))); }
.galaxy-card strong { display: block; margin-top: 3px; font-size: 16px; line-height: 1.35; color: rgb(var(--text-rgb, 247, 245, 240)); }
.galaxy-card p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.7; color: rgb(var(--text-3-rgb, 199, 195, 204)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.galaxy-card-level { display: block; height: 6px; border-radius: 6px; background: rgba(var(--gx-ink), .08); overflow: hidden; }
.galaxy-card-level i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--c, var(--gx-gold)), .6), rgb(var(--c, var(--gx-gold)))); box-shadow: 0 0 10px rgba(var(--c, var(--gx-gold)), .7); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.galaxy-card small { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: rgb(var(--muted-rgb, 170, 166, 177)); }
.galaxy-card small b { color: rgb(var(--c, var(--gx-gold))); font-size: 12px; }
.galaxy-hint {
    position: absolute; z-index: 6; left: 50%; bottom: 3%; transform: translateX(-50%);
    margin: 0; padding: 6px 13px; border-radius: 999px;
    font-size: 11.5px; color: rgb(var(--muted-rgb, 170, 166, 177));
    background: rgba(var(--s3-rgb, 10, 10, 16), .55); border: 1px solid rgba(var(--gx-ink), .08);
    white-space: nowrap; transition: opacity .4s;
    animation: gxHint 3.2s ease-in-out infinite;
}
.galaxy.has-active .galaxy-hint { opacity: 0; }
@keyframes gxHint { 50% { opacity: .55; } }

/* glass theme: let the landscape show, keep the galaxy luminous */
html[data-site-theme] .galaxy-core-photo { box-shadow: 0 0 0 4px rgba(255, 255, 255, .12), 0 0 60px rgba(var(--gx-gold), .45), 0 0 120px rgba(var(--gx-gold), .2); }

/* phones and small screens */
@media (max-width: 760px) {
    .galaxy { --gx-core: clamp(92px, 25%, 120px); aspect-ratio: 1 / 1.02; }
    .gx-label { transition: opacity .25s; }
    .gx-planet { --size: 26px; gap: 5px; }
    .gx-label { font-size: 10px; max-width: 128px; padding: 3px 8px 3px 6px; }
    .galaxy-core-name b { font-size: 13px; }
    .galaxy-card { bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .galaxy-core-ring, .galaxy-core-halo, .gx-moon, .gx-sphere::before, .galaxy-hint { animation: none !important; }
}
.gx-hint-touch { display: none; }
@media (hover: none) { .gx-hint-hover { display: none; } .gx-hint-touch { display: inline; } }