/* ══════════════════════════════════════════════════════════════════════════
   弧光 OS · 四格入口通道
   ──────────────────────────────────────────────────────────────────────────
   为什么单独一个文件：这是在不改动作者代码的前提下加的一层。
   只依赖 index.html 里的一行 <div id="portal-grid">，删掉那行就完全恢复原状。
   ══════════════════════════════════════════════════════════════════════════ */

#portal-grid {
  position: absolute;
  left: clamp(16px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(158px, 196px));
  gap: 12px;
  pointer-events: auto;
  /* 顶部时钟与右侧角色都不在这个区域，不会互相遮挡 */
  /* 拖动时由 JS 改成 left/top + transform:none，这里不加过渡，
     否则拖动会有延迟感（窗口拖动也不加过渡，保持一致） */
}
/* 拖动中：抬起来的感觉 */
#portal-grid[data-dragging="true"] {
  z-index: 40;
  filter: drop-shadow(0 22px 42px #000d);
}
#portal-grid[data-dragging="true"] .portal-head { cursor: grabbing }
/* 拖动结束后短暂禁用点击，避免一放手就误触卡片 */
#portal-grid[data-just-dragged="1"] .portal-card { pointer-events: none }

/* ── 标题条（同时是拖动把手）────────────────────────────────────────────── */
.portal-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0 2px 2px;
  color: var(--text);
  text-shadow: 0 1px 10px #000c;
  cursor: grab;                  /* 窗口标题条同款手势提示 */
  user-select: none;
  touch-action: none;            /* 手机上拖动不被页面滚动抢走 */
  -webkit-user-select: none;
}
.portal-head:active { cursor: grabbing }
.portal-head:hover .portal-drag-hint { opacity: 1 }
.portal-drag-hint {
  margin-left: auto;
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--cyan);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.portal-head b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
}
.portal-head span {
  font-size: 11px;
  color: var(--cyan-soft);
  letter-spacing: .12em;
  opacity: .85;
}

/* ── 每一格 ─────────────────────────────────────────────────────────────── */
.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 14px 12px;
  text-align: left;
  border: 1px solid #18e0ff44;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #0d1730e0, #081021f0);
  box-shadow: 0 14px 38px #0009, inset 0 1px 0 #ffffff1a;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  transition:
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
  /* 入场：四格依次浮现 */
  animation: portal-in .42s var(--ease-out) both;
}
.portal-card:nth-of-type(1) { animation-delay: calc(var(--stagger, 45ms) * 0) }
.portal-card:nth-of-type(2) { animation-delay: calc(var(--stagger, 45ms) * 1) }
.portal-card:nth-of-type(3) { animation-delay: calc(var(--stagger, 45ms) * 2) }
.portal-card:nth-of-type(4) { animation-delay: calc(var(--stagger, 45ms) * 3) }

/* 顶部那道跟随主题色的细光 */
.portal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--portal-accent, var(--cyan)), transparent);
  opacity: .75;
}

.portal-card:hover,
.portal-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--portal-accent, var(--cyan));
  box-shadow: 0 18px 46px #000b, 0 0 22px color-mix(in srgb, var(--portal-accent, #18e0ff) 55%, transparent), inset 0 1px 0 #ffffff26;
  outline: none;
}
.portal-card:active { transform: translateY(-1px) scale(.985) }

/* ── 卡片内容 ───────────────────────────────────────────────────────────── */
.portal-glyph {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--portal-accent, #18e0ff) 16%, #06101f);
  border: 1px solid color-mix(in srgb, var(--portal-accent, #18e0ff) 45%, transparent);
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--portal-accent, #18e0ff) 22%, transparent);
  color: var(--portal-accent, var(--cyan-soft));
}
.portal-glyph svg { width: 19px; height: 19px; display: block }

.portal-card h4 {
  margin: 1px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.portal-card p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: #a9c2d9;
}
.portal-card small {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--portal-accent, var(--cyan));
  opacity: .9;
}

/* “外部跳转”角标 */
.portal-card[data-external="1"]::after {
  content: "↗";
  position: absolute;
  right: 11px;
  top: 9px;
  font-size: 12px;
  color: var(--portal-accent, var(--cyan));
  opacity: .8;
}

/* 主推那一格（提示词）给一点呼吸 */
.portal-card[data-featured="1"] {
  background: linear-gradient(180deg, #12305eec, #0a1a36f4);
  border-color: color-mix(in srgb, var(--portal-accent, #18e0ff) 65%, transparent);
}

@keyframes portal-in {
  from { opacity: 0; transform: translateY(14px) }
  to   { opacity: 1; transform: translateY(0) }
}

/* ── 窄屏：缩成一行四格 ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #portal-grid {
    left: 50%;
    top: auto;
    bottom: 78px;
    transform: translateX(-50%);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: min(560px, calc(100vw - 24px));
  }
  .portal-head { display: none }
  .portal-card { padding: 10px 8px; gap: 5px; align-items: center; text-align: center }
  .portal-card p { display: none }
  .portal-card small { font-size: 9px }
  .portal-glyph { width: 28px; height: 28px }
}

@media (max-width: 560px) {
  #portal-grid { grid-template-columns: repeat(2, 1fr); bottom: 74px; gap: 7px }
  .portal-card h4 { font-size: 13px }
}

/* ── 无障碍：减少动效时不播入场 ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .portal-card { animation: none; transition: none }
  .portal-card:hover { transform: none }
}