/* ========== 首页（启动页）专属布局 ========== */
/* 复用 styles.css 里的颜色变量、字体、.eyebrow/.date-line/.lang-toggle，
   这里只补首页菜单卡片 + 禁用态 + toast 需要的样式，不改动 styles.css 本身。 */

/* ---------- 赛博玄学：全息 HUD 背景层 ---------- */
/* 仅首页生效（body.cyber-hud），不影响 card/spread/history 页面的既有背景 */
body.cyber-hud{
  background:var(--bg-deep);
  overflow-x:hidden;
}

.sacred-geometry{
  position:fixed;
  top:50%;
  left:50%;
  width:min(120vw, 640px);
  height:min(120vw, 640px);
  transform:translate(-50%, -50%);
  z-index:0;
  color:var(--gold);
  opacity:0.07;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:sacred-rotate 140s linear infinite;
}
@keyframes sacred-rotate{
  from{ transform:translate(-50%, -50%) rotate(0deg); }
  to{ transform:translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .sacred-geometry{ animation:none; }
}

body.cyber-hud .wrap{
  position:relative;
  z-index:1;
}

.home-subtitle{
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  margin:-2px 0 12px;
}

.home-title{
  text-align:center;
  font-size:15px;
  letter-spacing:0.04em;
  color:var(--ink-dim);
  margin:26px 0 22px;
}

.home-menu{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.home-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:22px 24px;
  background:
    radial-gradient(ellipse 120% 100% at 28% 15%, rgba(90,68,130,0.4), rgba(12,10,22,0.55) 65%) padding-box,
    linear-gradient(135deg, rgba(201,161,92,0.5), rgba(179,168,207,0.15) 40%, rgba(201,161,92,0.35)) border-box;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border:1px solid transparent;
  border-radius:2px;
  clip-path:polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  text-decoration:none;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,161,92,0.05), 0 14px 30px -18px rgba(0,0,0,0.7);
  transition:box-shadow .25s ease, background .25s ease, transform .2s ease;
}

.home-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg, transparent 40%, rgba(201,161,92,0.14) 50%, transparent 60%);
  background-size:220% 220%;
  background-position:120% 0;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.home-card:hover{
  background:
    radial-gradient(ellipse 120% 100% at 28% 15%, rgba(110,82,155,0.5), rgba(16,13,28,0.6) 65%) padding-box,
    linear-gradient(135deg, rgba(201,161,92,0.9), rgba(179,168,207,0.4) 40%, rgba(201,161,92,0.75)) border-box;
  transform:translateY(-1px);
  animation:card-breathe-glow 2.6s ease-in-out infinite;
}
@keyframes card-breathe-glow{
  0%, 100%{ box-shadow:0 0 14px -4px rgba(201,161,92,0.28), 0 0 0 1px rgba(201,161,92,0.22), 0 18px 34px -16px rgba(0,0,0,0.75); }
  50%{ box-shadow:0 0 26px -1px rgba(201,161,92,0.5), 0 0 0 1px rgba(201,161,92,0.34), 0 18px 34px -16px rgba(0,0,0,0.75); }
}
@media (prefers-reduced-motion: reduce){
  .home-card:hover{ animation:none; box-shadow:0 0 18px -2px rgba(201,161,92,0.35), 0 0 0 1px rgba(201,161,92,0.25), 0 18px 34px -16px rgba(0,0,0,0.75); }
}

/* 触屏按压反馈：没有 hover 的移动端，用一次快速辉光闪现代替呼吸动效 */
.home-card:active{
  background:
    radial-gradient(ellipse 120% 100% at 28% 15%, rgba(110,82,155,0.5), rgba(16,13,28,0.6) 65%) padding-box,
    linear-gradient(135deg, rgba(201,161,92,0.9), rgba(179,168,207,0.4) 40%, rgba(201,161,92,0.75)) border-box;
  animation:none;
  transform:scale(0.98);
  box-shadow:0 0 24px -1px rgba(201,161,92,0.6), 0 0 0 1px rgba(201,161,92,0.45), 0 10px 20px -14px rgba(0,0,0,0.7);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.home-card:active .anchor-star{
  opacity:0.95;
  filter:drop-shadow(0 0 5px rgba(201,161,92,0.75));
  transform:scale(1.15);
  transition:opacity .12s ease, filter .12s ease, transform .12s ease;
}
.home-card:active .home-card-arrow{
  transform:translateX(5px);
  color:var(--gold-soft);
  transition:transform .12s ease, color .12s ease;
}
.home-card:active .home-card-arrow::before{
  width:9px;
  transition:width .12s ease;
}

.home-card:hover::after{
  opacity:1;
  background-position:-20% 0;
  transition:opacity .3s ease, background-position 1s ease;
}

/* 星象锚点：取代直角瞄准镜边框，四角换成极简四芒星（呼应抽卡页牌背图腾） */
.anchor-star{
  position:absolute;
  width:8px;
  height:8px;
  color:var(--gold);
  opacity:0.45;
  pointer-events:none;
  filter:drop-shadow(0 0 0 transparent);
  transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
.home-card:hover .anchor-star{
  opacity:0.95;
  filter:drop-shadow(0 0 5px rgba(201,161,92,0.75));
  transform:scale(1.15);
}
.anchor-star.tl{ top:9px; left:9px; }
.anchor-star.tr{ top:9px; right:9px; }
.anchor-star.bl{ bottom:9px; left:9px; }
.anchor-star.br{ bottom:9px; right:9px; }

.home-card-main{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.home-card-name{
  font-family:'Noto Serif SC', serif;
  font-weight:700;
  font-size:17.5px;
  color:var(--ink);
  letter-spacing:0.06em;
}

.home-card-desc{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  color:var(--ink-faint);
  letter-spacing:0.02em;
}

.home-card-arrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size:14px;
  color:var(--gold);
  flex-shrink:0;
  padding-left:12px;
  transition:transform .9s cubic-bezier(.22,1,.36,1), color .4s ease;
}
.home-card-arrow::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-soft));
  transform:translateY(-50%);
  transition:width .9s cubic-bezier(.22,1,.36,1);
}
.home-card:hover .home-card-arrow,
.home-history-link:hover .home-card-arrow{
  transform:translateX(6px);
  color:var(--gold-soft);
}
.home-card:hover .home-card-arrow::before,
.home-history-link:hover .home-card-arrow::before{
  width:10px;
}
@media (prefers-reduced-motion: reduce){
  .home-card-arrow, .home-card-arrow::before{ transition-duration:.2s; }
}

.home-card-disabled{
  opacity:0.5;
  cursor:default;
}
.home-card-disabled:hover{
  background:
    radial-gradient(ellipse 120% 100% at 28% 15%, rgba(90,68,130,0.4), rgba(12,10,22,0.55) 65%) padding-box,
    linear-gradient(135deg, rgba(201,161,92,0.5), rgba(179,168,207,0.15) 40%, rgba(201,161,92,0.35)) border-box;
  box-shadow:0 0 0 1px rgba(201,161,92,0.05), 0 14px 30px -18px rgba(0,0,0,0.7);
  transform:none;
}
.home-card-disabled:hover .anchor-star{
  opacity:0.45;
  filter:none;
  transform:none;
}
.home-card-disabled:hover::after{ opacity:0; }
.home-card-disabled:active{
  background:
    radial-gradient(ellipse 120% 100% at 28% 15%, rgba(90,68,130,0.4), rgba(12,10,22,0.55) 65%) padding-box,
    linear-gradient(135deg, rgba(201,161,92,0.5), rgba(179,168,207,0.15) 40%, rgba(201,161,92,0.35)) border-box;
  box-shadow:0 0 0 1px rgba(201,161,92,0.05), 0 14px 30px -18px rgba(0,0,0,0.7);
  transform:scale(0.995);
}
.home-card-disabled:active .anchor-star{
  opacity:0.45;
  filter:none;
  transform:none;
}

.home-card-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.05em;
  color:var(--ink-faint);
  border:1px solid var(--line);
  border-radius:20px;
  padding:3px 10px;
  flex-shrink:0;
}

.home-history-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:64px;
  padding:14px 0;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  text-decoration:none;
  border-top:1px solid var(--line);
  transition:color .2s ease;
}
.home-history-link:hover{ color:var(--gold-soft); }
.home-history-link:active{
  color:var(--gold-soft);
  transform:scale(0.98);
  transition:color .12s ease, transform .12s ease;
}
.home-history-link .home-card-arrow{ font-size:12px; }

/* ---------- toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:48px;
  transform:translate(-50%, 12px);
  background:var(--bg-panel-2);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 20px;
  font-size:13px;
  letter-spacing:0.02em;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:20;
  white-space:nowrap;
}
.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}