/* ============================================================
   calendar.css — 竞赛日历
   · 玻璃拟态月历卡（NO.04）
   · 横向轮播：超边距（trae「解锁全新可能」式：中间放大、两侧露出）
   · 点击标记日 → 全屏复古胶片窗口（poster.css）
   ============================================================ */

.cal-block { position: relative; }

.cal-ctl { display: flex; gap: 10px; }
.cal-arrow {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line-dark-2);
  color: var(--text-1);
  font-size: 17px;
  transition: all .2s;
}
.cal-arrow:hover:not(:disabled) {
  background: rgba(77, 159, 255, .16);
  border-color: rgba(77, 159, 255, .55);
  color: #fff;
  transform: translateY(-2px);
}
.cal-arrow:disabled { opacity: .3; cursor: not-allowed; }

/* 视口：用于超边距裁切与拖动 */
.cal-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  padding: 10px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 92%, transparent 100%);
}
.cal-viewport.dragging { cursor: grabbing; }
.cal-strip {
  display: flex;
  gap: 22px;
  align-items: stretch;
  padding: 8px 8vw 14px;
  transition: transform .55s cubic-bezier(.25, .9, .3, 1);
  will-change: transform;
}
.cal-viewport.dragging .cal-strip { transition: none; }

/* 玻璃月度卡（NO.04）—— 尺寸调小（约 520px/38vw） */
.cal-month {
  flex: none;
  width: min(520px, 38vw);
  min-width: 300px;
  border-radius: 16px;
  padding: 14px 14px 12px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(160deg, rgba(91, 108, 255, .30), rgba(139, 92, 246, .22) 55%, rgba(236, 107, 198, .18));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .5s cubic-bezier(.25, .9, .3, 1), box-shadow .5s, opacity .5s;
  transform-origin: center;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.cal-month::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .16), transparent 55%);
}
.cal-month.is-active {
  transform: scale(1.06);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .3);
  z-index: 2;
}
.cal-month.is-side { opacity: .55; transform: scale(.88); }
.cal-month.is-far { opacity: .18; transform: scale(.72); }

.cal-mhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.cal-mtitle { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.cal-mcount {
  font-size: 10.5px;
  padding: 2px 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .25);
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-bottom: 5px;
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .05);
  transition: transform .15s, background .15s;
}
.cal-day.empty { visibility: hidden; }
.cal-day.has-event { cursor: pointer; }
.cal-day.has-event:hover { transform: scale(1.12); background: rgba(255, 255, 255, .22); z-index: 3; }
.cal-day.today {
  box-shadow: inset 0 0 0 1.5px rgba(255, 225, 77, .8);
  color: #ffe14d;
}
.cal-day.period-first { border-radius: 9px 3px 3px 9px; }
.cal-day.period-mid { border-radius: 3px; }
.cal-day.period-last { border-radius: 3px 9px 9px 3px; }
.cal-day.period-in { background: linear-gradient(180deg, rgba(91, 108, 255, .65), rgba(139, 92, 246, .65)); }
.cal-day.point-day { background: linear-gradient(150deg, rgba(236, 107, 198, .55), rgba(91, 108, 255, .55)); }
.cal-dots {
  position: absolute;
  bottom: 3px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 3px;
}
.cal-dots i { width: 4.5px; height: 4.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(255, 255, 255, .9); }

/* 日历提示：水平居中于 block-head，与"2025.08 → 2026.09"标题和 ←/→ 箭头同高 */
.cal-block .block-head { position: relative; }
.cal-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  font-size: 12.5px;
  color: var(--text-1);
  letter-spacing: .08em;
  padding: 6px 16px;
  border: 1px solid var(--line-dark-2);
  border-radius: 99px;
  background: rgba(10, 14, 20, .92);
  white-space: nowrap;
  z-index: 6;
  pointer-events: none;
}

@media (max-width: 900px) {
  .cal-month { width: 78vw; min-width: 260px; }
  .cal-strip { padding: 8px 10vw 14px; }
}

/* ---------- B-10 同日多事件选择列表（页内小浮层） ---------- */
.cal-picker {
  position: fixed;
  z-index: 9800;
  min-width: 230px;
  max-width: 300px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(16, 22, 32, .96);
  border: 1px solid var(--line-dark-2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
  animation: calPickerIn .18s ease;
}
@keyframes calPickerIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cal-picker-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  color: var(--text-2);
  padding: 4px 8px 8px;
}
.cal-picker-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-0);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.cal-picker-item:hover { background: rgba(77, 159, 255, .12); border-color: rgba(77, 159, 255, .35); }
.cal-picker-item i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cal-picker-item em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-2); }
