/* =========================================================
   游戏乌托邦 · 首页样式（PlayJoy 参考版式）
   约束：零外部依赖；色值统一来自 :root 变量；
   禁渐变文字 / 禁文字发光 / 禁呼吸动画 / 禁装饰性光晕。
   ========================================================= */

:root {
  /* —— 强调色（琥珀，主 CTA / logo / 点缀）—— */
  --color-accent: #FBBF24;          /* 主按钮底色 */
  --color-accent-strong: #F59E0B;   /* 主按钮 hover 加深一档 */
  --color-accent-ink: #1F2937;      /* 压琥珀色上的深色文字 */
  --color-accent-soft: #FEF3C7;     /* 琥珀淡底（头像登录态 / 标签） */

  /* —— 品牌深色（文字链接 / 焦点圈）—— */
  --color-brand: #B45309;           /* 小号文字链接（白底对比度达标）*/

  /* —— 中性色 —— */
  --color-ink: #111827;             /* 大标题 */
  --color-body: #1F2937;            /* 正文 / 压图文字 */
  --color-secondary: #4B5563;       /* 次级灰字 */
  --color-tertiary: #6B7280;        /* 卡片说明 / 版权行 */
  --color-placeholder: #9CA3AF;     /* 输入框占位文字 */
  --color-border: #E5E7EB;          /* 卡片 / 页脚细边框 */
  --color-border-strong: #D1D5DB;   /* 输入框 / 描边 */
  --color-surface: #FFFFFF;         /* 导航 / 卡片 / 页脚白底 */
  --color-surface-alt: #F3F4F6;     /* 搜索框 / 头像灰底 */
  --color-warm: #FFFBF2;            /* 第二屏暖白底 */

  /* —— 功能色 —— */
  --color-danger: #B91C1C;          /* 错误文字 */
  --color-danger-border: #DC2626;   /* 错误输入框描边 */
  --color-online: #22C55E;          /* 登录态小绿点 */
  --color-toast-bg: #1F2937;        /* toast 深底 */
  --color-backdrop: rgba(17, 24, 39, 0.55); /* 弹窗遮罩 */

  /* —— 圆角 —— */
  --radius-pill: 999px;
  --radius-card: 18px;
  --radius-icon: 16px;
  --radius-menu: 14px;

  /* —— 字体 ——
     正文走系统栈（零加载、长文可读性好）；
     标题/品牌/按钮走 --font-cute（可爱手写感），见下方 @font-face。 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-cute: 'KuaiLe', var(--font-sans);

  /* —— 功能阴影（仅 hover 提升 / 下拉菜单，非装饰光晕）—— */
  --shadow-cta: 0 6px 16px rgba(17, 24, 39, 0.14);
  --shadow-menu: 0 8px 24px rgba(17, 24, 39, 0.12);
}

/* =========================================================
   自托管字体：站酷快乐体（ZCOOL KuaiLe）
   免费商用（SIL Open Font License 1.1）。
   已按本站（首页 + 大厅）实际用到的 450 个字符做子集化，
   1.5 MB TTF → 39 KB woff2。
   不引 Google Fonts 外链：国内不会阻塞首屏渲染；
   font-display:swap：字体未就绪时先用系统字体顶上，无 FOIT 白屏。
   ========================================================= */
@font-face {
  font-family: 'KuaiLe';
  src: url('../assets/fonts/kuaile.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   基础
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-body);
  background: var(--color-surface);
}

body.modal-open { overflow: hidden; }

/* 标题走可爱字体。只换字体族，字重/字号/颜色一律沿用原值。
   正文与表单不参与：手写体在长文和 13px 以下小字上可读性会掉。 */
h1, h2, h3, h4 { font-family: var(--font-cute); }

img { display: block; max-width: 100%; }

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

[hidden] { display: none !important; }

/* 焦点圈：键盘可见、清晰 */
:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* =========================================================
   顶部导航（白底吸顶）
   ========================================================= */
/* 透明浮于海报之上；滚过首屏后转白底（JS 加 is-scrolled） */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.nav.is-scrolled {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}

/* 不设 max-width：logo 贴左缘、搜索+头像贴右缘（参考站即此行为） */
.nav-inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 64px;
  padding: 0 32px 0 180px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 10px;
  flex: none;
}

.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  overflow: hidden;
  flex: none;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-name {
  font-family: var(--font-cute);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--color-ink);
}

/* —— 栏目链接 —— */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  position: relative;
  padding: 8px 12px;
  font-family: var(--font-cute);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-secondary);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.nav-link:hover {
  color: var(--color-ink);
  background: #F9FAFB;
}

.nav-link.active {
  color: var(--color-ink);
  font-weight: 700;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 1px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
}

/* —— 分类下拉：沿用账户菜单那套卡片，不另起视觉语言 —— */
.nav-drop {
  position: relative;
  display: flex;
}

.nav-drop-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  min-width: 132px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-menu);
  z-index: 90;
}

.nav-drop-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.nav-drop-menu a:hover {
  background: #F9FAFB;
  color: var(--color-ink);
}

/* —— 右侧：搜索 + 头像 —— */
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.nav-search {
  position: relative;
}

.nav-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-placeholder);
  pointer-events: none;
}

.nav-search input {
  width: 210px;
  height: 38px;
  padding: 0 14px 0 34px;
  font: inherit;
  font-size: 13px;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.nav-search input::placeholder { color: var(--color-placeholder); }

.nav-search input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-accent-strong);
}

/* —— 头像 + 账户菜单 —— */
.account { position: relative; }

.avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface-alt);
  color: var(--color-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.avatar svg { width: 19px; height: 19px; }

/* 登录后换成的账号头像：铺满这个 38px 的圆，等比裁切不变形 */
.avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.avatar:hover { background: #E5E7EB; color: var(--color-ink); }

.avatar.is-logged {
  background: var(--color-accent-soft);
  color: var(--color-brand);
}

/* 登录态小绿点 */
.avatar.is-logged::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-online);
  border: 2px solid var(--color-surface);
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 216px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-menu);
  box-shadow: var(--shadow-menu);
  z-index: 90;
}

.account-menu-id {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--color-tertiary);
  word-break: break-all;
}

.menu-divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--color-border);
}

.account-menu button,
.account-menu a {
  display: block;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px;
  color: #374151;
  text-align: left;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.account-menu button:hover,
.account-menu a:hover { background: #F9FAFB; color: var(--color-ink); }

/* =========================================================
   首屏：海报 + 左对齐文案
   ========================================================= */
/* 导航已改为固定透明覆盖，首屏用整高 */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

.poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: 0;
}

/* CTA 层：绝对定位铺满首屏、底部对齐。
   bottom 用「高度百分比」而非宽度 padding 百分比——
   窄口/矮窗下后者会把按钮顶进图中标题区。 */
.hero-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  /* 左侧 180px：与导航 logo 对齐（用户从三档对比图中选定） */
  padding: 0 20px 14% 180px;
}

.hero-cta-block {
  width: 100%;
}

.hero-note {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 16px;
  font-size: 13px;
  color: #374151;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-pill);
}

/* —— 主 CTA：琥珀实心胶囊 + 深色圆箭头 —— */
.btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  padding: 0 30px;
  font-family: var(--font-cute);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-accent:hover {
  background: var(--color-accent-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta);
}

.btn-accent:active { transform: scale(0.97); }

.cta-arrow {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-accent-ink);
  color: var(--color-accent);
}

.cta-arrow svg { width: 16px; height: 16px; }

/* 弹窗内的提交按钮：同款琥珀，尺寸按表单场景收敛 */
.btn-accent.btn-block {
  width: 100%;
  height: 48px;
  margin-top: 6px;
  padding: 0 24px;
  font-size: 16px;
  justify-content: center;
}

/* =========================================================
   首屏入场动画（CTA → 小字，依次淡入上浮）
   ========================================================= */
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-reveal {
    animation: heroReveal 0.6s ease-out both;
    animation-delay: var(--reveal-delay, 0ms);
  }
}

/* =========================================================
   第二屏：即将上线（暖白底）
   ========================================================= */
.upcoming {
  padding: 76px 28px 88px;
  background: var(--color-warm);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.section-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 800;
  color: var(--color-ink);
}

.section-head h2 svg { width: 22px; height: 22px; color: var(--color-accent-strong); }

.section-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-brand);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.section-more:hover { background: var(--color-accent-soft); }

.section-more svg { width: 14px; height: 14px; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  padding: 26px 24px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

/* hover 仅上移 2px：不加阴影、不加横滑 */
.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-strong);
}

/* 卡通插画图标（ImageGen 生成，白底融入卡片） */
.card-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}

.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card h3 {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ink);
}

.card p {
  font-size: 13px;
  color: var(--color-tertiary);
}

/* =========================================================
   页脚
   ========================================================= */
.footer {
  padding: 30px 24px 36px;
  text-align: center;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-line {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-secondary);
}

.footer-copy {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-tertiary);
}

/* =========================================================
   弹层组件（登录 / 注册共用）
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-backdrop);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.modal.is-open .modal-backdrop { opacity: 1; }

.modal-card {
  position: relative;
  width: min(420px, 100%);
  padding: 36px 32px 28px;
  background: var(--color-surface);
  border-radius: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.is-open .modal-card {
  opacity: 1;
  transform: translateY(0);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--color-tertiary);
  border-radius: 8px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.modal-close:hover {
  color: var(--color-ink);
  background: var(--color-surface-alt);
}

.modal-title {
  margin-bottom: 22px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
}

/* —— 表单 —— */
.field { margin-bottom: 16px; }

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
}

.field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
}

.field input::placeholder { color: var(--color-placeholder); }

.field input:focus {
  outline: none;
  border-color: var(--color-accent-strong);
}

.field input:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 1px;
}

.field.has-error input { border-color: var(--color-danger-border); }

.field-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-tertiary);
}

.field-error {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-danger);
}

.modal-alt {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--color-secondary);
}

.text-link {
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-brand);
  text-decoration: none;
}

.text-link:hover { text-decoration: underline; }

/* =========================================================
   圆形扩散转场层（琥珀）
   ========================================================= */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--color-accent);
  clip-path: circle(0% at 50% 50%);
  visibility: hidden;
  pointer-events: none;
}

.page-transition.is-active {
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 0.5s ease-in-out;
}

/* =========================================================
   toast
   ========================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  z-index: 120;
  max-width: calc(100vw - 40px);
  padding: 12px 22px;
  font-size: 14px;
  color: var(--color-surface);
  background: var(--color-toast-bg);
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   响应式：< 768px
   ========================================================= */
@media (max-width: 767px) {
  .nav-inner { height: 56px; padding: 0 16px; gap: 12px; }
  .brand-name { font-size: 15px; }

  /* 移动端隐藏栏目与搜索框，保留 logo + 头像 */
  .nav-links,
  .nav-search { display: none; }

  /* 移动端：首屏整高，CTA 居中靠下 */
  .hero { min-height: 100vh; }
  @supports (min-height: 100svh) {
    .hero { min-height: 100svh; }
  }

  /* 与导航左侧边距对齐（16px）*/
  .hero-inner { padding: 0 16px 12%; }

  /* 移动端：CTA 居中，海报取景居中（图中角色为主） */
  .hero-cta-block { margin: 0 auto; text-align: center; }

  /* 主按钮移动端全宽（上限 320px）*/
  .btn-accent {
  width: 100%;
  max-width: 320px;
  justify-content: center;
  }

  .upcoming { padding: 56px 20px 64px; }

  .section-head { margin-bottom: 20px; }
  .section-head h2 { font-size: 21px; }

  .cards { grid-template-columns: 1fr; gap: 16px; }

  .modal { padding: 16px; }
  .modal-card { padding: 28px 22px 24px; }

  .footer { padding: 26px 20px 32px; }
}

/* =========================================================
   prefers-reduced-motion：全部动效关闭，状态变化保留
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .btn-accent:hover,
  .btn-accent:active,
  .card:hover { transform: none; }
}