/* ============================================================
   GIAN · Portal styles  v5.1 (Optimized)
   Loaded by index.html only
   ============================================================ */

/* ── Portal page layout ───────────────────────────────────── */
.portal-page body {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;    /* fallback */
  min-height: 100dvh;   /* modern: accounts for mobile browser chrome */
  padding-block-end: 0;
  padding:
    max(3rem, env(safe-area-inset-top,    3rem))
    max(2rem, env(safe-area-inset-right,  2rem))
    max(3rem, env(safe-area-inset-bottom, 3rem))
    max(2rem, env(safe-area-inset-left,   2rem));
  font-family: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", serif;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

/* ── Shell ────────────────────────────────────────────────── */
.portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 44rem;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .portal {
    animation: portal-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes portal-rise {
    from { opacity: 0; transform: translateY(1.25rem); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Header ───────────────────────────────────────────────── */
.portal-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem; /* 安全的显式间距，拒绝负 margin */
}

.portal-logo img {
  width: 2.5rem; 
  height: 2.5rem;
  display: block;
  opacity: 0.75;
  margin-bottom: 0.75rem;
}
@media (prefers-color-scheme: dark) {
  .portal-logo img { opacity: 0.92; }
}

h1.portal-wordmark {
  font-size: clamp(0.6rem, 1.4vw, 0.75rem);
  font-weight: 400;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  text-transform: uppercase;
  color: var(--mu2);
  line-height: 1;
  margin: 0;
}

.portal-tagline {
  font-size: clamp(0.7rem, 1.6vw, 0.8rem);
  letter-spacing: 0.18em;
  color: var(--mu2);
  font-style: italic;
  margin: 0;
}

/* ── Main content layout ─────────────────────────────────── */
.portal-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 核心板块之间的标准上下安全间距 */
}

.portal-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem; /* 标签与下方网格/内容的紧凑安全间距 */
}

/* ── Semantic dividers ────────────────────────────────────── */
hr.portal-rule {
  width: 100%;
  height: 1px;
  border: none;
  background: var(--bd);
  margin: 0;
}

/* ── Section labels ───────────────────────────────────────── */
h2.portal-label {
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
  color: var(--mu2);
  line-height: 1.2;
  margin: 0;
}

/* ── Language & Social Grid Framework ─────────────────────── */
/* 采用完美的“上左容器线+各单元格右下线”逻辑，彻底避免复杂的 nth-child 计算，无缝适配任何列数 */
.lang-grid, .social-grid {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--bd);
  border-left: 1px solid var(--bd);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-grid { grid-template-columns: repeat(5, 1fr); }
.social-grid { grid-template-columns: repeat(5, 1fr); }

.lang-cell, .social-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-right: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  transition: color 0.25s ease, background 0.25s ease;
  position: relative;
  min-width: 0; /* 允许在 Grid 内收缩，防止溢出 */
}

.lang-cell {
  gap: 0.4rem;
  padding: 1.5rem 0.75rem;
  color: var(--mu);
}

.social-cell {
  gap: 0.35rem;
  padding: 1.25rem 0.5rem;
  color: var(--mu);
}

/* Hover & Focus 状态提升 */
.lang-cell:hover, .social-cell[href]:hover {
  color: var(--ink);
  background: rgba(128, 128, 128, 0.07);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.lang-cell:focus-visible, .social-cell:focus-visible {
  outline: 2px solid var(--mu2);
  outline-offset: -2px;
  z-index: 2;
}

/* ── Cell Inner Typography ───────────────────────────────── */
.cell-native, .cell-en, .cell-platform, .cell-handle {
  word-break: break-word; /* 极端小屏下强制安全换行，防止撑破布局 */
  overflow-wrap: anywhere;
}

.cell-native {
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.cell-native.sc-cjk { font-family: var(--font-zh); font-size: 1.05rem; }
.cell-native.sc-ja  { font-family: var(--font-ja); font-size: 1.05rem; }
.cell-native.sc-ko  { font-family: var(--font-ko); font-size: 1rem; }
.cell-native.sc-hi  { font-family: var(--font-hi); font-size: 0.95rem; }
.cell-native.sc-ar  { font-family: var(--font-ar); font-size: 1rem; direction: rtl; }
.cell-native.sc-bn  { font-family: var(--font-bn); font-size: 0.95rem; }

.cell-en {
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mu2);
}

/* 非超链接社交单元格（微信） */
.social-cell:not([href]) {
  opacity: 0.5;
  cursor: default;
  user-select: none;
}

.cell-platform {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}
.cell-platform.sc-zh {
  font-family: var(--font-zh);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
}

.cell-handle {
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--mu2);
  text-align: center;
  line-height: 1.4;
}

/* ── Language-detect hint ─────────────────────────────────── */
.portal-detect {
  font-size: 0.65rem;
  color: var(--mu2);
  letter-spacing: 0.1em;
  font-style: italic;
  margin: 0;
  padding: 0;
}
.portal-detect a {
  color: var(--mu);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.portal-detect a:hover { color: var(--ink); }
#detect-msg { display: none; }

/* ── Portal footer ────────────────────────────────────────── */
.portal > footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.portal-copy {
  font-size: 0.6rem;
  color: var(--mu2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 500px) {
  .portal { gap: 2.5rem; }
  .portal-main { gap: 2rem; }
  
  /* 5列自适应变为3列，边框逻辑由于上文重构，此处无需额外清除 nth-child */
  .lang-grid { grid-template-columns: repeat(3, 1fr); }
  .lang-cell { padding: 1.25rem 0.5rem; }

  /* 5列自适应变为2列 */
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .social-cell { padding: 1rem 0.5rem; }
}

@media (max-width: 340px) {
  /* 极端超窄小屏降级为2列 */
  .lang-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .portal { animation: none; }
}