/* =========================================================
   JYC 鼠界主题层 jyc.css
   紫金 NFT 卡牌美学：金色描边 + 紫色霓虹辉光 + 收藏品质感
   只做「叠加增强」，不推翻原有布局，保证 11 款玩法零回归风险
   ========================================================= */

:root {
  --jyc-purple: #a855f7;
  --jyc-purple-deep: #6d28d9;
  --jyc-gold: #f5c451;
  --jyc-gold-soft: #ffe9a8;
  --jyc-ink: #0b0713;
}

/* ---------- 钱包代币标：JYC 代币 / JYC 晶石（v3.8） ---------- */
.w-cur {
  margin-left: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  color: var(--jyc-gold-soft);
  background: rgba(245, 196, 81, .14);
  border: 1px solid rgba(245, 196, 81, .3);
  vertical-align: middle;
  white-space: nowrap;
}
.w-gem .w-cur { color: #d9c2ff; background: rgba(168, 85, 247, .16); border-color: rgba(168, 85, 247, .34); }
@media (max-width: 560px) { .w-cur { display: none; } }

/* ---------- 全局底色：从深空蓝转向鼠界紫 ---------- */
body {
  background:
    radial-gradient(1200px 700px at 12% -8%, rgba(168, 85, 247, .22), transparent 62%),
    radial-gradient(900px 600px at 92% 4%, rgba(245, 196, 81, .13), transparent 58%),
    radial-gradient(1000px 800px at 50% 108%, rgba(109, 40, 217, .2), transparent 60%),
    #0b0713;
}

/* ---------- 入场页 ---------- */
#entrance {
  background:
    radial-gradient(900px 620px at 50% 8%, rgba(168, 85, 247, .3), transparent 62%),
    radial-gradient(700px 500px at 50% 100%, rgba(245, 196, 81, .14), transparent 60%),
    #0b0713;
}
.entrance-logo {
  border-radius: 26px;
  box-shadow: 0 0 0 2px rgba(245, 196, 81, .45), 0 18px 60px rgba(168, 85, 247, .55);
  animation: jycFloat 5s ease-in-out infinite;
}
@keyframes jycFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }

.entrance-title {
  margin: 12px 0 2px;
  font-family: Rajdhani, 'Noto Sans SC', sans-serif;
  font-size: clamp(30px, 7vw, 52px);
  font-weight: 700;
  letter-spacing: .08em;
  background: linear-gradient(100deg, #ffe9a8 0%, #f5c451 32%, #fff 50%, #f5c451 68%, #c98f22 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 14px rgba(245, 196, 81, .5));
}

/* 入场角色预览条 */
.entrance-cast {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 14px auto 2px;
  max-width: 560px;
}
.entrance-cast img {
  width: 74px;
  height: 118px;
  object-fit: cover;
  object-position: center 32%;
  border-radius: 10px;
  border: 1px solid rgba(245, 196, 81, .42);
  box-shadow: 0 6px 22px rgba(109, 40, 217, .5);
  transition: transform .28s ease, box-shadow .28s ease;
}
.entrance-cast img:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 12px 30px rgba(168, 85, 247, .7);
}

.enter-btn {
  background: linear-gradient(100deg, #f5c451, #ffe9a8 45%, #f5c451);
  color: #2a1a00;
  box-shadow: 0 10px 34px rgba(245, 196, 81, .45), 0 0 0 1px rgba(255, 233, 168, .6) inset;
}

/* ---------- 顶栏品牌 ---------- */
.brand img {
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(245, 196, 81, .5), 0 4px 16px rgba(168, 85, 247, .5);
}

/* ---------- 大厅玩法卡：NFT 收藏卡质感 ---------- */
.game-cell.jyc-cell {
  position: relative;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid rgba(245, 196, 81, .3);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(30, 18, 48, .95), rgba(13, 9, 22, .98));
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.game-cell.jyc-cell:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 196, 81, .8);
  box-shadow: 0 18px 46px rgba(168, 85, 247, .5), 0 0 0 1px rgba(245, 196, 81, .5);
}

/* 卡面封面图 */
.gc-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #150d24;
}
.gc-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.game-cell.jyc-cell:hover .gc-cover img { transform: scale(1.07); }
.gc-cover-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 7, 19, .05) 40%, rgba(11, 7, 19, .92) 100%);
  pointer-events: none;
}
.gc-cat {
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--jyc-gold-soft);
  background: rgba(11, 7, 19, .75);
  border: 1px solid rgba(245, 196, 81, .45);
  backdrop-filter: blur(4px);
}
.game-cell.jyc-cell .gc-badge {
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* 卡片文字区 */
.game-cell.jyc-cell .gc-top,
.game-cell.jyc-cell .gc-desc,
.game-cell.jyc-cell .gc-story,
.game-cell.jyc-cell .gc-foot { padding-inline: 13px; }
.game-cell.jyc-cell .gc-top { margin-top: 11px; }
.game-cell.jyc-cell .gc-name {
  color: var(--jyc-gold-soft);
  text-shadow: 0 1px 8px rgba(245, 196, 81, .35);
}
.gc-story {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.6;
  font-style: italic;
  color: #c4a9ee;
  border-left: 2px solid rgba(168, 85, 247, .6);
  padding-left: 9px !important;
  margin-inline: 13px;
}
.game-cell.jyc-cell .gc-foot { margin-top: 10px; }
.game-cell.jyc-cell .odds { color: var(--jyc-gold); }

/* ---------- 图鉴弹窗 ---------- */
.codex-intro {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #c9b6ee;
}
.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}
.codex-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 21, 58, .96), rgba(13, 9, 22, .99));
  border: 1px solid rgba(245, 196, 81, .34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.codex-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(168, 85, 247, .5);
}
.codex-card img {
  width: 100%;
  aspect-ratio: 9 / 14;
  object-fit: cover;
  display: block;
}
.cx-tier {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 8px;
  font-family: Rajdhani, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #1c1004;
  background: linear-gradient(100deg, #ffe9a8, #f5c451);
  box-shadow: 0 3px 12px rgba(245, 196, 81, .5);
}
.cx-body { padding: 11px 12px 13px; }
.cx-name {
  display: block;
  font-size: 15px;
  color: var(--jyc-gold-soft);
}
.cx-en {
  display: block;
  font-family: Rajdhani, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  color: #9b86c7;
  margin-bottom: 6px;
}
.cx-lore {
  margin: 0 0 9px;
  font-size: 11.5px;
  line-height: 1.65;
  color: #bda9e4;
  font-style: italic;
}
.cx-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: #9b86c7;
  margin-bottom: 8px;
}
.cx-rows i { margin-right: 4px; color: var(--jyc-purple); }
.cx-bonus {
  padding: 7px 9px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: #ffe9a8;
  background: rgba(168, 85, 247, .18);
  border: 1px solid rgba(168, 85, 247, .45);
}
.cx-bonus i { margin-right: 5px; color: var(--jyc-gold); }

/* ---------- 英文模式微调 ---------- */
html[lang="en"] .gc-story { font-size: 11px; }
html[lang="en"] .entrance-title { font-size: clamp(26px, 6vw, 46px); }
html[lang="en"] .cx-bonus { font-size: 10.5px; }

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .entrance-cast img { width: 58px; height: 92px; }
  .codex-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .cx-lore { display: none; }
  .gc-story { display: none; }
}