/* ============================================
   腾龙公司游戏官网 - 可更换图片组件 + 导航优化
   ============================================ */

/* ---------- 可更换图片通用组件 ---------- */
.tl-img{
  display:block; width:100%; height:100%; object-fit:cover; object-position:center;
  background:var(--ph);
  transition:opacity .4s, transform .6s;
}
.tl-img[data-ph]{ visibility:hidden; }
.tl-img-wrap{ position:relative; overflow:hidden; }
.tl-img-wrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.12) 60%, transparent 80%);
  transform:translateX(-100%); transition:transform .9s;
}
.tl-img-wrap:hover::after{ transform:translateX(100%); }

/* 图片占位符（未替换真实图时可见） */
.tl-ph{
  position:absolute; inset:0; z-index:0;
  display:grid; place-items:center; text-align:center;
  background:var(--ph, linear-gradient(135deg,#1a2238,#0d1426));
  color:rgba(255,255,255,.35); font-size:14px; letter-spacing:2px;
}
.tl-ph span{ padding:10px 18px; border:1px dashed rgba(255,255,255,.2); border-radius:10px; }

/* ---------- 横幅（可更换背景图） ---------- */
.banner{ padding-bottom:0; }
.banner-bg{
  background-image:var(--banner-img, none);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.banner-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(900px 520px at 50% 8%, rgba(255,122,61,.30), transparent 60%),
    linear-gradient(180deg, rgba(7,10,20,.25) 0%, rgba(7,10,20,.55) 100%);
}
.banner-bg::after{ display:none; } /* 用真实图时关闭网格 */

/* 横幅 LOGO（可更换） */
.banner-brand{ margin-bottom:34px; display:flex; justify-content:center; }
.banner-logo{
  height:88px; width:auto; max-width:380px; object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(255,122,61,.35));
  animation:brandIn 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes brandIn{ from{ opacity:0; transform:scale(.8) translateY(-20px); } to{ opacity:1; transform:none; } }

/* 横幅按钮强化：更突出、更贴合龙主题 */
.banner-buttons{ gap:28px; }
.btn{
  padding:17px 52px; font-size:19px; border-radius:60px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.btn-primary{
  background:linear-gradient(135deg,#ff9d5c 0%,#ff7a3d 50%,#e2581f 100%);
  box-shadow:0 14px 36px rgba(255,122,61,.5), inset 0 2px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{ box-shadow:0 20px 48px rgba(255,122,61,.68), inset 0 2px 0 rgba(255,255,255,.4); }
.btn-ghost{
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(0,0,0,.3), inset 0 0 24px rgba(79,209,197,.12);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.btn-ghost:hover{ background:rgba(255,255,255,.16); box-shadow:0 16px 40px rgba(0,0,0,.4), inset 0 0 30px rgba(79,209,197,.22); }

/* ---------- 游戏卡封面（可更换） ---------- */
.game-cover{ padding:0; }
.game-cover .game-ico{ display:none; } /* 有真实图时隐藏 emoji */
.game-cover .game-ico-fb{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; font-size:60px;
  text-shadow:0 8px 24px rgba(0,0,0,.5);
  transition:transform .5s;
}
.game-card:hover .game-ico-fb{ transform:scale(1.14) rotate(-5deg); }
.game-card:hover .tl-img{ transform:scale(1.07); }

/* ---------- 价值卡片图标（可更换） ---------- */
.val-ico{
  background:var(--ico-bg, radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff), var(--c)));
  font-size:0; /* 有图时隐藏文字 */
}
.val-ico img{ width:30px; height:30px; object-fit:contain; }

/* ---------- 公司历程：新增可更换配图 ---------- */
.tl-media{
  margin-top:16px; border-radius:12px; overflow:hidden; height:120px;
  border:1px solid var(--line);
}
.tl-media .tl-img{ filter:saturate(1.05); }

/* ---------- 联系我们：可更换地图/办公室图 ---------- */
.ci-media{
  margin-top:24px; border-radius:var(--radius); overflow:hidden; height:200px;
  border:1px solid var(--line);
}

/* ---------- 响应式 ---------- */
@media (max-width:720px){
  .banner-logo{ height:64px; }
  .btn{ padding:14px 36px; font-size:17px; }
  .banner-buttons{ gap:16px; }
}