/*

Custom style

You can override the default class or style here

This file will not be overwritten by the updater

*/

main {
    background: url(/content/themes/gamefunbar/images/background.svg);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: contain;
}

  /* 隐藏滚动条 */
  .no-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .no-scrollbar {
    -ms-overflow-style: none; /* IE/Edge */
    scrollbar-width: none; /* Firefox */
  }


.container a {
    color: var(--color-violet-400);
}
.container h1 {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}
.container h3 {
    font-size: 1.17em;
    margin-top: .2rem;
    margin-bottom: .2rem;
    font-weight: bold;
}
.container p {
    padding-bottom: 1rem;
}
.container ul {
	padding-top: .6rem;
    padding-bottom: 1rem;
}



/* 隐藏Swiper自动生成的按钮 */
.swiper-button-prev:after, .swiper-button-next:after {
    display: none;
}
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
    opacity: 0;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -4px);
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -4px);
}

.swiper-slide:hover span{
	background:linear-gradient(315deg, rgb(103 88 250 / 100%) 0%, rgb(140 88 250 / 100%) 100%);
}


.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}
.span-2 h3 {
    font-size: 1.25rem;
}



/*Show More*/
.truncate-wrapper {
	position: relative;
	width: 100%;
}

.truncate-content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: height 0.3s ease;
}

.truncate-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	padding-left: 0rem;
	cursor: pointer;
	white-space: nowrap;
	z-index: 2;
}

.truncate-toggle::after {
	content: "";
	position: absolute;
	left: -20px;
	right: 0;
	top: 0;
	bottom: 0;
	background: inherit;
	z-index: -1;
}
/*Show More*/


/**
 * 安全区域适配工具类 (Safe Area Utilities)
 * 特性：
 * 1. 自动适配 iOS 刘海屏/Home Indicator
 * 2. 非 iOS 设备回退到常规间距
 * 3. 提供全方位（上、右、下、左、水平和垂直）控制
 */
.safe-area {
  padding-top: max(env(safe-area-inset-top, 0), 0rem);
  padding-right: max(env(safe-area-inset-right, 0), 0rem);
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0rem);
  padding-left: max(env(safe-area-inset-left, 0), 0rem);
}

/* 单边控制 */
.safe-area-t {
  padding-top: max(env(safe-area-inset-top, 0), 0rem);
}
.safe-area-r {
  padding-right: max(env(safe-area-inset-right, 0), 0rem);
}
.safe-area-b {
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0rem); /* 底部默认更大的回退值 */
}
.safe-area-l {
  padding-left: max(env(safe-area-inset-left, 0), 0rem);
}

/* 轴向控制 */
.safe-area-x {
  padding-left: max(env(safe-area-inset-left, 0), 0rem);
  padding-right: max(env(safe-area-inset-right, 0), 0rem);
}
.safe-area-y {
  padding-top: max(env(safe-area-inset-top, 0), 0rem);
  padding-bottom: max(env(safe-area-inset-bottom, 0), 0rem);
}

/* 边缘定位适配（用于 fixed/absolute 元素） */
.safe-area-inset-t {
  top: max(env(safe-area-inset-top, 0), 0rem);
}
.safe-area-inset-b {
  bottom: max(env(safe-area-inset-bottom, 0), 0rem);
}
.safe-area-inset-l {
  left: max(env(safe-area-inset-left, 0), 0rem);
}
.safe-area-inset-r {
  right: max(env(safe-area-inset-right, 0), 0rem);
}

/**
 * 高级用法：CSS变量控制回退值
 * 示例：<div class="safe-area-custom" style="--fallback: 2rem">
 */
.safe-area-custom {
  padding-bottom: max(env(safe-area-inset-bottom, 0), var(--fallback, 1rem));
}


.safe-area-custom-t-2 {
  padding-top: max(env(safe-area-inset-top, 0.5rem), 0.5rem);
}
.safe-area-custom-t-4 {
  padding-top: max(env(safe-area-inset-top, 1rem), 1rem);
}


/* 安全区域适配 - 兼容所有设备 */
.safe-area-padding {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(1rem + constant(safe-area-inset-bottom, 0px)); /* 兼容旧版iOS */
}


.youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 比例 */
    overflow: hidden;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/**
 * 图标一致性
 */
/**
#Categories-icon-io-games img {
    width: 21px;
    height: 21px;
}
*/
[id^="Categories-icon-"] img{
    padding: 6px;
}
img[class*="swiper-icon-"] {
    padding: 10px;
}

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        
        .animate-pulse-infinite {
            animation: pulse 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1);
        }
        
        .play-btn {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .play-btn:hover {
            animation: none;
            transform: scale(1.2);
        }
		
@media (min-width: 1400px) {
	.grid-layout {
	    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	    grid-gap: 20px;
	    grid-auto-rows: minmax(140px, auto);
	}
	
    .drawer-open {
        width: calc((100vw - 1280px) / 2 + 400px);
    }
    
    /* LTR (默认) */
    [dir="ltr"] .drawer-open,
    .drawer-open:not([dir="rtl"]) {
        padding-left: calc((100vw - 1280px) / 2 + 40px);
    }
    
    /* RTL */
    [dir="rtl"] .drawer-open {
        padding-right: calc((100vw - 1280px) / 2 + 40px);
        padding-left: unset; /* 确保左边没有 padding */
    }
}
@media (max-width: 1024px) {
	.grid-layout {
	    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) ;
		grid-gap: 15px !important;
	    grid-auto-rows: minmax(120px, auto);
	}
}
@media (max-width: 912px) {
    .grid-layout {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        grid-gap: 15px !important;
        grid-auto-rows: minmax(90px, auto);
    }
}
@media (max-width: 820px) {
	.grid-layout {
	    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		grid-gap: 15px !important;
	    grid-auto-rows: minmax(80px, auto);
	}
}
@media (max-width: 768px) {
	.grid-layout {
	    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
		grid-gap: 15px !important;
	    grid-auto-rows: minmax(80px, auto);
	}
}
@media (max-width: 576px) {
	.grid-layout {
		display: grid;
	    grid-template-columns: repeat(auto-fill, minmax(18vw, 1fr))  !important;
		grid-gap: 12px !important;
	    grid-auto-rows: minmax(18vw, auto)  !important;
		grid-auto-flow: dense;
	}
}