/* ============================================================
   Cymbrix 官网样式
   本文件由原压缩版 CSS 格式化而来，视觉与原站 1:1 一致。
   分区：全局变量 / 页面区块 / 作品区 / 布局 / 导航 / 按钮 / Hero / 联系方式 / 响应式
   修改颜色、字号、间距等样式都在本文件里改。
   ============================================================ */

/* 全局颜色与字号变量（改配色主要改这里） */
:root
{
  --bg: #050b16;
  --bg-2: #0b1526;
  --primary: #27a1ff;
  --primary-2: #7cc7ff;
  --text: #e6f1ff;
  --muted: #9db3c9;
  --accent: #00e0ff;
  --border: rgba(130, 170, 255, .18);
  --card: rgba(15, 25, 45, .6);
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1200px
}
*
{
  box-sizing:border-box
}
html
{
  scroll-behavior:smooth
}
/* 滚动容器（整页滚动） */
.page-shell
{
  height:100vh;
  overflow-y:auto
}
.page-shell::-webkit-scrollbar
{
  display:none
}
.page-shell
{
  -ms-overflow-style:none;
  scrollbar-width:none
}
/* 页面区块（滚轮/方向键整页切换） */
.page
{
  min-height:100vh;
  display:grid;
  align-content:center
}
.page.works
{
  min-height:100vh;
  align-content:flex-start;
  padding-top:15vh;
  position:relative
}
/* ================= 作品区 ================= */
.works-grid
{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  position:relative;
  min-height:20vh;
  padding:60px;
  margin-top:20px
}
.works-cards
{
  order:1;
  position:relative;
  height:500px;
  perspective:1000px;
  transform-style:preserve-3d;
  transform:translate(-50px);
  opacity:0;
  transition:all .6s ease
}
.card-stack
{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center
}
.game-card
{
  position:absolute;
  width:320px;
  height:400px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 40px #00000026;
  cursor:pointer;
  overflow:hidden;
  transform-style:preserve-3d;
  opacity:1;
  pointer-events:auto;
  padding:20px;
  margin:-20px
}
.game-card
{
  transition:all .3s ease
}
.game-card:nth-child(1)
{
  transform:translate(-25px,-12px) translateZ(50px) scale(1.05);
  z-index:10;
  box-shadow:0 25px 80px #0000004d
}
.game-card:nth-child(2)
{
  transform:translate(25px,12px);
  z-index:2
}
.game-card.active
{
  transform:translate(-25px,-12px) translateZ(50px) scale(1.05);
  z-index:10;
  box-shadow:0 25px 80px #0000004d
}
.game-card:not(.active)
{
  transform:translate(25px,12px);
  z-index:2;
  box-shadow:0 10px 40px #00000026
}
.game-card:hover:not(.active)
{
  transform:translate(25px,12px) translateZ(20px) scale(1.02);
  box-shadow:0 18px 55px #00000038
}
.card-image
{
  width:100%;
  height:240px;
  position:relative;
  overflow:hidden;
  transition:all .6s cubic-bezier(.25,.46,.45,.94)
}
/* 卡片封面图：图片放在 images/ 目录，object-fit:cover 会自动裁剪居中 */
.card-image img
{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:15px
}
.card-info
{
  padding:20px 25px;
  margin-top:-15px;
  transition:all .6s cubic-bezier(.25,.46,.45,.94)
}
.game-name
{
  font-size:18px;
  font-weight:700;
  color:#333;
  margin-bottom:5px
}
.game-type
{
  font-size:14px;
  color:#666;
  margin-bottom:15px
}
.game-stats
{
  display:flex;
  justify-content:space-between;
  align-items:center
}
.downloads
{
  font-size:12px;
  color:#888
}
.rating
{
  display:flex;
  gap:2px
}
.star
{
  width:12px;
  height:12px;
  background:#ddd;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)
}
.star.filled
{
  background:gold
}
/* 作品详情面板 */
.works-details
{
  order:2;
  transform:translate(50px);
  opacity:0;
  transition:all .8s cubic-bezier(.25,.46,.45,.94);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start
}
.works-details h2,.works-details .muted,.works-details .list
{
  transition:all .6s cubic-bezier(.25,.46,.45,.94);
  opacity:1;
  transform:translateY(0)
}
.works-details.fade-out h2,.works-details.fade-out .muted,.works-details.fade-out .list
{
  opacity:0;
  transform:translateY(10px)
}
.works-details.fade-in h2,.works-details.fade-in .muted,.works-details.fade-in .list
{
  opacity:1;
  transform:translateY(0)
}
.works.in-view .works-cards,.works.in-view .works-details
{
  transform:translate(0);
  opacity:1
}
/* 详情面板里的两个游戏内容块，用 .active 控制显示哪一块（重建新增） */
.game-detail
{
  display:none
}
.game-detail.active
{
  display:block
}
/* 详情区切换标签（点击切换游戏详情） */
.detail-tabs
{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px
}
.detail-tab
{
  background:none;
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:8px;
  padding:6px 12px;
  font-size:14px;
  cursor:pointer;
  transition:all .2s ease
}
.detail-tab:hover
{
  color:var(--text);
  background:#27a1ff14
}
.detail-tab.active
{
  color:var(--text);
  border-color:var(--primary);
  background:#27a1ff14
}
@media (max-width: 980px)
{
  .works-grid
  {
    grid-template-columns:1fr;
    gap:20px;
    height:auto
  }
  .works-cards
  {
    height:400px;
    order:2
  }
  .game-card
  {
    width:280px;
    height:350px
  }
  .works-details
  {
    order:1;
    transform:translate(0);
    opacity:1
  }
}
body
{
  margin:0;
  background:radial-gradient(1200px 600px at 70% -10%,rgba(39,161,255,.12),transparent 60%),radial-gradient(900px 500px at -10% 30%,rgba(0,224,255,.08),transparent 60%),var(--bg);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
  line-height:1.6
}
a
{
  color:var(--primary-2);
  text-decoration:none
}
/* ================= 通用布局 ================= */
.container
{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 20px
}
/* ================= 顶部导航 ================= */
header
{
  position:sticky;
  top:0;
  z-index:1000;
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(to bottom,#050b16f2,#050b16cc);
  border-bottom:1px solid var(--border);
  padding:8px 0
}
.nav
{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  min-height:72px
}
.nav .menu
{
  margin-left:auto
}
.brand
{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:.2px
}
.brand-logo
{
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:contain;
  /* 下面两行是占位渐变：换成真实 LOGO 后可以删掉 */
  background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 6px 18px #27a1ff66
}
.brand .name
{
  font-size:16px
}
.brand .tag
{
  font-size:12px;
  color:var(--muted);
  opacity:.9
}
.menu
{
  display:flex;
  gap:8px;
  flex-wrap:nowrap;
  align-items:center;
  white-space:nowrap;
  justify-content:flex-start
}
.lang-toggle
{
  background:none;
  border:none;
  color:var(--text);
  font-size:16px;
  font-weight:600;
  padding:8px 12px;
  cursor:pointer;
  transition:all .2s ease;
  margin-left:16px
}
.lang-toggle:hover
{
  color:var(--primary-2);
  background:#27a1ff14;
  border-radius:var(--radius-sm)
}
.lang-toggle span.active
{
  font-weight:700;
  color:var(--text)
}
.lang-toggle span:not(.active)
{
  font-weight:400;
  color:var(--muted);
  opacity:.6
}
.menu a
{
  color:var(--muted);
  font-size:14px;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid transparent;
  transition:all .2s ease
}
.menu a.active
{
  color:var(--text);
  border-color:var(--border);
  background:#27a1ff14
}
.menu a:hover
{
  color:var(--text);
  background:#27a1ff14
}
.menu-toggle
{
  display:none;
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text)
}
@media (max-width: 980px)
{
  .menu
  {
    display:none
  }
  .menu.mobile-open
  {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:16px 0 20px;
    margin-top:8px
  }
  .menu-toggle
  {
    display:inline-grid;
    place-items:center
  }
  .nav
  {
    height:56px;
    min-height:56px
  }
}
/* ================= 按钮 ================= */
.btn
{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--border);
  color:var(--text);
  background:#27a1ff0f;
  cursor:pointer
}
.btn:hover
{
  background:#27a1ff1f
}
.btn-primary
{
  background:linear-gradient(135deg,#60a5fa,#34d399);
  border-color:transparent;
  color:#001224;
  font-weight:700
}
.btn-primary:hover
{
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#001224
}
.btn-primary:active
{
  background:linear-gradient(135deg,#3b82f6,#10b981);
  color:#001224
}
.btn-ghost
{
  background:transparent
}
.actions
{
  display:flex;
  gap:10px;
  margin-top:16px;
  flex-wrap:wrap
}
section
{
  padding:80px 0;
  border-top:1px solid var(--border);
  background-image:var(--grid);
  background-size:24px 24px,24px 24px;
  background-attachment:fixed;
  background-position:center
}
section:nth-child(2n)
{
  background-color:#0a122499
}
h1,h2,h3
{
  margin:0 0 14px;
  line-height:1.25
}
h1
{
  font-size:40px;
  letter-spacing:.2px
}
h2
{
  font-size:28px;
  color:var(--primary-2)
}
h3
{
  font-size:20px;
  color:var(--text)
}
p.lead
{
  font-size:18px;
  color:var(--muted);
  margin-bottom:18px
}
/* ================= Hero 主视觉 ================= */
.hero
{
  padding:40px 0 80px;
  position:relative;
  overflow:hidden;
  background:radial-gradient(1200px 400px at 80% -10%,rgba(39,161,255,.18),transparent 60%),var(--bg-2);
  margin-top:-16px;
  display:flex;
  align-items:flex-start
}
.hero-content
{
  text-align:center;
  width:100%;
  padding-top:200px
}
.hero-content h1
{
  font-size:72px;
  font-weight:800;
  margin:0 0 30px;
  background:linear-gradient(135deg,#60a5fa,#34d399,#3b82f6,#06b6d4,#8b5cf6);
  background-size:300% 300%;
  animation:gradientShift 4s ease-in-out infinite,float 6s ease-in-out infinite;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-shadow:0 0 30px rgba(59,130,246,.3);
  letter-spacing:2px
}
.hero-subtitle
{
  font-size:20px;
  color:var(--muted);
  margin-bottom:40px;
  max-width:600px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6
}
.hero-buttons
{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap
}
.btn
{
  border-radius:25px;
  padding:12px 30px;
  font-weight:600;
  transition:all .3s ease
}
.btn-contact
{
  background:transparent;
  border:2px solid white;
  color:#fff;
  border-radius:25px;
  padding:12px 30px;
  font-weight:600;
  transition:all .3s ease
}
.btn-contact:hover
{
  background:#fff;
  color:var(--bg)
}
@keyframes gradientShift
{
  0%,to
  {
    background-position:0% 50%
  }
  50%
  {
    background-position:100% 50%
  }
}
@keyframes float
{
  0%,to
  {
    transform:translateY(0)
  }
  50%
  {
    transform:translateY(-20px)
  }
}
/* 向下滚动指示箭头 */
.scroll-arrow
{
  position:absolute;
  bottom:100px;
  left:50%;
  transform:translate(-50%);
  cursor:pointer;
  z-index:10;
  animation:bounce 2s infinite
}
.arrow-icon
{
  width:50px;
  height:50px;
  border-radius:50%;
  background:transparent;
  border:2px solid var(--primary);
  color:var(--primary);
  box-shadow:0 0 0 4px #27a1ff1a;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  transition:all .3s ease
}
.scroll-arrow:hover .arrow-icon
{
  transform:scale(1.1);
  background:var(--primary);
  color:#fff;
  box-shadow:0 12px 32px #27a1ff66
}
/* 向上的箭头（作品区顶部） */
.scroll-arrow.up
{
  top:60px;
  bottom:auto
}
@keyframes bounce
{
  0%,20%,50%,80%,to
  {
    transform:translate(-50%) translateY(0)
  }
  40%
  {
    transform:translate(-50%) translateY(-10px)
  }
  60%
  {
    transform:translate(-50%) translateY(-5px)
  }
}
@media (max-width: 980px)
{
  .hero-content h1
  {
    font-size:48px;
    letter-spacing:1px
  }
  .hero-subtitle
  {
    font-size:18px
  }
  .hero-buttons
  {
    gap:25px
  }
}
@media (max-width: 480px)
{
  .hero-content h1
  {
    font-size:36px;
    letter-spacing:.5px
  }
  .hero-subtitle
  {
    font-size:16px
  }
  .hero-buttons
  {
    flex-direction:column;
    align-items:center;
    gap:20px
  }
  .btn,.btn-contact
  {
    width:200px
  }
  .scroll-arrow
  {
    bottom:100px
  }
  .arrow-icon
  {
    width:40px;
    height:40px;
    font-size:20px
  }
}
/* ================= 通用小组件 ================= */
.card
{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:20px;
  box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease
}
.muted
{
  color:var(--muted)
}
.badge
{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#27a1ff14;
  color:var(--primary-2);
  font-size:12px
}
.list
{
  display:grid;
  gap:8px;
  margin-top:8px
}
/* ================= 联系方式 ================= */
.contact
{
  background:linear-gradient(135deg,#27a1ff0d,#00e0ff08);
  height:90vh;
  min-height:90vh;
  max-height:90vh;
  overflow:hidden;
  position:relative
}
.contact-content
{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:calc(100vh - 80px);
  text-align:center;
  padding:0 20px;
  box-sizing:border-box
}
.intro-text
{
  margin-bottom:30px
}
.intro-line1,.intro-line2
{
  font-size:28px;
  font-weight:600;
  margin:0 0 4px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  opacity:0;
  transform:translateY(30px);
  transition:all .8s ease
}
.intro-line2
{
  transition-delay:.3s
}
.contact.in-view .intro-line1,.contact.in-view .intro-line2
{
  opacity:1;
  transform:translateY(0)
}
.contact-links
{
  display:flex;
  gap:15px;
  opacity:0;
  transform:translateY(30px);
  transition:all .8s ease .6s
}
.contact.in-view .contact-links
{
  opacity:1;
  transform:translateY(0)
}
.contact-link
{
  text-decoration:none;
  padding:8px 16px;
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  border-radius:8px
}
.contact-link:hover
{
  transform:translateY(-2px);
  background:#27a1ff0d
}
.platform
{
  font-size:14px;
  font-weight:600;
  color:var(--primary-2)
}
.contact-info
{
  font-size:16px;
  font-weight:500;
  color:var(--muted)
}
.contact-link:hover .contact-info
{
  color:var(--primary)
}
@media (max-width: 980px)
{
  .contact-content
  {
    height:calc(100vh - 60px);
    padding:0 20px
  }
  .intro-line1,.intro-line2
  {
    font-size:28px
  }
  .contact-links
  {
    gap:20px
  }
  .intro-text
  {
    margin-bottom:35px
  }
  .contact-link
  {
    padding:10px 16px
  }
  .platform
  {
    font-size:12px
  }
  .contact-info
  {
    font-size:14px
  }
}
@media (max-width: 480px)
{
  .contact-content
  {
    height:calc(100vh - 40px);
    padding:0 20px
  }
  .intro-line1,.intro-line2
  {
    font-size:24px
  }
  .contact-links
  {
    flex-direction:column;
    gap:12px
  }
  .intro-text
  {
    margin-bottom:30px
  }
  .contact-link
  {
    padding:8px 12px
  }
  .platform
  {
    font-size:12px
  }
  .contact-info
  {
    font-size:14px
  }
}