/*
  ExyuTek site layer — layout only, on top of TechStoneUI (css/techstone.css).
  All colors, shadows, radii and spacing come from TechStoneUI tokens.
  Don't edit techstone.css; change tokens by overriding them here if needed.
*/
:root { --logo-filter: invert(0.84); }
.theme-dark { --logo-filter: none; }
@media (prefers-color-scheme: dark) { :root:not(.theme-light) { --logo-filter: none; } }

.skip-link { position: absolute; left: -999px; top: 0.5rem; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); border-radius: var(--radius-md); }
.skip-link:focus { left: 0.5rem; }

.brand { display: inline-flex; align-items: center; gap: var(--space-3); }
.brand .tld { color: var(--color-text-muted); font-weight: var(--weight-normal, 400); }
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .nav { height: auto; min-height: var(--nav-height); flex-wrap: wrap; padding-block: var(--space-2); }
  .nav-toggle { display: inline-flex; }
  .nav-right { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: var(--space-2); }
  .nav-right.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; }
}

main { padding-block: var(--space-6) var(--space-12, 4rem); }
.eyebrow { margin: 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-muted); }
.lead { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 46rem; }
.grad { color: var(--color-accent); }

.hero { padding-block: var(--space-12, 4rem) var(--space-8); }
.hero h1 { font-size: var(--text-4xl); margin: var(--space-3) 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.section-head h2 { margin: 0; }

.page-head { padding-block: var(--space-10) var(--space-5); }
.page-head h1 { margin: 0 0 var(--space-3); }
.prose { max-width: 46rem; }
.prose > * + * { margin-top: var(--space-4); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.filters .btn[aria-pressed="true"] { color: var(--color-accent-text); background-image: none; box-shadow: var(--shadow-inset-sm); }
.grid { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-6); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-5); }
.feature { padding: var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-inset); }
.feature h3 { margin: 0 0 var(--space-2); }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card-body { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; }
.card-title { margin: 0; font-size: var(--text-lg); }
.card-tagline { margin: 0; }
.card-platforms, .card-version { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; flex-wrap: wrap; }
.card-actions { display: flex; gap: var(--space-2); }
.price { font-weight: var(--weight-semibold); }
.price-lg { font-size: var(--text-2xl); }
.empty, .fineprint { color: var(--color-text-muted); }
.fineprint { font-size: var(--text-xs); }

.crumbs { color: var(--color-text-muted); font-size: var(--text-sm); }
.detail-head h1 { margin: var(--space-3) 0; }
.detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); margin-top: var(--space-6); align-items: start; }
@media (max-width: 800px) { .detail-body { grid-template-columns: 1fr; } }
.detail-box { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.meta dt { color: var(--color-text-muted); }
.meta dd { margin: 0; }
.btn-block { width: 100%; justify-content: center; }

.notice { border: none; border-radius: var(--radius-xl); padding: var(--space-6); max-width: 28rem; background: var(--color-bg-elevated); color: var(--color-text); box-shadow: var(--shadow-raised-lg); }
.notice::backdrop { background: rgba(0, 0, 0, 0.5); }

.site-footer { margin: var(--space-10) var(--space-4) var(--space-4); padding: var(--space-6); border-radius: var(--radius-xl); background: var(--color-bg-elevated); box-shadow: var(--shadow-inset); }
.footer-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6); }
.footer-inner h2 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); }
.footer-inner ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.copyright { margin-top: var(--space-6); font-size: var(--text-xs); color: var(--color-text-muted); }
.link-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ExyuTek logo: wordmarks are white-on-dark, so they sit on a black plate in both themes */
.nav-brand.brand { background: #000; padding: 0.4rem 0.9rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-inset-sm); }
.logo-wordmark { display: block; height: 1.6rem; width: auto; }

/* Accent = the red diamond from the ExyuTek logo (#ff0022); overrides TechStoneUI tokens */
:root, .theme-light {
  --color-accent: #ff0022;
  --color-accent-hover: #d6001c;
  --color-accent-muted: #f6d3d8;
  --color-accent-text: #c4001b;
  --color-accent-fill: #e0001f;
  --color-accent-fill-hover: #c40019;
}
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --color-accent: #ff3b55;
    --color-accent-hover: #ff6679;
    --color-accent-muted: #4a2a30;
    --color-accent-text: #ff8a99;
    --color-accent-fill: #e0001f;
    --color-accent-fill-hover: #f21b3a;
  }
}
.theme-dark {
  --color-accent: #ff3b55;
  --color-accent-hover: #ff6679;
  --color-accent-muted: #4a2a30;
  --color-accent-text: #ff8a99;
  --color-accent-fill: #e0001f;
  --color-accent-fill-hover: #f21b3a;
}


.card-thumb img { object-position: top; }

/* games: icons, thumbnails, downloads, carousel */
.game-icon { flex: none; border-radius: var(--radius-lg); object-fit: cover; background: #000; box-shadow: var(--shadow-raised-sm); }
.game-icon-sm { width: 3.5rem; height: 3.5rem; }
.game-icon-lg { width: 7rem; height: 7rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); }
.card-titlerow { display: flex; align-items: center; gap: var(--space-3); }
.card-titlerow .card-title { min-width: 0; }
.detail-head { display: flex; align-items: center; gap: var(--space-6); }
.detail-head-text h1 { margin: var(--space-2) 0; }
@media (max-width: 560px) { .game-icon-lg { width: 5rem; height: 5rem; } .detail-head { gap: var(--space-4); } }

.card-thumb { display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-inset-sm); aspect-ratio: 16 / 9; background: #000; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.detail-section { margin-top: var(--space-8); }
.detail-section h2 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.dl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.dl-list li { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.carousel { margin-top: var(--space-6); max-width: 60rem; }
.carousel-frame { position: relative; border-radius: var(--radius-xl); box-shadow: var(--shadow-inset); background: #000; overflow: hidden; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { box-shadow: var(--focus-ring); }
.carousel-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; aspect-ratio: 16 / 9; }
.carousel-slide a { display: block; width: 100%; height: 100%; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; padding: 0; justify-content: center; font-size: 1.75rem; line-height: 1; border-radius: var(--radius-full); }
.carousel-prev { left: var(--space-3); }
.carousel-next { right: var(--space-3); }
.carousel-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.carousel-dot { width: 0.8rem; height: 0.8rem; padding: 0; border: none; border-radius: var(--radius-full); background: var(--color-bg-elevated); box-shadow: var(--shadow-raised-sm); cursor: pointer; }
.carousel-dot[aria-current="true"] { background: var(--color-accent-fill); box-shadow: var(--shadow-inset-sm); }
@media (prefers-reduced-motion: reduce) { .carousel-track { scroll-behavior: auto; } }
.container.prose { max-width: var(--container-max); }
.container.prose > * { max-width: 46rem; }

/* Home hero logo: black-text version in light mode, white-text version in dark mode */
.hero-logo { margin: 0; }
.hero-logo-img { display: block; width: min(100%, 46rem); height: auto; }
.logo-for-dark { display: none; }
.theme-dark .logo-for-dark { display: block; }
.theme-dark .logo-for-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .logo-for-dark { display: block; }
  :root:not(.theme-light) .logo-for-light { display: none; }
}
.hero-slogan { margin: var(--space-2) 0 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); }
/* Hero logo depth: soft drop shadow in light mode, subtle glow in dark mode */
.logo-for-light { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)); }
.logo-for-dark { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.35)) drop-shadow(0 0 18px rgba(120, 150, 255, 0.35)); }