/* =====================================================================
 * 第六轮：全局搜索那段演示。
 * 零件沿用 styles.css / styles-4.css（.ed / .pn / .tree-x / .sd-caption），这里只加
 * 搜索面板、积木上的黄色高亮、跳过去之后的黄框。
 * =================================================================== */

.se-ed { aspect-ratio: 16 / 7.6; --bs: 0.6; }
.se-ed .ed-body { position: absolute; inset: 34px 0 34px; display: grid; grid-template-columns: 210px 1fr; gap: 5px; padding: 5px; }
.se-ed .ws .bk-stack { position: absolute; }

/* 跳过去之后那块积木外面的黄框：闪三下再淡掉，跟产品里一样。 */
.se-spot { position: absolute; z-index: 3; border: 3px solid #ffd84d; border-radius: 6px; opacity: 0; pointer-events: none; }
.se-spot.show { animation: se-spot 2.4s ease-in-out 1; }
@keyframes se-spot {
  0%, 40%, 80% { opacity: 1; box-shadow: 0 0 14px 2px #ffd84d, inset 0 0 8px rgb(255 216 77 / 40%); }
  20%, 60% { opacity: 1; box-shadow: none; }
  100% { opacity: 0; box-shadow: none; }
}

/* 右上角的按键提示。 */
.se-key { position: absolute; right: 16px; top: 44px; z-index: 6; display: flex; gap: 4px; align-items: center; font-size: 11px; color: var(--e-dim); opacity: 0; transition: opacity 0.3s; }
.se-key.show { opacity: 1; }
.se-key kbd { font-size: 11px; padding: 1px 7px; }

/* ---- 搜索面板 -------------------------------------------------------- */
.se-pal { position: absolute; left: 50%; top: 52px; z-index: 7; display: flex; flex-direction: column; width: min(640px, 92%); max-height: calc(100% - 100px); translate: -50% 0; color: var(--paper); background: var(--e-panel); border: 1px solid var(--e-line-2); border-radius: 14px; box-shadow: 0 30px 80px rgb(0 0 0 / 55%), inset 0 0 0 1px rgb(255 255 255 / 4%); opacity: 0; transform: translateY(-12px) scale(0.985); transition: opacity 0.2s var(--ease), transform 0.24s var(--ease); pointer-events: none; }
.se-pal.show { opacity: 1; transform: none; }
.se-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px 8px; color: var(--e-dim); }
.se-head svg { flex: none; width: 16px; height: 16px; }
.se-q { flex: 1; display: flex; align-items: center; min-height: 20px; font-size: 15px; color: #fff; }
.se-q em { font-style: normal; color: var(--e-dim); opacity: 0.8; }
.se-q em[hidden] { display: none; }
.se-caret { width: 1px; height: 15px; margin-left: 1px; background: #fff; animation: caret 1s steps(1) infinite; }
.se-head kbd, .se-foot kbd { font-size: 10px; padding: 0 5px; }
.se-chips { display: flex; gap: 6px; align-items: center; padding: 0 14px 10px; }
.se-chip { display: inline-flex; gap: 4px; align-items: center; padding: 3px 10px; font-size: 11px; color: var(--e-dim); background: var(--e-input); border-radius: 999px; }
.se-chip.on { color: #fff; background: var(--acc); }
.se-chip b { font-weight: 500; opacity: 0.75; }
.se-chip b:empty { display: none; }
.se-scope { margin-left: auto; }
.se-list { min-height: 60px; padding: 0 8px 8px; border-top: 1px solid var(--e-line); }
.se-list [hidden] { display: none !important; }
.se-hint { padding: 16px 10px; font-size: 11.5px; color: var(--e-dim); }
.se-sec { display: flex; gap: 6px; padding: 8px 10px 4px; font-size: 10.5px; letter-spacing: 0.04em; color: var(--e-dim); }
.se-sec span { opacity: 0.7; }
.se-sprite { display: flex; gap: 6px; padding: 6px 10px 2px 18px; font-size: 11px; color: var(--paper); opacity: 0.85; }
.se-sprite span { opacity: 0.6; }
.se-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 8px; }
.se-item.on { background: color-mix(in srgb, var(--acc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent); }
.se-item .bk-stack { position: relative; width: auto !important; height: auto !important; }
.se-item .bk-stack img.bk { position: static; display: block; }
/* 积木上命中的字：一块黄色记号笔盖在原来的字上，字压黑。坐标按原图像素写，跟着 --bs 缩。 */
.se-hl { position: absolute; z-index: 2; left: calc(var(--x) * 1px * var(--bs)); top: calc(var(--y) * 1px * var(--bs)); width: calc(var(--w) * 1px * var(--bs)); height: calc(var(--h) * 1px * var(--bs)); display: grid; place-items: center; font-size: calc(16px * var(--bs)); font-weight: 700; line-height: 1; color: #1c1c1c; background: #ffd84d; border-radius: 3px; opacity: 0; scale: 0.8; transition: opacity 0.25s, scale 0.3s var(--spring); }
.se-hl.show { opacity: 0.95; scale: 1; }
.se-count { display: inline-flex; gap: 3px; align-items: center; padding: 1px 7px; font-size: 10.5px; color: var(--e-dim); background: var(--e-input); border-radius: 999px; }
.se-count i { width: 0; height: 0; border: 3px solid transparent; border-left: 4px solid currentcolor; transition: rotate 0.16s; }
.se-count.open i { rotate: 90deg; }
.se-sub { display: flex; gap: 8px; align-items: center; padding: 4px 10px 4px 30px; font-size: 11px; color: var(--e-dim); opacity: 0; translate: 0 -4px; transition: opacity 0.25s, translate 0.25s var(--ease); }
.se-sub.show { opacity: 1; translate: 0 0; }
.se-sub i { width: 6px; height: 6px; border-radius: 50%; background: #4c97ff; opacity: 0.7; }
.se-sub span { opacity: 0.6; }
.se-foot { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; font-size: 10.5px; color: var(--e-dim); border-top: 1px solid var(--e-line); }
.se-keys { display: flex; gap: 5px; align-items: center; }

@media (max-width: 860px) {
  body:not(.fit-mode) .se-ed { aspect-ratio: auto; height: 520px; }
  body:not(.fit-mode) .se-ed .ed-body { grid-template-columns: 1fr; }
  body:not(.fit-mode) .se-ed .ed-body .pn:first-child { display: none; }
}