/* KWAY Galaxy (แกลเลอรีสาธารณะ) + หน้าแชร์ผลงาน */
.gx-nav { position: sticky; top: 0; z-index: 10; margin: 12px auto 0; max-width: 1240px; width: calc(100% - 24px); display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 10px 0 16px; border-radius: 16px;
  background: rgba(var(--n-14-30-68), .6); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--line); box-shadow: var(--shadow); }
.gx-nav .logo { display: flex; align-items: center; gap: 8px; font: 600 18px var(--font-display); color: var(--text); letter-spacing: .04em; }
.gx-nav .logo img { width: 30px; } .gx-nav .logo .dot { color: var(--neon); }
.gx-nav .links { display: flex; gap: 14px; align-items: center; }
.gx-nav .links a.l { color: var(--text-2); font: 13px var(--font-display); letter-spacing: .08em; }
.gx-nav .links a.l:hover { color: var(--neon); }

.gx-hero { text-align: center; padding: 46px 16px 18px; max-width: 900px; margin: 0 auto; }
.gx-hero h1 { font-size: clamp(34px, 6vw, 64px); letter-spacing: .02em; }
.gx-hero h1 span { background: var(--neon-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gx-hero p { color: var(--text-2); margin: 10px auto 0; max-width: 620px; }
.gx-filter { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 22px 0 6px; }
.gx-filter button { border: 1px solid var(--line-2); background: rgba(var(--n-8-18-44), .45); color: var(--text-2); padding: 6px 14px; border-radius: 99px; font: 12.5px var(--font-display); letter-spacing: .06em; }
.gx-filter button.on { color: var(--neon); border-color: rgba(var(--neon-rgb), .55); box-shadow: 0 0 16px rgba(var(--neon-rgb), .18); background: var(--neon-soft); }

.gx-grid { columns: 4 260px; column-gap: 14px; max-width: 1240px; margin: 18px auto 40px; padding: 0 12px; }
.gx-card { break-inside: avoid; margin: 0 0 14px; border-radius: 14px; overflow: hidden; position: relative; border: 1px solid var(--line); background: rgba(var(--n-10-22-52), .7); cursor: pointer; display: block; color: inherit;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease, box-shadow .25s, border-color .25s; will-change: transform; }
.gx-card:hover { border-color: rgba(var(--neon-rgb), .5); box-shadow: 0 18px 40px rgba(0, 0, 0, .25), 0 0 26px rgba(var(--neon-rgb), .18); }
.gx-card img, .gx-card video { display: block; width: 100%; height: auto; }
.gx-card .ph { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(var(--neon-rgb), .25), transparent 60%), linear-gradient(160deg, rgba(var(--n-30-52-104), .9), rgba(var(--n-10-22-52), .9)); color: var(--neon); }
.gx-card .ph svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.4; filter: drop-shadow(0 0 10px rgba(var(--neon-rgb), .6)); }
.gx-card .cap { padding: 9px 11px 10px; display: grid; gap: 2px; }
.gx-card .cap b { font-weight: 500; font-size: 13.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gx-card .cap span { font: 11px var(--font-mono); color: var(--text-3); display: flex; gap: 10px; }
.gx-card .kind { position: absolute; top: 8px; left: 8px; font: 600 10px var(--font-mono); letter-spacing: .08em; padding: 2px 7px; border-radius: 5px; background: rgba(0, 0, 0, .55); color: #fff; text-transform: uppercase; }
.gx-card .hide { position: absolute; top: 8px; right: 8px; font-size: 11px; padding: 2px 9px; border-radius: 6px; border: 1px solid rgba(255,255,255,.35); background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; transition: opacity .2s, background .2s; }
.gx-card:hover .hide, .gx-card .hide:focus-visible { opacity: 1; }
.gx-card .hide:hover { background: rgba(219, 47, 85, .9); }
@media (hover: none) { .gx-card .hide { opacity: .85; } }
/* แสงโฮโลแกรมไล่ตามเมาส์ */
.gx-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 45%), linear-gradient(115deg, transparent 30%, rgba(var(--neon-rgb), .14) 48%, rgba(183, 168, 255, .12) 52%, transparent 70%); mix-blend-mode: screen; }
.gx-card:hover::after { opacity: 1; }
.gx-more { display: block; margin: 0 auto 60px; }
.gx-empty { text-align: center; color: var(--text-3); padding: 40px 12px; }

/* หน้าแชร์ */
.share-wrap { max-width: 1180px; margin: 22px auto 60px; padding: 0 14px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.share-stage { padding: 10px; display: grid; place-items: center; min-height: 300px; }
.share-stage img, .share-stage video { max-width: 100%; max-height: 78vh; border-radius: 12px; display: block; }
.share-stage iframe.game { width: 100%; aspect-ratio: 9 / 14; max-height: 80vh; border: 0; border-radius: 12px; background: #000; }
.share-stage .song { width: 100%; display: grid; gap: 14px; justify-items: center; padding: 20px 6px; }
.share-stage .song audio { width: 100%; }
.share-stage .song details { width: 100%; } .share-stage .song pre { white-space: pre-wrap; font: 14px/1.7 var(--font); color: var(--text-2); }
.disc { width: 180px; height: 180px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(var(--n-10-22-52), 1) 0 2px, rgba(var(--n-30-52-104), 1) 2px 4px); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line-2), 0 0 40px rgba(var(--neon-rgb), .25); animation: spin 8s linear infinite; }
.disc[style] { background-size: cover; background-position: center; }
.disc[style] i { width: 26px; height: 26px; background: #0B1A3D; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.disc i { width: 56px; height: 56px; border-radius: 50%; background: var(--neon-grad); box-shadow: 0 0 20px rgba(var(--neon-rgb), .6); }
@keyframes spin { to { transform: rotate(360deg); } }
.share-info { display: grid; gap: 12px; }
.share-info h1 { font-size: clamp(24px, 3.4vw, 34px); }
.share-info .prompt p { color: var(--text-2); font-size: 14px; white-space: pre-wrap; }
.share-cta { padding: 16px; display: grid; gap: 8px; justify-items: start; border-color: rgba(var(--neon-rgb), .35); }
.share-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.share-acts .on { color: #FF6B86; border-color: rgba(255, 107, 134, .5); }
@media (max-width: 820px) { .share-wrap { grid-template-columns: 1fr; } .gx-nav .links a.l { display: none; } .gx-grid { columns: 2 150px; column-gap: 10px; } .gx-card { margin-bottom: 10px; } }
@media (prefers-reduced-motion: reduce) { .disc { animation: none; } .gx-card { transform: none !important; } }
.gx-card .cov { position: relative; }
.gx-card .ph-ic { position: absolute; right: 10px; bottom: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); }
.gx-card .ph-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }