/* ==========================================================================
   地球Online · 系统公告弹窗
   --------------------------------------------------------------------------
   设计取向：深空黑 + 金色描边 + 扫描线，像主机游戏里的系统弹窗，
   但字要大、对比要够 —— 现场投影仪 / 教室大屏也要看得清。
   所有尺寸用 clamp，手机到 4K 都不会挤。
   ========================================================================== */

#eo-popups {
  position: fixed;
  inset: 0;
  z-index: 950;              /* 压过最终定格，但低于 #bootscreen(900→这里取 950 够用) */
  pointer-events: none;
}
#eo-popups .eo-mask { pointer-events: auto; }

.eo-mask {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vh, 42px) clamp(12px, 4vw, 60px);
  background: radial-gradient(120% 100% at 50% 0%, rgba(8, 12, 24, 0.82), rgba(0, 0, 0, 0.94));
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.34s ease;
  z-index: 951;
}
.eo-mask.on { opacity: 1; }

/* ---------------------------------------------------------- 弹窗主体 */
.eo-dlg {
  position: relative;
  width: min(760px, 92vw);
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2.2vw, 30px) clamp(16px, 2.4vw, 34px) clamp(14px, 1.8vw, 22px);
  background: linear-gradient(165deg, rgba(18, 22, 36, 0.985), rgba(8, 10, 18, 0.99));
  border: 1px solid rgba(212, 175, 55, 0.34);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.08) inset,
    0 28px 90px rgba(0, 0, 0, 0.78),
    0 0 70px rgba(212, 175, 55, 0.10);
  transform: translateY(22px) scale(0.97);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s ease;
  overflow: hidden;
}
.eo-mask.on .eo-dlg { transform: none; opacity: 1; }
.eo-dlg--wide { width: min(980px, 94vw); }

/* 顶部流光 */
.eo-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f0c74a, #fff3c4, #f0c74a, transparent);
  opacity: 0.85;
  animation: eoGlow 3.4s ease-in-out infinite;
}
@keyframes eoGlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.95; }
}

/* ---------------------------------------------------------- 头部 */
.eo-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.18);
}
.eo-ico { font-size: clamp(20px, 2.2vw, 30px); line-height: 1; flex: none; }
.eo-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(16px, 2.1vw, 27px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: #f5e3a8;
  text-shadow: 0 0 22px rgba(240, 199, 74, 0.34);
}
.eo-seq {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #8d93a6;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- 内容区（可滚动） */
.eo-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.5) transparent;
  -webkit-overflow-scrolling: touch;
}
.eo-body::-webkit-scrollbar { width: 6px; }
.eo-body::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.42);
  border-radius: 99px;
}

/* 纯文本段落 */
.eo-lines { font-size: clamp(13px, 1.34vw, 18px); line-height: 2.05; color: #cdd3e0; }
.eo-lines p { margin: 0; }
.eo-lines .eo-gap { height: 0.62em; }
.eo-kind-warn .eo-lines p { color: #ffd9b0; }
.eo-kind-letter .eo-lines p { color: #dfe5f0; }

/* 结算表格 */
.eo-table { display: flex; flex-direction: column; gap: 3px; }
.eo-tr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: clamp(12px, 1.16vw, 16px);
  line-height: 1.55;
  background: rgba(255, 255, 255, 0.022);
  animation: eoRowIn 0.42s ease both;
  animation-delay: calc(var(--i, 0) * 0.026s);
}
.eo-tr:nth-child(even) { background: rgba(255, 255, 255, 0.045); }
.eo-tr > span:first-child { color: #b9c1d1; }
.eo-tr > .eo-ok {
  color: #6ee7a8;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(110, 231, 168, 0.24);
}
.eo-th {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.05)) !important;
  border: 1px solid rgba(212, 175, 55, 0.30);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #f0c74a;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
  animation: none;
}
.eo-th > span:last-child { color: #f0c74a !important; text-shadow: none; }
@keyframes eoRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* 成就列表 */
.eo-achv {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eo-achv li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  font-size: clamp(12.5px, 1.24vw, 17px);
  line-height: 1.6;
  color: #e8edf7;
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.13), rgba(212, 175, 55, 0.02));
  border-left: 3px solid rgba(240, 199, 74, 0.72);
  border-radius: 7px;
  animation: eoAchvIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.055s);
}
.eo-trophy { flex: none; font-size: 1.05em; line-height: 1.45; }
@keyframes eoAchvIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 分支卡片 */
.eo-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 9px;
  margin-bottom: 16px;
}
.eo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 13px 9px;
  text-align: center;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 11px;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  animation: eoCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.062s);
}
.eo-card:hover {
  transform: translateY(-3px);
  border-color: rgba(240, 199, 74, 0.62);
  background: rgba(212, 175, 55, 0.09);
}
.eo-card-ico { font-size: clamp(19px, 1.9vw, 27px); line-height: 1; }
.eo-card-name {
  font-size: clamp(12.5px, 1.2vw, 16px);
  font-weight: 700;
  color: #f2e4b4;
  letter-spacing: 0.05em;
}
.eo-card-sub { font-size: clamp(10px, 0.94vw, 12.5px); color: #8f97a8; line-height: 1.45; }
@keyframes eoCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- 底部按钮 */
.eo-foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  margin-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.16);
}
.eo-btn {
  min-height: 44px;
  padding: 11px 26px;
  font: inherit;
  font-size: clamp(13px, 1.16vw, 15.5px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #cfd6e4;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.eo-btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(212, 175, 55, 0.5); }
.eo-btn:active { transform: scale(0.97); }
.eo-btn--main {
  color: #1a1206;
  background: linear-gradient(135deg, #f5d76e 0%, #d4af37 55%, #b8942a 100%);
  border-color: rgba(245, 215, 110, 0.85);
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.34);
}
.eo-btn--main:hover {
  filter: brightness(1.07);
  box-shadow: 0 10px 32px rgba(212, 175, 55, 0.48);
}

/* ---------------------------------------------------------- 各类型的轻微差异化 */
.eo-kind-warn .eo-dlg { border-color: rgba(255, 160, 60, 0.44); }
.eo-kind-warn .eo-glow { background: linear-gradient(90deg, transparent, #ff9f43, #ffd8a8, #ff9f43, transparent); }
.eo-kind-warn .eo-title { color: #ffc98a; text-shadow: 0 0 22px rgba(255, 159, 67, 0.36); }

.eo-kind-achv .eo-dlg { border-color: rgba(212, 175, 55, 0.56); }
.eo-kind-letter .eo-dlg { border-color: rgba(140, 175, 255, 0.42); }
.eo-kind-letter .eo-title { color: #bcd0ff; text-shadow: 0 0 22px rgba(140, 175, 255, 0.32); }

/* ---------------------------------------------------------- 手机 / 窄屏 */
@media (max-width: 640px) {
  .eo-dlg { width: 96vw; max-height: 88vh; border-radius: 13px; }
  .eo-head { gap: 9px; padding-bottom: 9px; margin-bottom: 9px; }
  .eo-tr { padding: 6px 9px; font-size: 12px; gap: 8px; }
  .eo-foot { gap: 8px; }
  .eo-btn { flex: 1 1 auto; padding: 11px 14px; }
  .eo-cards { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; }
  .eo-card { padding: 10px 6px; }
}

/* 矮屏（投影 16:9 但高度不够） */
@media (max-height: 560px) {
  .eo-dlg { max-height: 92vh; }
  .eo-lines { line-height: 1.75; }
}

/* ---------------------------------------------------------------- 弹窗大表情 / 表情包 */
.eo-sticker { display: flex; justify-content: center; align-items: center; margin: 4px 0 14px; }
.eo-sticker img {
  max-width: min(340px, 62%);
  max-height: 220px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}
.eo-sticker-emoji {
  font-size: clamp(62px, 9vw, 106px);
  line-height: 1;
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.3));
  animation: eoStickerIn 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both,
             eoStickerFloat 2.8s ease-in-out 0.7s infinite;
}
@keyframes eoStickerIn {
  from { transform: scale(0.35) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes eoStickerFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}