/* ============================================================
   lego-theme.css — 乐高视觉语言叠加层
   在现有「博物馆编辑风」骨架上叠加 LEGO 元素：
   ① 凸点（stud）纹理系统  ② 乐高黄第二强调色
   ③ 砖块式组件            ④ 纯 CSS/SVG 积木插图
   整层可回退：移除各 HTML 中的本文件 <link> 即恢复原貌。
   ============================================================ */

:root {
  /* 乐高黄第二强调色（克制使用，主色深青 + 朱砂橙不变） */
  --lego-yellow: #f7c948;         /* 乐高黄：徽章、角标 */
  --lego-yellow-bright: #ffcf00;  /* 乐高亮黄：砖块按钮 */
  --lego-yellow-deep: #c9a227;    /* 黄砖暗面：厚度投影 */
  --lego-yellow-ink: #5c4500;     /* 黄底上的深色文字 */

  /* 凸点纹理配色（默认用于浅色底） */
  --lego-stud-dot: rgba(27, 36, 48, .14);   /* 凸点本体 */
  --lego-stud-hi: rgba(255, 255, 255, .9);  /* 凸点高光 */
  --lego-stud-sh: rgba(27, 36, 48, .1);     /* 凸点落影 */
  --lego-stud-size: 28px;  /* 凸点间距 */
  --lego-stud-h: 13px;     /* 凸点带高度 */

  /* 凸点渐变组：一层高光 + 一层本体 + 一层落影，叠出立体感 */
  --lego-stud-grad:
    radial-gradient(circle at 11.5px 3.6px, var(--lego-stud-hi) 1.5px, transparent 2.1px),
    radial-gradient(circle at 14px 6px, var(--lego-stud-dot) 4.3px, transparent 5px),
    radial-gradient(circle at 14px 7.6px, var(--lego-stud-sh) 4.3px, transparent 5px);
}

/* 深色区块上的凸点配色（深青底用浅色凸点） */
.lego-studs-on-dark {
  --lego-stud-dot: rgba(255, 255, 255, .17);
  --lego-stud-hi: rgba(255, 255, 255, .38);
  --lego-stud-sh: rgba(0, 0, 0, .3);
}

/* 小号凸点带（间距更密、颗粒更小） */
.lego-studs-sm {
  --lego-stud-size: 21px;
  --lego-stud-h: 10px;
  --lego-stud-grad:
    radial-gradient(circle at 8.6px 2.8px, var(--lego-stud-hi) 1.1px, transparent 1.6px),
    radial-gradient(circle at 10.5px 4.6px, var(--lego-stud-dot) 3.2px, transparent 3.8px),
    radial-gradient(circle at 10.5px 5.8px, var(--lego-stud-sh) 3.2px, transparent 3.8px);
}

/* ---------- ① 凸点纹理系统 ---------- */
/* .lego-studs      顶边一条凸点带
   .lego-studs-b    底边一条凸点带
   .lego-studs-both 顶 + 底各一条（配合 .lego-studs 使用） */
.lego-studs,
.lego-studs-b,
.lego-studs-both { position: relative; }

.lego-studs::after,
.lego-studs-b::after,
.lego-studs-both::before {
  content: "";
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: var(--lego-stud-h);
  pointer-events: none;
  background-image: var(--lego-stud-grad);
  background-size: var(--lego-stud-size) var(--lego-stud-h);
  background-repeat: repeat-x;
}

.lego-studs::after { top: 0; }
.lego-studs-b::after { bottom: 0; }
.lego-studs-both::before { bottom: 0; }

/* 卡片顶部的「1×N 底板条」：行内文档流凸点排（用于 JS 生成的卡片） */
.public-team-card::before,
.resource-card::before,
.detail-article::before,
.studio-login-card::before,
.studio-panel::before {
  content: "";
  display: block;
  height: 15px;
  background-image: var(--lego-stud-grad);
  background-size: 26px 15px;
  background-repeat: repeat-x;
  background-position: center top;
}

/* 首页队伍卡片：底板条与卡片同底色，像从卡片里长出来的积木 */
.public-team-card::before {
  background-color: var(--team-bg, #f5eee4);
  border-bottom: 1px solid rgba(27, 36, 48, .07);
}

/* 悬停时底板条变成一块乐高黄底板，是孩子能感知的“积木彩蛋” */
.public-team-card:hover::before {
  --lego-stud-dot: rgba(146, 104, 0, .34);
  --lego-stud-hi: rgba(255, 255, 255, .75);
  --lego-stud-sh: rgba(146, 104, 0, .2);
  background-color: var(--lego-yellow);
}

/* 资料馆卡片 / 详情页 / 工作台面板：白底底板条 */
.resource-card::before,
.detail-article::before,
.studio-login-card::before,
.studio-panel::before {
  background-color: #fff;
  border-bottom: 1px solid rgba(27, 36, 48, .06);
}

/* 工作台面板：底板条拉齐到卡片边缘（抵消原有 28px 内边距） */
.studio-panel::before { margin: -28px -28px 18px; }
.studio-login-card::before { margin: -36px -36px 4px; }

/* 仿真器页卡片：底板条放在白色卡身顶部 */
.sim-compare-card-body { position: relative; }
.sim-compare-card-body::before {
  content: "";
  display: block;
  height: 15px;
  margin: -24px -24px 2px;
  background-color: #fff;
  background-image: var(--lego-stud-grad);
  background-size: 26px 15px;
  background-repeat: repeat-x;
  background-position: center top;
  border-bottom: 1px solid rgba(27, 36, 48, .06);
}

/* ---------- ② 乐高黄第二强调色 ---------- */

/* 编号角标（01 / 02 / 03…）改成乐高圆形凸点徽章 */
.public-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--lego-yellow-ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  background: radial-gradient(circle at 34% 30%, #ffe393 0 20%, var(--lego-yellow) 52%, #eeb829 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .7),
    inset 0 -3px 4px rgba(146, 104, 0, .32),
    0 3px 0 var(--lego-yellow-deep),
    0 6px 10px rgba(27, 36, 48, .16);
}

/* 资料馆分类编号：同一颗黄色凸点徽章，保留衬线数字 */
.resource-category-index {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-right: 12px;
  border-radius: 50%;
  color: var(--lego-yellow-ink);
  font-size: 16px;
  font-weight: 900;
  background: radial-gradient(circle at 34% 30%, #ffe393 0 20%, var(--lego-yellow) 52%, #eeb829 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .7),
    inset 0 -3px 4px rgba(146, 104, 0, .32),
    0 3px 0 var(--lego-yellow-deep),
    0 5px 9px rgba(27, 36, 48, .14);
}

/* 小徽章 / 标签：乐高黄点亮关键身份 */
.team-spike-chip,
.team-pending-mark {
  color: var(--lego-yellow-ink) !important;
  background: var(--lego-yellow) !important;
  border-color: var(--lego-yellow-deep) !important;
}

.studio-private-badge {
  color: #8a6d00;
  background: #fdf0c3;
}

/* 品牌圆章加一点凸点立体感（形状不变，只补高光与厚度） */
.brand-sigil {
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .4),
    inset 0 -3px 4px rgba(120, 74, 10, .28),
    0 2px 0 rgba(120, 74, 10, .35);
}

/* ---------- ③ 砖块式组件 ---------- */

/* 砖块按钮：顶部一条高光 + 底部加厚投影，active 时下压 */
.public-primary,
.studio-primary,
.studio-accent,
.catalog-primary-action,
.sim-compare-link,
.scene-sim-controls button[data-scene-primary],
button.action.primary {
  --lego-brick-side: #a64f1c; /* 砖块暗面（跟随按钮主色调整） */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .38),
    inset 0 -3px 0 rgba(0, 0, 0, .16),
    0 4px 0 var(--lego-brick-side),
    0 8px 14px rgba(27, 36, 48, .18);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}

.public-primary:active,
.studio-primary:active,
.studio-accent:active,
.catalog-primary-action:active,
.sim-compare-link:active,
.scene-sim-controls button[data-scene-primary]:active,
button.action.primary:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .3),
    inset 0 -2px 0 rgba(0, 0, 0, .14),
    0 1px 0 var(--lego-brick-side),
    0 3px 6px rgba(27, 36, 48, .16);
}

/* 青绿色按钮的砖块暗面 */
.sim-compare-link,
button.action.primary { --lego-brick-side: #0f4c47; }

/* 琥珀色仿真主按钮的砖块暗面 */
.scene-sim-controls button[data-scene-primary] { --lego-brick-side: #a5662c; }

/* 页头主 CTA 与资料馆入口：乐高亮黄砖块按钮 */
.public-studio-link,
.news-login,
.sim-compare-ai {
  color: #1b2430 !important;
  background: linear-gradient(#ffda4d, var(--lego-yellow-bright)) !important;
  border-color: var(--lego-yellow-deep) !important;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .72),
    inset 0 -3px 0 rgba(146, 104, 0, .26),
    0 4px 0 var(--lego-yellow-deep),
    0 8px 14px rgba(27, 36, 48, .16);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}

.public-studio-link:hover,
.news-login:hover,
.sim-compare-ai:hover { filter: brightness(1.04); }

.public-studio-link:active,
.news-login:active,
.sim-compare-ai:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(146, 104, 0, .22),
    0 1px 0 var(--lego-yellow-deep),
    0 3px 6px rgba(27, 36, 48, .14);
}

/* 次级按钮也补一点积木厚度（中性灰暗面，不抢戏） */
.public-secondary,
.studio-secondary {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .22),
    inset 0 -3px 0 rgba(0, 0, 0, .12),
    0 3px 0 rgba(27, 36, 48, .28);
}

.public-secondary:active,
.studio-secondary:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .18),
    inset 0 -2px 0 rgba(0, 0, 0, .1),
    0 1px 0 rgba(27, 36, 48, .28);
}

/* 场景选择图标 / 积木步骤标记：黄色凸点徽章 */
.scenario-icon {
  background: radial-gradient(circle at 34% 30%, #ffe393 0 20%, var(--lego-yellow) 52%, #eeb829 100%) !important;
  color: var(--lego-yellow-ink) !important;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .7),
    inset 0 -3px 4px rgba(146, 104, 0, .32),
    0 2px 0 var(--lego-yellow-deep);
}

.fll-test-page .block-row::before {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ffe393 0 20%, var(--lego-yellow) 52%, #eeb829 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .7),
    inset 0 -2px 3px rgba(146, 104, 0, .32);
}

/* ---------- ④ 纯 SVG 积木插图 ---------- */

/* UNEARTHED 赛季徽章外圈：凸点拼缝环（缓慢旋转，强化 FLL 归属感） */
.lego-badge-ring {
  position: absolute;
  z-index: 1;
  top: -3%;
  right: 4%;
  width: min(28vw, 360px);
  pointer-events: none;
  animation: lego-ring-spin 72s linear infinite;
}

@keyframes lego-ring-spin {
  to { transform: rotate(360deg); }
}

/* 「虚实相遇」舞台角落的积木堆叠小插图 */
.lego-bridge-bricks {
  position: absolute;
  z-index: 1;
  width: 118px;
  pointer-events: none;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .3));
}

.lego-bridge-bricks.bricks-a { left: 3%; bottom: 4%; }
.lego-bridge-bricks.bricks-b { right: 6%; top: 8%; width: 86px; }

/* 暗舞台角落的 brick 插图与轨道圆圈错开层级 */
.public-bridge-stage .bridge-tag { z-index: 4; }

/* ---------- 各页局部配合 ---------- */

/* 页脚凸点带贴住顶边分隔线 */
.public-footer.lego-studs::after,
.studio-footer.lego-studs::after,
.news-footer.lego-studs::after { top: -1px; }

/* 深青页头上的黄砖 CTA 更醒目，需要与凸点带错开层级 */
.public-header .public-studio-link { position: relative; z-index: 4; }

/* 队伍展厅深色板块补凸点带 */
.team-public-hero.lego-studs-b::after,
.team-robot-section.lego-studs::after { z-index: 4; }

/* 仿真测试台页头（深色）凸点带 */
.fll-test-page > header.lego-studs-b::after { z-index: 5; }

/* 桌面端窗口较窄时收敛插图尺寸（本项目不做手机端，仅防挤压） */
@media (max-width: 1100px) {
  .lego-bridge-bricks.bricks-a { width: 92px; }
  .lego-bridge-bricks.bricks-b { width: 66px; }
  .lego-badge-ring { width: 260px; }
}