绿茵传说：超巨之路

/* =========================================================
   绿茵传说模拟器｜状态栏 CSS 美化
   直接粘贴到自定义 CSS 中即可
   适配：details / summary / 表格 / 列表 / 代码块 / 嵌套记忆区
   ========================================================= */

:root {
  --soccer-bg: #06120e;
  --soccer-bg-2: #10281d;
  --soccer-paper: #fff8e8;
  --soccer-paper-2: #f4ead2;
  --soccer-ink: #17251d;
  --soccer-muted: #627066;
  --soccer-gold: #d8b45c;
  --soccer-gold-light: #ffe6a6;
  --soccer-green: #42d782;
  --soccer-red: #d75b4e;
  --soccer-blue: #6fb8ff;
  --soccer-purple: #b694ff;
  --soccer-line: rgba(23, 37, 29, 0.16);
  --soccer-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  --soccer-radius: 18px;
  --soccer-font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --soccer-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

/* ========== 总体 details 面板 ========== */

details {
  --panel-color: var(--soccer-gold);
  --panel-soft: rgba(216, 180, 92, 0.16);
  --panel-icon: "⚽";

  position: relative;
  margin: 14px 0;
  border-radius: var(--soccer-radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.98), rgba(244, 234, 210, 0.98)),
    repeating-linear-gradient(
      0deg,
      transparent 0 30px,
      rgba(23, 37, 29, 0.045) 31px
    );
  color: var(--soccer-ink);
  font-family: var(--soccer-font);
  font-size: 15px;
  line-height: 1.82;
  box-shadow: var(--soccer-shadow);
  overflow: hidden;
  isolation: isolate;
}

/* 顶部彩线 */
details::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--panel-color),
    var(--soccer-green),
    var(--soccer-gold-light)
  );
  z-index: 2;
}

/* 背景光晕 */
details::after {
  content: "";
  position: absolute;
  right: -70px;
  top: 42px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--panel-soft), transparent 66%);
  pointer-events: none;
  z-index: -1;
}

/* ========== 不同模块自动分色 ========== */

details:nth-of-type(1) {
  --panel-icon: "🧠";
  --panel-color: #ef6a5b;
  --panel-soft: rgba(239, 106, 91, 0.16);
}

details:nth-of-type(2) {
  --panel-icon: "📍";
  --panel-color: #6fb8ff;
  --panel-soft: rgba(111, 184, 255, 0.16);
}

details:nth-of-type(3) {
  --panel-icon: "👤";
  --panel-color: #42d782;
  --panel-soft: rgba(66, 215, 130, 0.16);
}

details:nth-of-type(4) {
  --panel-icon: "🏟️";
  --panel-color: #d8b45c;
  --panel-soft: rgba(216, 180, 92, 0.18);
}

details:nth-of-type(5) {
  --panel-icon: "🎭";
  --panel-color: #b694ff;
  --panel-soft: rgba(182, 148, 255, 0.16);
}

details:nth-of-type(6) {
  --panel-icon: "🕸️";
  --panel-color: #58d6c9;
  --panel-soft: rgba(88, 214, 201, 0.16);
}

details:nth-of-type(7) {
  --panel-icon: "📅";
  --panel-color: #ffca61;
  --panel-soft: rgba(255, 202, 97, 0.17);
}

details:nth-of-type(8) {
  --panel-icon: "📱";
  --panel-color: #7bbcff;
  --panel-soft: rgba(123, 188, 255, 0.16);
}

details:nth-of-type(9) {
  --panel-icon: "👑";
  --panel-color: #ffd86d;
  --panel-soft: rgba(255, 216, 109, 0.18);
}

details:nth-of-type(10) {
  --panel-icon: "🧾";
  --panel-color: #c4a0ff;
  --panel-soft: rgba(196, 160, 255, 0.16);
}

details:nth-of-type(11) {
  --panel-icon: "🎯";
  --panel-color: #65e493;
  --panel-soft: rgba(101, 228, 147, 0.16);
}

/* 嵌套 details，例如记忆区里的星记忆回廊 */
details details {
  margin: 12px 0 4px;
  border-color: rgba(23, 37, 29, 0.2);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7),
    rgba(255, 250, 235, 0.88)
  );
  box-shadow: none;
}

/* ========== summary 标题栏 ========== */

details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;

  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 14px 18px;
  color: #fff9df;
  font-family: var(--soccer-font);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;

  background:
    radial-gradient(circle at 0% 0%, var(--panel-soft), transparent 46%),
    linear-gradient(135deg, var(--soccer-bg), var(--soccer-bg-2) 58%, #07100d);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

details > summary::-webkit-details-marker {
  display: none;
}

/* summary 图标 */
details > summary::before {
  content: var(--panel-icon);
  flex: 0 0 auto;

  width: 34px;
  height: 34px;
  border-radius: 13px;

  display: grid;
  place-items: center;

  font-size: 17px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
    var(--panel-soft);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.18);
}

/* 展开/收起标签 */
details > summary::after {
  content: "展开";
  margin-left: auto;
  flex: 0 0 auto;

  padding: 5px 10px;
  border-radius: 999px;

  color: #07110c;
  background: linear-gradient(135deg, var(--soccer-gold-light), var(--panel-color));
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: none;
}

details[open] > summary::after {
  content: "收起";
}

/* 展开动画 */
details[open] {
  animation: soccerDetailsOpen 0.28s ease both;
}

@keyframes soccerDetailsOpen {
  from {
    transform: translateY(4px);
    filter: saturate(0.92);
  }
  to {
    transform: translateY(0);
    filter: saturate(1);
  }
}

/* ========== 内容区间距 ========== */

details > :not(summary) {
  margin-left: 18px;
  margin-right: 18px;
}

details > summary + * {
  margin-top: 18px;
}

details > :last-child {
  margin-bottom: 18px;
}

details p {
  margin: 10px 18px;
  color: var(--soccer-ink);
  line-height: 1.9;
}

/* ========== 标题 ========== */

details h1,
details h2,
details h3,
details h4 {
  margin: 18px 18px 10px;
  color: #0e2a1b;
  font-family: var(--soccer-serif);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

details h3 {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 11px 13px;
  border-radius: 15px;

  background: linear-gradient(90deg, var(--panel-soft), rgba(255, 255, 255, 0.22));
  border: 1px solid rgba(23, 37, 29, 0.11);
  font-size: 18px;
}

details h3::before {
  content: "";
  width: 7px;
  height: 22px;
  border-radius: 999px;
  background: var(--panel-color);
  box-shadow: 0 0 14px var(--panel-soft);
}

/* ========== 加粗、强调 ========== */

details strong {
  color: #123e27;
  font-weight: 950;
}

details em {
  color: #8e392e;
  font-style: normal;
  font-weight: 850;
}

details hr {
  margin: 16px 18px;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(23, 37, 29, 0.2), transparent);
}

/* ========== 列表：关系网络 / 社交动态 / 行动推荐 ========== */

details ul,
details ol {
  margin: 10px 18px 14px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

details li {
  position: relative;

  padding: 10px 12px 10px 34px;
  border-radius: 14px;

  color: #25372c;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(23, 37, 29, 0.1);
  box-shadow: 0 4px 14px rgba(20, 35, 27, 0.05);
}

details ul li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: var(--panel-color);
  box-shadow: 0 0 0 4px var(--panel-soft);
}

details ol {
  counter-reset: soccerOption;
}

details ol li {
  counter-increment: soccerOption;
  padding-left: 48px;
}

details ol li::before {
  content: counter(soccerOption);

  position: absolute;
  left: 12px;
  top: 9px;

  width: 24px;
  height: 24px;
  border-radius: 10px;

  display: grid;
  place-items: center;

  color: #07110c;
  background: linear-gradient(135deg, var(--soccer-gold-light), var(--panel-color));
  font-weight: 950;
  font-size: 12px;
}

/* ========== 表格：记忆区 / 历史排名 / 数据表 ========== */

details table {
  width: calc(100% - 36px);
  margin: 14px 18px 18px;

  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;

  border-radius: 16px;
  border: 1px solid rgba(23, 37, 29, 0.16);
  background: #fffdf4;
  box-shadow: 0 12px 28px rgba(20, 35, 27, 0.08);
}

details th {
  padding: 11px 12px;

  color: #07110c;
  background: linear-gradient(135deg, var(--soccer-gold-light), var(--panel-color));

  font-weight: 950;
  text-align: left;
  white-space: nowrap;
}

details td {
  padding: 11px 12px;
  border-top: 1px solid rgba(23, 37, 29, 0.1);

  color: #26392e;
  vertical-align: top;
  line-height: 1.7;
}

details tr:nth-child(even) td {
  background: rgba(20, 35, 27, 0.035);
}

/* ========== 代码块：战术校验 / 数值变化 ========== */

details pre {
  margin: 14px 18px 18px;
  padding: 16px;

  overflow: auto;
  border-radius: 16px;

  color: #d9ffe5;
  background:
    linear-gradient(135deg, rgba(67, 217, 131, 0.1), transparent),
    #07100c;
  border: 1px solid rgba(67, 217, 131, 0.23);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.72;
}

details code {
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  color: #0f3d27;
  background: rgba(67, 217, 131, 0.15);
  border: 1px solid rgba(67, 217, 131, 0.16);
  border-radius: 8px;
  padding: 1px 5px;
}

details pre code {
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

/* ========== 引用块 ========== */

details blockquote {
  margin: 14px 18px;
  padding: 13px 15px;

  border-left: 5px solid var(--panel-color);
  border-radius: 0 14px 14px 0;

  color: #2d3c32;
  background: var(--panel-soft);
}

/* ========== 链接 ========== */

details a {
  color: #0f6b3d;
  font-weight: 850;
  text-underline-offset: 3px;
}

details summary a {
  color: inherit;
}

/* ========== 选中文本 ========== */

details *::selection {
  background: rgba(216, 180, 92, 0.34);
}

/* ========== 手机端适配 ========== */

@media (max-width: 720px) {
  details {
    margin: 12px 0;
    border-radius: 17px;
    font-size: 14px;
    line-height: 1.78;
  }

  details > summary {
    min-height: 50px;
    padding: 12px 13px;

    font-size: 14px;
    letter-spacing: 0.04em;
    gap: 9px;
  }

  details > summary::before {
    width: 30px;
    height: 30px;
    border-radius: 11px;
    font-size: 15px;
  }

  details > summary::after {
    padding: 4px 8px;
    font-size: 11px;
  }

  details > :not(summary),
  details p,
  details h1,
  details h2,
  details h3,
  details h4,
  details ul,
  details ol,
  details pre,
  details blockquote {
    margin-left: 12px;
    margin-right: 12px;
  }

  details li {
    padding: 9px 10px 9px 30px;
  }

  details table {
    display: block;
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;

    overflow-x: auto;
    white-space: nowrap;
    border-radius: 14px;
  }

  details th,
  details td {
    padding: 9px 10px;
    font-size: 13px;
  }
}
/* =========================================================
   绿茵传说模拟器｜正文 + 状态栏标题修复补丁
   用法：直接追加到原 CSS 最后
   作用：
   1. 强制美化正文区域
   2. 修复状态栏标题黄色看不清
   3. 加强 details summary 可读性
   ========================================================= */


/* ================================
   ① 修复状态栏标题看不清
   ================================ */

/* 状态栏 summary 标题统一改成高对比白字 */
details > summary,
details > summary *,
details > summary strong,
details > summary b,
details > summary span {
  color: #fff9e8 !important;
  -webkit-text-fill-color: #fff9e8 !important;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(0, 0, 0, 0.45) !important;
}

/* 标题栏背景加深，不再依赖黄色字 */
details > summary {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 224, 150, 0.14), transparent 45%),
    linear-gradient(135deg, #06100c 0%, #0d2419 52%, #07100c 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16) !important;
}

/* 展开/收起按钮保持深字，防止也被改成白色 */
details > summary::after {
  color: #07100c !important;
  -webkit-text-fill-color: #07100c !important;
  text-shadow: none !important;
  background: linear-gradient(135deg, #fff0b8, #d8b45c) !i

/* 预览已截断；下载 CSS 可查看完整内容。 */

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。