/* 星座.live · 玛雅历法屏样式
 *
 * 用户要求：
 *   「加一个「玛雅」的 tag，玛雅的运程叠加十二星座，形成综合方案。
 *     玛雅历法（卓金历）也要有年、月、日盘。
 *     要有符号，有名字，有图案，有对应的颜色。」
 *
 * 三张盘横排（窄屏换行），每张：盘 + 名字 + 含义。
 * 20 符号总表用网格，今天对应的那个高亮。
 */

/* ── 三盘横排 ── */
.maya-trio{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin:0 0 18px;
}
@media (max-width:900px){
  .maya-trio{grid-template-columns:1fr;}
}

.maya-card{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 12px 16px;
  border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
}
.maya-cap{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  color:rgba(200,188,240,.72);text-transform:uppercase;
  margin-bottom:8px;
}
.maya-vis{width:200px;max-width:100%;}
.maya-vis svg{display:block;width:100%;height:auto;overflow:visible;}

/* 盘缓慢自转（图腾不动，只有外圈光晕转） */
@keyframes mayaSpin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.maya-vis svg > circle:nth-of-type(2){
  transform-origin:50% 50%;
  animation:mayaSpin 60s linear infinite;
  stroke-dasharray:2 6;
}

.maya-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  margin-top:10px;font-size:16px;
}
.maya-name b{font-weight:900;letter-spacing:.02em;}
.maya-tag{
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;
  border:1px solid;background:rgba(0,0,0,.18);
}
.maya-sub{
  margin-top:8px;display:flex;flex-direction:column;gap:4px;
  font-size:12px;line-height:1.65;color:var(--ink-2);text-align:center;
}
.maya-line{opacity:.9;}
.maya-line b{color:#dcd0ff;}

/* ── 综合方案 ── */
.maya-combo{
  padding:14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
.maya-combo-row{
  display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid rgba(150,120,255,.10);
  font-size:13px;line-height:1.7;
}
.maya-combo-row:last-child{border-bottom:0;}
.maya-combo-row b{
  flex:none;width:64px;font-size:12px;font-weight:800;
  color:#b79bff;letter-spacing:.04em;
}
.maya-combo-row span{flex:1;color:var(--ink-2);}
.maya-combo-row.warn b{color:#f0c8a0;}

/* ── 20 符号总表 ── */
.maya-grid-wrap{
  padding:14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);
  border:1px solid rgba(150,120,255,.20);
}
.maya-sol-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:10px;margin-top:10px;
}
@media (max-width:900px){ .maya-sol-grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media (max-width:520px){ .maya-sol-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }

.maya-sol{
  display:flex;align-items:center;gap:8px;
  padding:7px 8px;border-radius:10px;
  background:rgba(30,20,62,.42);
  border:1px solid rgba(150,120,255,.14);
  transition:.18s;
}
.maya-sol:hover{
  border-color:var(--mc);
  background:rgba(48,30,96,.6);
  transform:translateY(-1px);
}
.maya-sol.on{
  border-color:var(--mc);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--mc) 30%, transparent),
             0 0 16px color-mix(in srgb, var(--mc) 45%, transparent);
}
.maya-sol-ico{width:42px;flex:none;}
.maya-sol-ico svg{display:block;width:100%;height:auto;}
.maya-sol-txt{display:flex;flex-direction:column;gap:1px;min-width:0;}
.maya-sol-txt b{font-size:12px;font-weight:800;color:var(--ink);white-space:nowrap;}
.maya-sol-txt i{
  font-size:10px;font-style:normal;letter-spacing:.03em;
  color:var(--mc);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}


/* ═══════════════════════════════════════════════════════
   玛雅历屏（重做版）
   ═══════════════════════════════════════════════════════ */
.maya-head{text-align:center;margin-bottom:16px;}
.maya-head h2{font-size:24px;margin:0 0 6px;}
.maya-head .sub{max-width:660px;margin:0 auto;}

/* ── ② 玛雅历表 ── */
.maya-cal-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;
  margin-bottom:18px;
}
@media (max-width:1000px){ .maya-cal-wrap{grid-template-columns:1fr;} }

.maya-cal-left,.maya-cal-right{
  padding:14px 14px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
}

/* 表头：13 列音调 */
.mc-head{
  display:grid;grid-template-columns:repeat(13,1fr);gap:4px;
  margin:8px 0 5px;
}
.mc-hcol{
  text-align:center;font-size:10px;font-weight:800;
  color:rgba(200,188,240,.55);letter-spacing:.04em;
}

/* 网格：13 列 */
.mc-grid{
  display:grid;grid-template-columns:repeat(13,1fr);gap:4px;
}
.mc-cell{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* ── 文字被挡住修复 ──
     原来 padding 只有 5px/6px，格子被 flex 压到刚好装不下三行
     （音调号 + 图腾 + 日符名 + 日期），底部日期被强度条压住或直接溢出。
     现在：给足上下内边距 + 固定最小高度 + 底部留 4px 给强度条。 */
  padding:7px 3px 10px;
  min-height:74px;
  border-radius:8px;
  background:rgba(30,20,62,.45);
  border:1px solid rgba(150,120,255,.14);
  cursor:pointer;transition:.15s;font-family:inherit;
  overflow:visible;
  line-height:1;
}
.mc-cell:hover{
  border-color:var(--mc);background:rgba(48,30,96,.65);
  transform:translateY(-1px);
}
.mc-cell.on{
  border-color:var(--mc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--mc) 32%,transparent),
             0 0 14px color-mix(in srgb,var(--mc) 50%,transparent);
}
.mc-cell.sel{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.28);
}
/* 预警等级：左上角小点 */
.mc-cell.alert::before,
.mc-cell.warn::before,
.mc-cell.good::before{
  content:"";position:absolute;left:3px;top:3px;
  width:5px;height:5px;border-radius:50%;
}
.mc-cell.alert::before{background:#ff5a5a;box-shadow:0 0 6px #ff5a5a;}
.mc-cell.warn::before{background:#fbbf24;}
.mc-cell.good::before{background:#5eead4;}

.mc-tone{
  font-size:9px;font-weight:800;color:rgba(200,188,240,.62);
  line-height:1;margin-bottom:1px;
}
.mc-glyph{width:24px;height:24px;display:block;flex:none;margin:1px 0;}
.mc-glyph svg{display:block;width:100%;height:100%;}
.mc-sol{
  font-size:9px;font-weight:700;color:var(--mc);
  line-height:1.2;white-space:nowrap;
  max-width:100%;overflow:visible;
  margin-top:1px;
}
.mc-date{font-size:8.5px;color:rgba(200,188,240,.5);line-height:1.2;margin-top:1px;}
/* 强度条：格子底部一条 */
.mc-int{
  position:absolute;left:0;bottom:0;height:2px;
  background:var(--mc);opacity:.75;border-radius:0 2px 2px 0;
}

.mc-legend{
  display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;
  font-size:10.5px;color:rgba(200,188,240,.6);
}
.mc-legend span{display:inline-flex;align-items:center;gap:5px;}
.lg-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.lg-dot.good{background:#5eead4;}
.lg-dot.warn{background:#fbbf24;}
.lg-dot.alert{background:#ff5a5a;}
.lg-dot.on{background:#fff;}

/* ── 选中详情 ── */
.md-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid rgba(150,120,255,.14);
}
.md-glyph{width:46px;height:46px;flex:none;}
.md-glyph svg{display:block;width:100%;height:100%;}
.md-title{display:flex;flex-direction:column;gap:2px;min-width:0;}
.md-title b{font-size:15px;font-weight:900;color:var(--mc);}
.md-title span{font-size:11px;color:rgba(200,188,240,.6);}

.md-row{
  display:flex;gap:8px;padding:6px 0;
  font-size:12px;line-height:1.6;color:var(--ink-2);
  border-bottom:1px solid rgba(150,120,255,.07);
}
.md-row i{
  flex:none;width:34px;font-style:normal;font-size:11px;
  color:rgba(200,188,240,.5);font-weight:700;
}
.md-row b{color:#dcd0ff;}

.md-flags{margin-top:9px;display:flex;flex-direction:column;gap:6px;}
.mflag{
  padding:7px 9px;border-radius:9px;font-size:11.5px;line-height:1.6;
  display:flex;flex-direction:column;gap:2px;
}
.mflag b{font-size:11.5px;font-weight:800;}
.mflag.f-alert{background:rgba(255,90,90,.12);border:1px solid rgba(255,90,90,.35);color:#ffb0b0;}
.mflag.f-warn{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.30);color:#fbd78a;}
.mflag.f-good{background:rgba(94,234,212,.10);border:1px solid rgba(94,234,212,.28);color:#9df0e0;}

.md-bar{
  margin-top:10px;height:5px;border-radius:3px;
  background:rgba(150,120,255,.14);overflow:hidden;
}
.md-bar i{display:block;height:100%;border-radius:3px;transition:width .3s;}

/* ── ③ 强度曲线 + 预测 ── */
.maya-forecast{
  padding:14px 16px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
#maya-chart svg{display:block;width:100%;height:auto;}
.maya-summary{
  margin:10px 0 14px;font-size:13px;line-height:1.75;color:var(--ink-2);
  padding:10px 12px;border-radius:10px;
  background:rgba(123,77,255,.09);border-left:3px solid rgba(169,125,255,.5);
}
.maya-pf-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
@media (max-width:900px){ .maya-pf-grid{grid-template-columns:1fr;} }

.mpf-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 9px;margin-top:6px;border-radius:9px;
  background:rgba(30,20,62,.45);border:1px solid rgba(150,120,255,.14);
  cursor:pointer;transition:.15s;font-family:inherit;text-align:left;
}
.mpf-item:hover{border-color:rgba(169,125,255,.6);background:rgba(48,30,96,.65);}
.mpf-d{width:7px;height:7px;border-radius:50%;flex:none;}
.mpf-item b{font-size:12px;font-weight:800;color:var(--ink);flex:none;}
.mpf-item i{
  font-style:normal;font-size:11px;color:var(--ink-3);
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mpf-item em{font-style:normal;font-size:12px;font-weight:800;color:#b79bff;flex:none;}

/* ── ④ 音调 / 日符详解 ── */
.maya-detail-wrap{
  padding:14px 16px 16px;border-radius:14px;
  background:rgba(22,14,48,.42);border:1px solid rgba(150,120,255,.20);
  margin-bottom:18px;
}
.maya-tabs{display:flex;gap:8px;margin-bottom:12px;}
.maya-tab{
  padding:7px 16px;border-radius:999px;
  background:rgba(123,77,255,.12);border:1px solid rgba(150,120,255,.26);
  color:#c9b6ff;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:.16s;
}
.maya-tab:hover{background:rgba(123,77,255,.26);color:#fff;}
.maya-tab.on{
  background:linear-gradient(135deg,#7b4dff,#a855f7);
  border-color:transparent;color:#fff;
  box-shadow:0 4px 14px rgba(123,77,255,.42);
}

.maya-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
@media (max-width:900px){ .maya-list{grid-template-columns:1fr;} }
.maya-list[hidden]{display:none;}

.mlist-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:10px;
  background:rgba(30,20,62,.42);border:1px solid rgba(150,120,255,.13);
}
.mlist-n{
  flex:none;width:26px;height:26px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(123,77,255,.2);border:1px solid rgba(169,125,255,.35);
  font-size:12px;font-weight:900;color:#dcd0ff;
}
.mlist-glyph{flex:none;width:30px;height:30px;}
.mlist-glyph svg{display:block;width:100%;height:100%;}
.mlist-t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mlist-t b{font-size:12.5px;font-weight:800;color:var(--ink);}
.mlist-t b i{font-style:normal;font-size:11px;color:#a99ed0;font-weight:600;}
.mlist-t i,.mlist-t em{
  font-style:normal;font-size:11.5px;line-height:1.5;
  color:var(--ink-3);
}
.mlist-p{
  flex:none;font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;
}
.mlist-p.pw3{background:rgba(255,90,90,.18);color:#ff9a9a;border:1px solid rgba(255,90,90,.32);}
.mlist-p.pw2{background:rgba(251,191,36,.16);color:#fbd78a;border:1px solid rgba(251,191,36,.30);}
.mlist-p.pw1{background:rgba(150,120,255,.14);color:#b9a8ff;border:1px solid rgba(150,120,255,.26);}
.mlist-color{
  flex:none;width:10px;height:10px;border-radius:50%;
}


/* ═══════════════════════════════════════════════════════
   玛雅日详情弹窗（用户：点击时弹新窗口，不要右侧面板）
   ═══════════════════════════════════════════════════════ */
.maya-modal{
  position:fixed;inset:0;z-index:320;
  display:flex;align-items:center;justify-content:center;
}
.maya-modal[hidden]{display:none;}
.maya-modal-mask{
  position:absolute;inset:0;
  background:rgba(4,2,12,.72);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.maya-modal-box{
  position:relative;
  width:min(420px, calc(100vw - 40px));
  max-height:min(76vh, 640px);
  overflow-y:auto;
  padding:20px 20px 22px;
  border-radius:16px;
  background:linear-gradient(165deg,rgba(30,18,64,.99),rgba(16,9,38,.995));
  border:1px solid rgba(150,120,255,.42);
  box-shadow:0 30px 90px rgba(0,0,0,.8), 0 0 0 1px rgba(169,125,255,.12) inset;
  animation:mayaPop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes mayaPop{
  from{opacity:0;transform:translateY(10px) scale(.96);}
  to  {opacity:1;transform:translateY(0) scale(1);}
}
.maya-modal-x{
  position:absolute;right:12px;top:12px;
  width:28px;height:28px;border-radius:9px;
  background:rgba(123,77,255,.18);
  border:1px solid rgba(150,120,255,.32);
  color:#c9b6ff;font-size:17px;line-height:1;
  cursor:pointer;padding:0;transition:.15s;z-index:2;
}
.maya-modal-x:hover{background:rgba(255,90,90,.32);color:#fff;border-color:rgba(255,120,120,.5);}

/* 弹窗内的详情排版（比右侧面板更宽松） */
.maya-modal-box .md-head{padding-right:34px;}
.maya-modal-box .md-glyph{width:54px;height:54px;}
.maya-modal-box .md-title b{font-size:18px;}
.maya-modal-box .md-title span{font-size:12px;}
.maya-modal-box .md-row{font-size:13px;padding:8px 0;}
.maya-modal-box .mflag{font-size:12.5px;padding:9px 11px;}

/* 日历左侧占满（右侧面板已隐藏） */
.maya-cal-wrap{grid-template-columns:1fr;}
.maya-cal-right[hidden]{display:none;}