/* Shared link rhythm; original artwork keeps its own colors and proportions. */
#links, #linkList { --link-icon-size: 44px; --link-gap: 14px; }
.social-brand {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--link-icon-size); height: var(--link-icon-size); flex: 0 0 var(--link-icon-size);
  border-radius: 12px; background: #fff; overflow: hidden;
}
.social-brand img { display: block; width: 34px; height: 34px; object-fit: contain; }
.social-brand-x { background: #000; }
.social-brand-x img { width: 26px; height: 27px; }
.social-brand-discord { background: #5865f2; }
.social-brand-discord img { width: 30px; height: 23px; }
.social-brand-vrc img { width: 40px; height: 30px; }
.social-brand-booth { background: #fc4d50; }
.social-brand-fanbox { background: #faf18a; }
.social-brand-amazon { background: #ff6200; }
.social-brand-amazon img { width: 44px; height: 44px; }
.social-brand-booth img { width: 40px; height: 40px; }
.social-brand-fanbox img { width: 32px; height: 32px; }
#links .link-icon, #linkList .bl-icon {
  width: var(--link-icon-size); height: var(--link-icon-size); flex: 0 0 var(--link-icon-size);
  border-radius: 12px; box-shadow: none; transform: none; transition: none;
}
#links .link-icon:has(img), #linkList .bl-icon:has(img) { background: none; box-shadow: none; }
#links .link-icon { color: #336b86; background: rgba(160,215,250,.12); }
#links.zone-deep .link-icon { color: #bfe4fd; }
#links .link-tiktok .link-icon, #linkList .kind-tiktok .bl-icon { background: #000; }
#links .tt-official-logo, #linkList .tt-official-logo { width: 40px; height: 40px; flex-basis: 40px; }
#links .link-icon svg, #linkList .bl-icon svg { width: 22px; height: 22px; }
#links .link-icon .social-function, #links .link-archive .link-icon svg, .bl-icon .social-function { fill: none; }

#links .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; max-width: 840px; margin: 0 auto; }
#links .link-card { min-width: 0; min-height: 92px; gap: var(--link-gap); padding: 18px 12px; border-radius: 12px; transition: background-color .18s ease-out; }
#links .link-card:hover { padding: 18px 12px; background: rgba(160,215,250,.08); }
#links .link-name, #linkList .bl-label { font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
#links .link-handle, #linkList .bl-handle { margin-top: 4px; font-size: 12px; line-height: 1.65; letter-spacing: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-overflow: clip; }
#links.zone-deep .link-handle { color: #c8deee; }
#links .link-arrow, #linkList .bl-arrow { opacity: 1; transform: none; width: 18px; text-align: center; font-size: 18px; transition: color .18s ease-out; }
#links .link-card:hover .link-arrow, #linkList .bubble-link:hover .bl-arrow { transform: none; opacity: 1; }
#links .link-card:focus-visible { outline: 2px solid #16344d; outline-offset: 4px; }
#links.zone-deep .link-card:focus-visible { outline-color: #9fd8fb; }
#linkList .bubble-link { min-width: 0; min-height: 96px; padding: 18px; gap: var(--link-gap); border-radius: 18px; }
#linkList .bl-arrow { color: #52738b; }
#linkList .bubble-link.row-deep .bl-handle { color: #c8deee; }
#linkList .bubble-link.row-deep .bl-arrow { color: #bfe4fd; }
#linkList .bubble-link:focus-visible { outline: 3px solid #16344d; outline-offset: 4px; }
#linkList .bubble-link.row-deep:focus-visible { outline-color: #bfe4fd; }
@media (max-width: 640px) {
  #links .links-grid { grid-template-columns: minmax(0, 1fr); }
  #links .link-card, #links .link-card:hover { padding-left: 4px; padding-right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #links .link-card, #links .link-arrow, #linkList .bubble-link, #linkList .bl-arrow { transition: none; }
}