/* Dpgame extracted stylesheet: /assets/css/app.css */

:root{
				  --topbar-h: 76px;
				  --center-max: 1500px;
				  --side-max: 350px;
				  --gap: 12px;
				  --page-max: 2224px;
				  --radius: 12px;

				  /* Swiper 控制顏色跟著字色 */
				  --swiper-navigation-color: var(--fg);
				  --swiper-pagination-color: var(--fg);
				}

				/* 主題變數 */
				body.dark{
				  --bg:#000;
				  --fg:#fff;
				  --fg-muted:#ddd;
				  --link:#4da6ff; /* 僅在需要時使用，不再全域套用 */
				  --topbar-grad: linear-gradient(to bottom,#141414,#000);
				  --btn-bg:#fff; --btn-fg:#000;
				  --card-bg: rgba(255,255,255,0.06);
				  --border: rgba(255,255,255,0.15);
				}
				body.light{
				  --bg:#fff;
				  --fg:#111;
				  --fg-muted:#555;
				  --link:#0066cc;
				  --topbar-grad: linear-gradient(to bottom,#ffffff,#ededed);
				  --btn-bg:#111; --btn-fg:#fff;
				  --card-bg:#f7f7f9;
				  --border:#e6e6ea;
				}

				*{box-sizing:border-box}
				html,body{
				  margin:0;height:100%;
				  background:var(--bg); color:var(--fg);
				  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans TC",sans-serif
				}

				/* ✅ 連結預設跟著父層顏色走，避免黑色主題整片變藍 */
				a{ color: inherit; text-decoration:none }

				img{display:block;max-width:100%}
				p,span,li{color:var(--fg-muted)}

				/* 頂欄 */
				.topbar{
				  position:fixed;inset:0 0 auto 0;height:var(--topbar-h);
				  background:var(--topbar-grad);border-bottom:1px solid var(--border);z-index:40
				}
				.topbar-inner{
				  width:min(95vw,var(--page-max));margin:0 auto;height:var(--topbar-h);
				  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 16px
				}
				.brand{display:flex;align-items:center}
				.brand img{height:calc(var(--topbar-h) - 16px);width:auto;object-fit:contain}
				.nav{display:flex;align-items:center;gap:24px;font-weight:600}

				/* 頂欄連結：深色維持主文字色，白色主題改為藍色更顯眼 */
				.nav a{ color: var(--fg); }
				.nav a:hover{ opacity:.85; }
				body.light .nav a{ color: var(--link); }
				body.light .nav a:hover{ color:#003366; }

				/* 漢堡 */
				.nav-toggle{
				  display:inline-flex;width:40px;height:40px;
				  border:1px solid var(--border);border-radius:10px;background:var(--card-bg);
				  align-items:center;justify-content:center;cursor:pointer;position:relative;
				}
				.nav-toggle span{
				  position:absolute;left:50%;top:50%;
				  width:22px;height:2px;background:var(--fg);border-radius:1px;
				  transform:translate(-50%,-50%);transition:.2s;
				}
				.nav-toggle span:nth-child(1){ transform:translate(-50%, calc(-50% - 7px)); }
				.nav-toggle span:nth-child(2){ transform:translate(-50%, -50%); }
				.nav-toggle span:nth-child(3){ transform:translate(-50%, calc(-50% + 7px)); }
				.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
				.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
				.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

				/* 版面 */
				@media (min-width:981px){
			  body{overflow:hidden;}
			}
				.stage{
				  position:fixed;top:calc(var(--topbar-h) + var(--gap));left:50%;transform:translateX(-50%);
				  z-index:20;width:min(95vw,var(--page-max));display:grid;gap:var(--gap);align-items:start;
				  grid-template-columns:
					clamp(0px, calc((100% - var(--center-max) - (2 * var(--gap))) / 2), var(--side-max))
					minmax(0,var(--center-max))
					clamp(0px, calc((100% - var(--center-max) - (2 * var(--gap))) / 2), var(--side-max));
				}
				.side{
				  height:1350px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);
				  background:var(--bg);pointer-events:none
				}
				.side img{width:100%;height:100%;object-fit:cover}

				/* 中央 */
				.center{position:relative}
				.center-scroll{
				  height:calc(100vh - var(--topbar-h) - var(--gap));
				  border-radius:var(--radius);border:1px solid var(--border);
				  background:var(--bg);overflow-y:auto;overflow-x:hidden;
				  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:auto
				}
				.center-scroll::-webkit-scrollbar{width:0;height:0}

				/* Hero */
				.hero{width:100%;display:grid;place-items:center;background:var(--bg)}
				.hero-inner{width:100%;max-width:var(--center-max);aspect-ratio:1500/563;border-radius:var(--radius);overflow:hidden}
				.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide{width:100%;height:100%}
				.hero .swiper-slide{display:block;background:var(--bg)}
				.hero .swiper-slide>img{width:100%;height:100%;object-fit:cover}
				.hero .swiper-button-prev,.hero .swiper-button-next{filter:drop-shadow(0 0 4px rgba(0,0,0,.6))}

				/* Section & Grid */
				.section{padding:14px 12px 18px}
				.section h2{
				  font-size:20px;margin:0 0 12px;padding:8px 12px;background:var(--card-bg);
				  border:1px solid var(--border);border-radius:8px;color:var(--fg)
				}
				.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;padding:0 12px 24px}

				/* 卡片（本身是 <a>，維持主文字色，不吃藍色） */
				.game-card{
				  background:var(--card-bg);border:1px solid var(--border);border-radius:14px;
				  overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease;max-width:280px;margin:0 auto;
				  color: var(--fg);
				}
				.game-card:hover{transform:translateY(-2px)}
				.game-card .thumb{width:100%;height:260px;overflow:hidden;background:var(--bg)}
				.game-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
				.game-card .meta{padding:10px;text-align:center}
				.game-card h3{font-size:15px;margin:0 0 4px}
				.game-card p{margin:0;color:var(--fg-muted);font-size:13px}

				@media (max-width:980px){
  html, body{
    height:auto !important;
    min-height:100%;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y !important;
  }

  body{
    padding-top:var(--topbar-h);
  }

  body.age-locked{
    position:fixed;
    width:100%;
    overflow:hidden !important;
    touch-action:none !important;
  }

  body:not(.age-locked){
    overflow-y:auto !important;
  }

  .topbar-inner{width:100%}
  .nav{display:none}
  .nav-toggle{display:inline-flex}

  .stage{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    grid-template-columns:1fr;
    gap:8px;
  }

  .side{display:none}

  .center-scroll{
    height:auto !important;
    min-height:calc(100vh - var(--topbar-h));
    overflow:visible !important;
    border-radius:0;
    border-left:0;
    border-right:0;
    -webkit-overflow-scrolling:auto;
    overscroll-behavior:auto;
    touch-action:pan-y !important;
  }

  .hero{
    overflow:hidden;
    touch-action:pan-y !important;
  }

  .hero-inner{
    max-width:100%;
    aspect-ratio:1500/600;
    border-radius:0;
  }

  .hero .swiper,
  .hero .swiper-wrapper,
  .hero .swiper-slide{
    width:100%;
    height:100%;
    touch-action:pan-y !important;
  }

  .hero .swiper-slide > img,
  .hero .swiper-slide video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    background:var(--bg);
    pointer-events:none;
  }

  .grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    padding:0 12px 20px;
  }

  .game-card{
    max-width:none;
    width:100%;
    margin:0;
  }

  .game-card .thumb{
    width:100%;
    aspect-ratio:1/1;
    height:auto;
    overflow:hidden;
  }

  #site-nav{
    position:fixed;
    left:0;
    right:0;
    top:var(--topbar-h);
    background:var(--bg);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    display:none;
    flex-direction:column;
    gap:8px;
    padding:12px 16px;
    z-index:1000;
    pointer-events:auto;
  }

  #site-nav.open{ display:flex; }

  #site-nav a{
    display:block;
    padding:10px 12px;
    border-radius:10px;
    background:var(--card-bg);
    color:var(--fg);
    font-size:14px;
  }
}

				@media (max-width:380px){ .grid{ grid-template-columns: 1fr; } }

				@media (min-width:981px){
				  .brand img{ height:calc(var(--topbar-h) - 16px); width:auto; margin-left:250px; }
				}
				.hero .swiper-slide video {
			  width: 100%;       /* 跟容器一樣寬 */
			  height: auto;      /* 高度依比例縮放 */
			  max-width: 100%;   /* 保證不超出 */
			  display: block;    /* 移除 inline 影響 */
			}
			/* ===== Age Gate ===== */

			#age-gate{
			position:fixed;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:rgba(0,0,0,0.9);
			display:none;
			align-items:center;
			justify-content:center;
			z-index:9999;
			}

			.age-box{
			width:90%;
			max-width:520px;
			background:#fff;
			color:#000;
			padding:30px;
			border-radius:12px;
			text-align:center;
			}

			.age-title{
			font-size:22px;
			font-weight:700;
			margin-bottom:15px;
			}

			.age-btns{
			display:flex;
			gap:10px;
			justify-content:center;
			margin-top:20px;
			}

			.age-enter{
			background:#ff5b8f;
			color:#fff;
			border:none;
			padding:12px 24px;
			border-radius:8px;
			font-size:16px;
			cursor:pointer;
			}

			.age-leave{
			background:#6fa3d8;
			color:#fff;
			border:none;
			padding:12px 24px;
			border-radius:8px;
			font-size:16px;
			cursor:pointer;
			}

			.age-note{
			margin-top:18px;
			font-size:13px;
			color:#444;
			line-height:1.6;
			}

/* ===== R18 Age Gate (non-invasive) ===== */
			:root{
			  /* 🔧 把這裡換成你的底圖（同網域路徑/檔名/URL） */
			  --age-bg-url: url("https://www.dell.com/community/assets/community/687062f5-603c-4f5f-ab9d-31aa7cacb376/anime_bg_rgb-aa91e357-d6ba-4b87-b8ea-c21c25a90d58-1942124487.png");
			  --age-border: #ff7aa8;
			  --age-pink: #ff6f9e;
			  --age-blue: #6aa8ff;
			}

			body.age-locked{ overflow:hidden; }
			body.age-locked #site-content{ visibility:hidden; pointer-events:none; }

			#age-gate{
			  position:fixed; inset:0; z-index:999999;
			  display:none;
			  align-items:center; justify-content:center;
			  padding:24px;
			}
			.age-icon{
			margin-bottom:10px;
			}

			.age-icon img{
			width:70px;
			height:auto;
			display:block;
			margin:0 auto;
			}

			#age-gate .age-bg{
			  position:absolute; inset:-24px;
			  background:
				linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.62)),
				var(--age-bg-url) center/cover no-repeat;
			  filter: blur(14px);
			  transform: scale(1.08);
			}

			#age-gate .age-shade{
			  position:absolute; inset:0;
			  background: rgba(0,0,0,.10);
			}

			#age-gate .age-card{
			  position:relative;
			  width:min(860px, calc(100vw - 48px));
			  background:#fff;
			  border:6px solid var(--age-border);
			  border-radius:10px;
			  padding:34px 36px 18px;
			  box-shadow:0 20px 60px rgba(0,0,0,.45);
			  text-align:center;
			  color:#111;
			}

			#age-gate h2{
			  margin:6px 0 14px;
			  font-size:28px;
			  font-weight:800;
			}

			#age-gate .age-lead{
			  margin:0;
			  font-size:16px;
			  color:#111;
			}
			#age-gate .age-q{
			  margin:10px 0 18px;
			  font-size:16px;
			  color:#111;
			  font-weight:600;
			}

			#age-gate .age-actions{
			  display:flex;
			  gap:14px;
			  justify-content:center;
			  margin:14px 0 18px;
			  flex-wrap:wrap;
			}

			#age-gate button{
			  border:none;
			  border-radius:8px;
			  padding:12px 26px;
			  font-size:16px;
			  font-weight:800;
			  color:#fff;
			  cursor:pointer;
			}
			#age-yes{ background:var(--age-pink); }
			#age-no{ background:var(--age-blue); }

			#age-gate .age-legal{
			  margin-top:10px;
			  font-size:12px;
			  color:#000;
			  line-height:1.65;
			}
			#age-gate .age-legal p{ margin:4px 0; color:#000;}

			#age-gate .age-links{
			  margin-top:14px;
			  padding-top:14px;
			  border-top:1px solid rgba(0,0,0,.08);
			  font-size:12px;
			  color:#444;
			}
			#age-gate .age-links a{
			  color:#222;
			  text-decoration:none;
			  font-weight:700;
			}
			#age-gate .age-links a:hover{ text-decoration:underline; }
			#age-gate .age-links .sep{ margin:0 10px; color:#aaa; }

			@media (max-width:520px){
			  #age-gate .age-card{ padding:26px 18px 14px; }
			  #age-gate h2{ font-size:22px; }
			}


/* ===== Mobile scroll unstick hotfix ===== */
@media (max-width:980px){
  html, body, #site-content, .stage, .center, .center-scroll{
    overscroll-behavior:auto !important;
  }
  .hero-swiper, .hero-swiper *{
    touch-action:pan-y !important;
  }
}


/* ===== Mobile first-scroll hard fix =====
   手機第一次下滑卡住：關閉 Hero 的觸控攔截與影片事件，讓頁面直接吃垂直滑動。 */
@media (max-width:980px){
  html, body{
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  body{
    padding-top:var(--topbar-h) !important;
  }

  body.age-locked{
    overflow:hidden !important;
    touch-action:none !important;
  }

  .stage{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    transform:none !important;
    width:100% !important;
  }

  .center-scroll{
    height:auto !important;
    min-height:calc(100vh - var(--topbar-h)) !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
  }

  .hero,
  .hero-inner,
  .hero .swiper,
  .hero .swiper-wrapper,
  .hero .swiper-slide{
    touch-action:pan-y !important;
  }

  .hero-inner{
    aspect-ratio:1500/600 !important;
    border-radius:0 !important;
  }

  .hero .swiper,
  .hero .swiper-wrapper,
  .hero .swiper-slide{
    height:100% !important;
  }

  .hero .swiper-wrapper{
    transform:none !important;
  }

  html.is-mobile-static-hero .hero .swiper-slide:not(:first-child){
    display:none !important;
  }

  .hero .swiper-button-prev,
  .hero .swiper-button-next{
    display:none !important;
  }

  .hero video,
  .hero img{
    pointer-events:none !important;
    -webkit-user-drag:none;
    user-select:none;
  }

  .hero .swiper-slide > img,
  .hero .swiper-slide video{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
}