.rp {
  /* 纵向流：页头在上，卡片在下。宽屏时把页头挤到左侧（见下） */
  display: block;
  height: 100%;
  padding-left: 0;
}
.rp.with-head { padding-left: 236px; }          /* 宽屏：给左侧页头留位 */
.rp .rp-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 212px;
  padding-top: 6px;
}
.rp:not(.with-head) .rp-head {
  position: static;
  width: auto;
  padding: 4px 0 6px;
}
.rp-head .pg-title { font-size: clamp(30px, 4.2vw, 58px); line-height: 1.05; }
.rp-head .pg-kicker { margin-bottom: 6px; }
/* 窄屏：页头回到上方 */

/* ============================================================
   班册：元素卡片（第三刻度）
   ------------------------------------------------------------
   把每人做成一格「化学元素」：
     左上 学号末三位 = 原子序数，右上 完整学号
     中间 姓名       = 元素符号（最大那块）
          网名       = 元素英文名
          最喜欢的分子 = 化学式（数字自动变下标）
          关键词     = 自述
     底部 电话
   每格背后还有一圈极淡的「电子轨道」装饰。
   ============================================================ */

.roster {
  display: grid;
  /* 列数固定，由屏幕宽度决定 —— 不依赖 JS，宽屏必定 4 列 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  justify-content: center;
  align-content: start;
  padding-bottom: 6px;
}
@media (max-width: 1000px) { .roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }

.elc {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  height: auto;
  aspect-ratio: 4 / 3;
  padding: calc(11px * var(--elc-s, 1)) calc(13px * var(--elc-s, 1)) calc(10px * var(--elc-s, 1));
  border-radius: clamp(12px, 1vw, 15px);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(70, 150, 240, .22), transparent 62%),
    linear-gradient(158deg, rgba(15, 46, 92, .96), rgba(6, 18, 40, 1));
  border: 1px solid rgba(120, 185, 240, .32);
  box-shadow: 0 14px 30px rgba(0, 8, 22, .5);
  transition: transform .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
.elc:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 217, 119, .55);
  box-shadow: 0 20px 40px rgba(0, 8, 22, .62), 0 0 0 1px rgba(255, 217, 119, .18);
}

/* 背后那圈电子轨道 */
.elc-shell {
  position: absolute;
  right: -34px;
  top: -34px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 1px dashed rgba(140, 200, 255, .16);
  box-shadow: 0 0 0 16px rgba(140, 200, 255, .05) inset;
  pointer-events: none;
}
.elc-shell::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #ffd977;
  box-shadow: 0 0 10px rgba(255, 217, 119, .9);
}

/* ---------- 顶行：原子序数 + 学号 ---------- */
.elc-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.elc-z {
  font: 700 calc(21px * var(--elc-s, 1))/1 "Songti SC", "STSong", serif;
  letter-spacing: .02em;
  color: #ffd977;
}
.elc-sid {
  font-size: 10.5px;
  letter-spacing: .1em;
  color: rgba(150, 190, 220, .72);
}

/* ---------- 元素符号：姓名 ---------- */
.elc-sym {
  position: relative;
  z-index: 2;
  margin-top: clamp(5px, .9vw, 10px);
  font: 700 calc(26px * var(--elc-s, 1))/1.15 "Songti SC", "STSong", serif;
  letter-spacing: .04em;
  color: #f4faff;
  text-shadow: 0 2px 14px rgba(0, 10, 26, .7);
}

/* ---------- 元素英文名：网名 ---------- */
.elc-en {
  position: relative;
  z-index: 2;
  margin-top: 3px;
  font-size: clamp(10.5px, .95vw, 12.5px);
  letter-spacing: .04em;
  color: rgba(160, 205, 240, .85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 化学式：最喜欢的分子 ---------- */
.elc-mol {
  position: relative;
  z-index: 2;
  margin-top: clamp(5px, .9vw, 9px);
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 9px;
  font-size: clamp(11.5px, 1.05vw, 13.5px);
  letter-spacing: .02em;
  color: #0a1c30;
  background: linear-gradient(135deg, #ffe6a8, #ffc95e);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 6, 18, .35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.elc-mol sub {
  font-size: .72em;
  vertical-align: -.22em;
}
.elc-mol.is-empty {
  color: rgba(160, 195, 220, .7);
  background: rgba(120, 185, 240, .12);
  box-shadow: none;
}

/* ---------- 自述 ---------- */
.elc-key {
  position: relative;
  z-index: 2;
  margin: clamp(4px, .7vw, 8px) 0 0;
  font-size: clamp(11px, 1vw, 12.5px);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: rgba(206, 228, 247, .9);
}

/* ---------- 底部：电话 ---------- */
.elc-foot {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: clamp(6px, .9vw, 9px);
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(10.5px, .95vw, 12px);
  letter-spacing: .05em;
  color: rgba(160, 200, 232, .8);
  border-top: 1px solid rgba(120, 185, 240, .14);
}
.elc-foot .elc-ico {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  color: rgba(255, 217, 119, .85);
}
.elc-foot .elc-ico svg { display: block; width: 100%; height: 100%; }

/* ---------- 手机 ---------- */

/* ============================================================
   背景：一层「周期表 + 六边形分子」的化学纹理
   ------------------------------------------------------------
   用纯 CSS 画，不引任何图片：
     · 细网格 = 周期表的格子
     · 大六边形 = 苯环 / 分子骨架
     · 几个光点 = 电子
   强度压得很低，只做氛围，不抢内容。
   ============================================================ */
.roster {
  position: relative;
  padding: 18px 16px 46px;
  border-radius: 20px;
  background:
    /* 细网格（周期表格子） */
    linear-gradient(rgba(120, 185, 240, .055) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(120, 185, 240, .055) 1px, transparent 1px) 0 0 / 46px 100%,
    /* 两处柔光 */
    radial-gradient(70% 50% at 12% 0%, rgba(70, 150, 240, .12), transparent 70%),
    radial-gradient(60% 50% at 92% 100%, rgba(255, 200, 100, .09), transparent 70%);
  border: 1px solid rgba(120, 185, 240, .10);
  overflow: hidden;
}

/* 大六边形分子骨架（用 conic-gradient 拼出来，铺一层） */
.roster::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    /* 六边形：三条 60° 斜线交织 */
    repeating-linear-gradient(60deg,
      rgba(120, 185, 240, .07) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(-60deg,
      rgba(120, 185, 240, .07) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg,
      rgba(120, 185, 240, .05) 0 1px, transparent 1px 68px);
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 30%, transparent 88%);
}

/* 电子光点 */
.roster::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 217, 119, .55) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(140, 200, 255, .5) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 217, 119, .4) 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(140, 200, 255, .38) 0 1.5px, transparent 2.5px);
  background-position: 14% 22%, 78% 14%, 34% 78%, 88% 66%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: eDrift 9s ease-in-out infinite alternate;
}
@keyframes eDrift {
  from { transform: translate3d(0, 0, 0); opacity: .75; }
  to   { transform: translate3d(6px, -8px, 0); opacity: 1; }
}

/* 卡片压在纹理之上，并且自身的底再实一点（不然文字发飘） */
.elc {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(70, 150, 240, .20), transparent 62%),
    linear-gradient(158deg, rgba(13, 42, 84, .97), rgba(5, 16, 36, .995));
  backdrop-filter: blur(1px);
}
/* 卡片四角加一点化学感的小标记 */
.elc::after {
  content: '';
  position: absolute;
  left: 13px;
  bottom: 46px;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 217, 119, .55), transparent);
  pointer-events: none;
}

/* 顶行只剩学号：靠右，并给一点字距 */
.elc-top { justify-content: flex-end; }
.elc-sid { font-size: 11px; letter-spacing: .12em; }

@media (max-width: 560px) {
  .roster { padding: 12px 10px 40px; border-radius: 16px; }
  .elc::after { display: none; }
}

/* ============================================================
   名片背景插画（有 art 的人）
   ------------------------------------------------------------
   整张插画铺满名片，上面压一层渐变把文字区域压暗，
   保证姓名 / 化学式 / 关键词 依然清楚。
   ============================================================ */
.elc-art {
  position: absolute;
  inset: 0;
  /* 无论原图什么比例，都按 4:3 铺满并居中裁切，绝不变形 */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  /* 压一层明度与饱和，插画不会抢文字的注意力 */
  filter: brightness(1.02) saturate(1.06);
}
/* 上面再叠一层：左边压暗、下方压暗，文字落在这两层上 */
.elc-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4, 14, 30, .92) 0%,
      rgba(4, 14, 30, .66) 42%,
      rgba(4, 14, 30, .22) 100%),
    linear-gradient(180deg,
      rgba(4, 14, 30, .40) 0%,
      rgba(4, 14, 30, .12) 42%,
      rgba(4, 14, 30, .82) 100%);
}
/* 有插画的卡片：内部元素都要压在两层之上 */
.elc.has-art .elc-shell,
.elc.has-art .elc-top,
.elc.has-art .elc-sym,
.elc.has-art .elc-en,
.elc.has-art .elc-mol,
.elc.has-art .elc-key,
.elc.has-art .elc-foot {
  position: relative;
  z-index: 2;
}
/* 有插画时，电子轨道那圈装饰让位（避免和插画打架） */
.elc.has-art .elc-shell { display: none; }
/* 姓名加一点投影，压在亮色插画上也读得清 */
.elc.has-art .elc-sym {
  text-shadow: 0 2px 8px rgba(0, 6, 16, .98), 0 0 22px rgba(0, 6, 16, .9), 0 0 40px rgba(0, 6, 16, .7);
}
.elc.has-art .elc-key,
.elc.has-art .elc-en { text-shadow: 0 1px 6px rgba(0, 6, 16, .98), 0 0 16px rgba(0, 6, 16, .85); }
.elc.has-art .elc-foot { color: rgba(206, 228, 247, .9); }