:root {
  --k2040-icon-size: 1.5rem;
  --k2040-frame-color: rgba(0, 207, 215, .54);
  --k2040-frame-inner: rgba(0, 207, 215, .52);
  --k2040-frame-glow: rgba(0, 210, 220, .08);
}

/* The global K2040 menu carries the K2040 symbol. Main Home stays text-only;
   Android and Gaming keep their site-specific Home symbols. */
.global-menu > summary::before,
body[data-k2040-site="android"] [data-k2040-site-home]::before,
body[data-k2040-site="gaming"] [data-k2040-site-home]::before {
  width: var(--k2040-icon-size);
  height: var(--k2040-icon-size);
  flex: 0 0 var(--k2040-icon-size);
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.global-menu > summary::before {
  background-image: url("/assets/icons/k2040-home.webp");
}

body[data-k2040-site="android"] [data-k2040-site-home]::before {
  background-image: url("/assets/icons/k2040-android.webp?v=20260826outline1");
}

body[data-k2040-site="gaming"] [data-k2040-site-home]::before {
  background-image: url("/assets/icons/k2040-gaming.webp?v=20260826outline1");
}

.k2040-icon,
.site-family-icon,
.external-platform-icon,
.external-platform-icon--monogram,
.brand-icon,
.brand-icon svg {
  width: var(--k2040-icon-size);
  height: var(--k2040-icon-size);
  flex: 0 0 var(--k2040-icon-size);
}

.k2040-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.k2040-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.k2040-icon--main,
.k2040-icon--gaming {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Canonical frame. This file owns shared panel geometry at every breakpoint. */
.hero,
.content-section,
.detail-card,
.app-promo-card,
.esca-promo-section,
.geo-promo-section,
.update-card,
.project-card,
.project-detail-hero,
.featured-game-art-placeholder,
.screenshot-card,
.screenshot-grid figure,
.site-footer {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--k2040-frame-color);
  box-shadow:
    inset 0 0 0 1px var(--k2040-frame-color),
    0 0 0 1px rgba(0, 130, 143, .32),
    0 0 22px var(--k2040-frame-glow),
    inset 0 0 30px rgba(0, 209, 219, .035),
    0 20px 44px rgba(0, 0, 0, .24);
  clip-path: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}

/* The inner frame is one scalable border image for every framed panel. Fixed
   corner slices and stretched edges avoid height-dependent 1px rasterization. */
.hero::before,
.content-section::before,
.detail-card::before,
.app-promo-card::before,
.esca-promo-section::before,
.geo-promo-section::before,
.update-card::before,
.project-card::before,
.project-detail-hero::before,
.featured-game-art-placeholder::before,
.screenshot-card::before,
.screenshot-grid figure::before,
.site-footer::before {
  position: absolute;
  z-index: 3;
  inset: 7px;
  box-sizing: border-box;
  pointer-events: none;
  content: "";
  border: 8px solid transparent;
  border-image-source: url("/assets/k2040-inner-frame.svg");
  border-image-slice: 8;
  border-image-width: 8px;
  border-image-repeat: stretch;
  box-shadow: none;
  background:
    linear-gradient(90deg, #00d9e5, transparent) 8px 0 / 3.5rem 1px no-repeat,
    linear-gradient(180deg, #00d9e5, transparent) 0 8px / 1px 3.5rem no-repeat,
    linear-gradient(-90deg, #00d9e5, transparent) calc(100% - 8px) 100% / 3.5rem 1px no-repeat,
    linear-gradient(0deg, #00d9e5, transparent) 100% calc(100% - 8px) / 1px 3.5rem no-repeat;
  background-origin: border-box;
}

/* About sections carry description only; destinations live in the canonical footer. */
.about-section .about-links {
  display: none;
}

/* Canonical buttons-only footer. Frame styling comes from the shared frame above. */
.site-footer {
  margin-top: 1.5rem;
  padding: 1.4rem;
  background: var(--surface, #10171f);
  color: var(--muted, #aeb9c3);
  text-align: left;
}

.k2040-footer-links {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin: 0;
}

.k2040-footer-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid rgba(0, 207, 215, .34);
  border-bottom-color: #00d9e5;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(0, 217, 229, .09), var(--strong, #17212a));
  box-shadow: inset 0 -2px 0 #00d9e5, 0 0 10px rgba(0, 217, 229, .08);
  color: var(--accentText, #a3d8f5);
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.k2040-footer-link:hover,
.k2040-footer-link:focus-visible {
  border-color: rgba(0, 240, 242, .58);
  border-bottom-color: #00f0f2;
  background: linear-gradient(180deg, rgba(0, 217, 229, .16), var(--surface, #10171f));
  box-shadow: inset 0 -2px 0 #00f0f2, 0 0 13px rgba(0, 217, 229, .18);
  color: var(--text, #edf1f5);
  outline: none;
}

@media (max-width: 760px) {
  .hero,
  .content-section,
  .detail-card,
  .app-promo-card,
  .esca-promo-section,
  .geo-promo-section,
  .update-card,
  .project-card,
  .project-detail-hero,
  .featured-game-art-placeholder,
  .screenshot-card,
  .screenshot-grid figure,
  .site-footer {
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
  }

  .hero::before,
  .content-section::before,
  .detail-card::before,
  .app-promo-card::before,
  .esca-promo-section::before,
  .geo-promo-section::before,
  .update-card::before,
  .project-card::before,
  .project-detail-hero::before,
  .featured-game-art-placeholder::before,
  .screenshot-card::before,
  .screenshot-grid figure::before,
  .site-footer::before {
    inset: 5px;
  }

  .site-footer {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .k2040-footer-link {
    transition: none;
  }
}