/* ==========================================================================
   服务 / 文摘 / 猫猪暗门 的专属样式（颜色一律取主题变量，见 style.css 顶部）
   结构：服务·端子排 → 文摘·附注 → 页脚与暗门把手 → 猫猪暗门浮层 → 响应式
   ========================================================================== */

/* ===== 服务 · 端子排 ===== */

/* 版心：顶部给进线留位 */
.svc-wrap { padding-top: 150px; }

/* 进线：上一张图纸的主线从顶边中点落到端子排 */
.svc-feed { position: absolute; top: 0; left: 50%; width: 20px; height: 128px; transform: translateX(-50%); overflow: visible; }

/* 端子排：端子紧挨着排在导轨上，行间留出走线空间 */
.term-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 40px; }

/* 单个端子：竖向结构（本体 → 引线 → 线号套管 → 说明牌），入场前隐藏 */
.term {
    position: relative; display: flex; flex-direction: column; align-items: stretch;
    color: var(--text); text-decoration: none; outline: none;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.6s var(--ease) calc(var(--i) * 70ms), transform 0.6s var(--ease) calc(var(--i) * 70ms);
}

/* 亮相后显示 */
.sheet.shown .term { opacity: 1; transform: none; }

/* DIN 导轨：每个端子身后的一截导轨，同一行连成一条 */
.term::before {
    content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 12px;
    background: var(--ink-faint); border-top: 1px solid var(--ink-dim); border-bottom: 1px solid var(--ink-dim);
}

/* 端子本体：两颗螺钉夹着端子编号 */
.term-body {
    position: relative; z-index: 1; height: 38px; margin: 0 3px;
    display: flex; align-items: center; justify-content: space-around;
    background: var(--card); border: 1.5px solid var(--ink); border-radius: 3px 3px 0 0;
    font-family: var(--font-mono); font-size: 11px; color: var(--ink);
    transition: border-color 0.25s, box-shadow 0.25s;
}

/* 端子编号 */
.term-body b { font-weight: 600; letter-spacing: 0.06em; }

/* 一字螺钉 */
.term-body .screw { position: relative; width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; }

/* 螺钉一字槽 */
.term-body .screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 1.5px; background: var(--ink); transform: translateY(-50%) rotate(-35deg); }

/* 引线：端子到线号套管 */
.term-wire { width: 2px; height: 30px; margin: 0 auto; background: var(--ink-dim); transition: background-color 0.25s, box-shadow 0.25s; }

/* 线号套管：套在引线上的编号管 */
.term-ferrule {
    align-self: center; padding: 1px 7px; border: 1px solid var(--ink-dim); border-radius: 8px;
    background: var(--card); font-family: var(--font-mono); font-size: 10px; color: var(--ink-dim);
    transition: border-color 0.25s, color 0.25s;
}

/* 说明牌：服务名、地址、描述、访问属性 */
.term-card {
    position: relative; flex: 1; margin: 18px 6px 0; padding: 14px 14px 12px;
    display: flex; flex-direction: column; gap: 6px;
    background: var(--card); border: 1px solid var(--ink-faint);
    transition: border-color 0.25s, transform 0.25s var(--ease);
}

/* 说明牌上方的一小段引线 */
.term-card::before { content: ""; position: absolute; left: 50%; top: -19px; width: 2px; height: 18px; background: var(--ink-dim); transform: translateX(-50%); transition: background-color 0.25s, box-shadow 0.25s; }

/* 服务名 */
.term-card strong { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }

/* 服务地址 */
.term-card code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); word-break: break-all; }

/* 一句话描述 */
.term-desc { font-size: 13px; line-height: 1.75; color: var(--text); opacity: 0.85; flex: 1; }

/* 访问属性徽章 */
.term-badge { align-self: flex-start; margin-top: 4px; padding: 2px 6px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; white-space: nowrap; }

/* 游客可用：运行绿 */
.term-badge.run { color: var(--run); }

/* 仅管理员：琥珀 */
.term-badge.lock { color: var(--amber); }

/* 筹备中：淡线色 */
.term-badge.idle { color: var(--ink-dim); }

/* 悬停 / 键盘聚焦：整路接通，引线点亮为运行绿 */
.term:hover .term-wire, .term:focus-visible .term-wire,
.term:hover .term-card::before, .term:focus-visible .term-card::before { background: var(--run); box-shadow: 0 0 8px var(--glow); }

/* 接通时端子本体描运行绿 */
.term:hover .term-body, .term:focus-visible .term-body { border-color: var(--run); box-shadow: 0 0 10px var(--glow); }

/* 接通时套管变色 */
.term:hover .term-ferrule, .term:focus-visible .term-ferrule { border-color: var(--run); color: var(--run); }

/* 接通时说明牌描深并微抬 */
.term:hover .term-card, .term:focus-visible .term-card { border-color: var(--ink); transform: translateY(-3px); }

/* 筹备中端子：虚线说明牌、整体压暗、不可点 */
.term.idle { cursor: default; }
.term.idle .term-card { border-style: dashed; opacity: 0.6; }
.term.idle:hover .term-wire, .term.idle:hover .term-card::before { background: var(--ink-dim); box-shadow: none; }
.term.idle:hover .term-body { border-color: var(--ink); box-shadow: none; }
.term.idle:hover .term-ferrule { border-color: var(--ink-dim); color: var(--ink-dim); }
.term.idle:hover .term-card { border-color: var(--ink-faint); transform: none; }

/* 端子排铭牌说明 */
.svc-note { margin-top: 30px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-dim); }

/* ===== 文摘 · 附注 ===== */

/* 版心：底部给固定图签留位 */
.notes-wrap { padding-bottom: 210px; }

/* 附注列表：两栏 */
.notes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }

/* 单条附注：编号 + 正文，入场前隐藏 */
.note {
    display: grid; grid-template-columns: 48px 1fr; border-top: 1.5px solid var(--ink); padding-top: 22px;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.7s var(--ease) calc(var(--i) * 140ms), transform 0.7s var(--ease) calc(var(--i) * 140ms);
}

/* 亮相后显示 */
.sheet.shown .note { opacity: 1; transform: none; }

/* 附注编号 */
.note-mark { font-family: var(--font-fs); font-size: 30px; line-height: 1.2; color: var(--ink); }

/* 附注正文：长仿宋 */
.note p { font-family: var(--font-fs); font-size: 18px; line-height: 2.15; text-align: justify; color: var(--text); }

/* 收尾签：两侧细线夹一句 */
.notes-end { display: flex; align-items: center; gap: 18px; margin-top: 80px; font-family: var(--font-fs); font-size: 16px; letter-spacing: 0.4em; color: var(--ink-dim); }
.notes-end::before, .notes-end::after { content: ""; flex: 1; height: 1px; background: var(--ink-faint); }

/* ===== 页脚与暗门把手 ===== */

/* 页脚：靠左排，避开右下角固定图签 */
.notes-foot { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--ink-faint); }

/* 版权小字与暗门把手同款 */
.foot-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); }

/* 暗门把手：去掉按钮外观，与旁边版权文字完全一致 */
.lamp-secret { padding: 0; border: 0; background: none; cursor: inherit; line-height: inherit; }

/* ===== 猫猪暗门浮层 ===== */

/* 暗纱 */
.critter-overlay {
    position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--text) 55%, transparent); backdrop-filter: blur(3px);
}

/* 隐藏态 */
.critter-overlay[hidden] { display: none; }

/* 附图面板：米白纸、森林绿外框，内衬一道细框 */
.critter-overlay-panel {
    position: relative; width: min(680px, 92vw); max-height: 92vh; overflow: auto; padding: 32px 32px 28px;
    background: var(--card); border: 1.5px solid var(--ink); text-align: center;
    box-shadow: 0 30px 80px color-mix(in srgb, var(--text) 35%, transparent);
}
.critter-overlay-panel::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--ink-faint); pointer-events: none; }

/* 收起钮 */
.critter-close { position: absolute; top: 14px; right: 16px; z-index: 2; width: 30px; height: 30px; font-size: 20px; line-height: 1; color: var(--ink-dim); }
.critter-close:hover { color: var(--ink); }

/* 图签式标题：附图 / 图号 / 比例 */
.critter-titleblock { display: inline-grid; grid-template-columns: auto auto auto auto auto auto; border: 1.5px solid var(--ink); font-family: var(--font-fs); }
.critter-titleblock span { padding: 5px 10px; border-right: 1px solid var(--ink-faint); font-size: 13px; color: var(--text); }
.critter-titleblock span:last-child { border-right: 0; }
.critter-titleblock .k { color: var(--ink-dim); }
.critter-titleblock .name { font-size: 18px; letter-spacing: 0.3em; color: var(--ink); }
.critter-titleblock .mono { font-family: var(--font-mono); font-size: 12px; padding-top: 7px; }

/* 副标题 */
.critter-overlay-sub { margin-top: 14px; font-family: var(--font-fs); font-size: 15px; color: var(--text); }

/* 猫猪栅格：投掷物坐标参照系 */
.critter-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; gap: 26px; margin-top: 30px; }

/* 卡片 */
.critter-card {
    position: relative; margin: 0; padding: 20px 16px 14px; cursor: pointer;
    background: var(--bg); border: 1px solid var(--ink-faint);
    transition: transform 0.25s var(--ease), border-color 0.25s;
}
.critter-card:hover { transform: translateY(-4px); border-color: var(--ink); }

/* 线条画 */
.critter-svg { display: block; width: 100%; height: auto; }

/* 线条画：填色块 */
.critter-shape { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }

/* 线条画：描线 */
.critter-line { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* 猪鼻子 */
.critter-snout { fill: var(--ink-faint); }

/* 腮红 */
.critter-blush { fill: var(--amber); opacity: 0.45; }

/* 落地阴影 */
.critter-shadow { fill: var(--ink-faint); }

/* 名牌 */
.critter-name { margin-top: 10px; font-family: var(--font-fs); font-size: 18px; letter-spacing: 0.2em; color: var(--ink); }
.critter-name small { display: block; margin-top: 4px; font-family: var(--font-cn); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-dim); }

/* 台词气泡 */
.critter-bubble {
    position: absolute; left: 50%; top: -14px; z-index: 3; width: max-content; max-width: min(320px, 80vw);
    padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--card);
    font-size: 13px; line-height: 1.5; pointer-events: none;
    animation: critter-pop 2s ease forwards;
}
.critter-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }

/* 爱心投掷物 */
.critter-heart { position: absolute; left: 0; top: 0; z-index: 4; width: 26px; height: 26px; pointer-events: none; }
.critter-heart svg { display: block; width: 100%; height: 100%; }
.critter-heart path { fill: var(--amber); stroke: var(--ink); stroke-width: 1; }
.critter-heart-mini { width: 15px; height: 15px; }

/* 表情投掷物 */
.critter-emoji { position: absolute; left: 0; top: 0; z-index: 4; font-size: 30px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--text) 30%, transparent)); }
.critter-emoji-mini { font-size: 17px; }

/* 命中：轻晃泛光 */
.critter-card.is-hit { animation: critter-hit 0.55s ease; }

/* 气泡弹出、停留、散场 */
@keyframes critter-pop {
    0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(0.85); }
    12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    80% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(1); }
}

/* 命中：放大一下、描运行绿、泛光 */
@keyframes critter-hit {
    0% { transform: scale(1); }
    30% { transform: scale(1.06); border-color: var(--run); box-shadow: 0 0 18px var(--glow); }
    100% { transform: scale(1); }
}

/* ===== 响应式 ===== */

/* 中屏：端子三列 */
@media (max-width: 1100px) {
    .term-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 窄屏：端子两列、附注单栏、彩蛋卡片收窄 */
@media (max-width: 900px) {
    .svc-wrap { padding-top: 140px; }
    .term-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
    .notes { grid-template-columns: 1fr; gap: 40px; }
    .note p { font-size: 16px; }
    .notes-wrap { padding-bottom: 150px; }
    .critter-overlay-panel { padding: 50px 16px 20px; }
    .critter-titleblock span:nth-child(n + 3) { display: none; }
    .critter-titleblock .name { letter-spacing: 0.15em; }
    .critter-grid { gap: 14px; }
    .critter-titleblock span { padding: 4px 6px; }
}

/* 手机：端子单列 */
@media (max-width: 420px) {
    .term-strip { grid-template-columns: 1fr; }
}