/* ============================================================
   particle-life.css — 粒子生命（GPU 版）
   ------------------------------------------------------------
   Comic Style 改造: 视觉 (颜色/边框/阴影/圆角) 一律由 .cshtml 的
   工具类承担, 本文件只保留工具类表达不了的机制:
     · canvas 的绝对定位与铺满
     · 悬浮件的定位与居中位移 (含抵消 hover 位移的那一条)
     · details / summary 的折叠机制与自绘 +/− 标记
     · 由 JS 切换的状态类 (.is-on / .is-active / .is-warn / .pl-panel-hidden)
     · 力矩阵单元格的网格与配色 (由 JS 注入 inline 背景色)
     · 全屏 (:fullscreen) 与响应式断点
   ⚠️ 已移除全部 --glass-* 毛玻璃依赖, 改为 comic 墨色纸色。
   ============================================================ */

.pl-app {
    --pl-ink: #1a1a1a;
    --pl-paper: #fffef0;
    --pl-accent: #3b82f6;   /* 主强调: 蓝 (与站点同色) */
    --pl-accent2: #ef4444;  /* 次强调: 红 */
    height: calc(100vh - 68px);         /* 占满导航栏下方一屏 */
    min-height: 540px;
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--pl-ink);
    overflow: hidden;
}

/* ---------- 顶栏 ---------- */
.pl-bar { display: flex; flex-wrap: wrap; z-index: 20; }
.pl-bar-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 12rem; }
.pl-stats { display: flex; margin-left: auto; white-space: nowrap; }
.pl-stats b { color: var(--pl-accent); font-weight: 900; font-family: 'Consolas', 'Courier New', monospace; }

/* ---------- 舞台 ---------- */
.pl-stage { position: relative; flex: 1; overflow: hidden; background: #0f1626; }
.pl-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
#plBrushOverlay { pointer-events: none; }

/* ---------- 画布悬浮件: 图例 / 提示 ---------- */
.pl-legend, .pl-canvas-hint {
    background: var(--pl-paper);
    border: 4px solid var(--pl-ink);
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: 900;
    color: var(--pl-ink);
}
.pl-legend {
    position: absolute; top: .7rem; right: 1rem; z-index: 5;
    display: flex; flex-direction: column; gap: .28rem; align-items: flex-end;
    padding: .45rem .6rem;
    box-shadow: 3px 3px 0 0 rgba(26, 26, 26, 1);
    font-size: .66rem;
}
.pl-legend-item { display: flex; align-items: center; gap: .35rem; }
/* JS 注入 inline background 与 box-shadow (物种色标), 这里只给方正形状 */
.pl-legend-item i { width: 10px; height: 10px; display: inline-block; border: 2px solid var(--pl-ink); }

.pl-canvas-hint, .pl-toolbar { position: absolute; left: 50%; transform: translateX(-50%); }
.pl-canvas-hint {
    top: .7rem; z-index: 5;
    padding: .22rem .8rem;
    white-space: nowrap;
    font-size: .66rem;
    box-shadow: 3px 3px 0 0 rgba(26, 26, 26, 1);
    /* 速度线底纹层要绝对定位铺满, 所以这里必须是定位上下文 */
    position: absolute;
    overflow: hidden;
}

/* ---------- 右侧控制面板 ---------- */
.pl-controls {
    position: absolute; top: .6rem; right: .6rem; z-index: 20;
    width: 330px; max-height: calc(100% - 4.4rem);
    display: flex; flex-direction: column; gap: .1rem;
    padding: .2rem .9rem .8rem; overflow-y: auto; scrollbar-width: thin;
}

/* summary: 折叠标记由伪元素自绘 (工具类表达不了 content 切换) */
.pl-controls summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: .5rem;
    padding: .62rem 0 .5rem;
    font-size: .82rem; font-weight: 900;  letter-spacing: .04em;
    color: var(--pl-ink); user-select: none;
}
.pl-controls summary::-webkit-details-marker { display: none; }
.pl-controls summary::before {
    content: "+";
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex-shrink: 0;
    font-size: .8rem; font-weight: 900;
    background: var(--pl-ink); color: var(--pl-paper);
}
.pl-controls details[open] summary::before { content: "−"; background: var(--pl-accent); color: #ffffff; }
.pl-controls details { border-bottom: 4px dashed var(--pl-ink); }
.pl-controls details:last-child { border-bottom: 0; }
.pl-controls .pl-section-body { padding-bottom: .7rem; }

/* ---------- 单条滑杆 ---------- */
.pl-ctl { display: flex; align-items: center; gap: .6rem; margin: .42rem 0; }
.pl-ctl > span { flex: 0 0 62px; font-size: .74rem; font-weight: 900; color: var(--pl-ink); }
/* 原生滑杆: accent-color 与方块把手 (工具类表达不了) */
.pl-ctl input[type="range"] { flex: 1; min-width: 0; accent-color: var(--pl-ink); cursor: pointer; }
.pl-ctl output {
    flex: 0 0 52px; text-align: right;
    font-family: 'Consolas', 'Courier New', monospace; font-size: .66rem; font-weight: 900;
    color: var(--pl-ink); background: var(--pl-accent); border: 2px solid var(--pl-ink); padding: 0 3px;
}

/* 实际作用半径读数: 粒子数会影响射程（按 √ 缩放），这里把它显式化 */
.pl-range-note {
    margin: .15rem 0 .3rem;
    font-family: 'Consolas', 'Courier New', monospace; font-size: .66rem; font-weight: 900;
    color: #4a4a4a;
}
.pl-range-note b { color: var(--pl-ink); background: #facc15; border: 2px solid var(--pl-ink); padding: 0 3px; }
.pl-range-note small { display: block; line-height: 1.45; }

/* 单格峰值逼近邻居上限时告警: 变红 + ⚠ 字符 (状态不单靠颜色) */
.pl-stats b.is-warn { color: #ef4444; }
.pl-stats b.is-warn::after { content: " ⚠"; }

/* ---------- 力矩阵: 单元格配色由 JS 注入 inline 背景 ---------- */
.pl-mx-grid { display: grid; gap: 3px; padding: .5rem; border: 4px solid var(--pl-ink); background: var(--pl-paper); }
.pl-mx-grid.pl-mx-large { gap: 2px; padding: .35rem; }
.pl-mx-cell {
    aspect-ratio: 1; border: 2px solid var(--pl-ink); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Consolas', 'Courier New', monospace; font-size: .54rem; font-weight: 900;
    color: #ffffff; text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
    transition: transform 100ms, filter 100ms;
}
.pl-mx-large .pl-mx-cell { font-size: 0; }
.pl-mx-cell:hover { transform: scale(1.14); filter: brightness(1.15); }
.pl-mx-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; }
.pl-mx-meta small { font-size: .64rem; font-weight: 700; color: #4a4a4a; line-height: 1.5; }
.pl-mx-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* ---------- 小按钮 / 模式切换按钮 ---------- */
.pl-mini-btn {
    padding: .24rem .55rem; cursor: pointer;
    font-size: .68rem; font-weight: 900;
    color: var(--pl-ink); background: var(--pl-paper);
    border: 4px solid var(--pl-ink);
    transition: background 100ms, color 100ms;
}
.pl-mini-btn:hover { background: #facc15; }

.pl-brush-type, .pl-matrix-mode { display: flex; gap: .35rem; }
.pl-matrix-mode { margin-bottom: .45rem; }
.pl-brush-type button, .pl-matrix-mode button {
    flex: 1; padding: .38rem 0; cursor: pointer;
    font-size: .72rem; font-weight: 900;  letter-spacing: .02em;
    color: var(--pl-ink); background: var(--pl-paper);
    border: 4px solid var(--pl-ink);
    transition: background 100ms, color 100ms;
}
.pl-brush-type button:hover, .pl-matrix-mode button:hover { background: #facc15; }
/* 选中态: JS 切 .is-active; .pl-btn 的 .is-on 同理 (由工具条的 .is-on 驱动) */
.pl-brush-type button.is-active,
.pl-matrix-mode button.is-active,
.pl-btn.is-on { background: var(--pl-ink); color: #facc15; }

/* ---------- 底部工具条 ---------- */
.pl-toolbar { bottom: .7rem; z-index: 20; display: flex; flex-wrap: wrap; max-width: 96%; }
/* 工具条用 translateX(-50%) 居中, 但 .pl-btn 自身有 hover 位移;
   这里显式锁回水平居中, 避免悬浮时整条跳动 */
.pl-toolbar:hover { transform: translateX(-50%); }

.pl-speedbox input[type="range"] { width: 64px; accent-color: var(--pl-ink); cursor: pointer; }

/* 右侧面板手动展开/收起（按钮始终可见，由用户控制） */
.pl-panel-toggle {
    position: absolute; top: .6rem; right: 344px; z-index: 30;
    width: 34px; height: 34px; cursor: pointer;
    transition: right 100ms ease, background 100ms, color 100ms;
}
/* 面板收起后, 开关贴回右上角, 否则会悬在空处 */
.pl-panel-hidden .pl-panel-toggle { right: .6rem; }
/* 收起态: 面板右移淡出且不吃交互 */
.pl-panel-hidden .pl-controls { opacity: 0; transform: translateX(30px); pointer-events: none; }
.pl-controls, .pl-toolbar { transition: opacity 100ms ease, transform 100ms ease; }

/* 全屏时面板避让：全屏请求发在 canvas 的父节点 .pl-stage 上，
   所以 :fullscreen 要挂在 .pl-stage（写成 .pl-app:fullscreen 永远不匹配）。 */
.pl-stage:fullscreen .pl-controls { right: 1rem; }
.pl-stage:fullscreen .pl-panel-toggle { right: 1rem; }
.pl-stage:fullscreen { background: #0f1626; }

/* ---------- 移动端：面板移到下方，开关按钮隐藏（面板常显） ---------- */
@media (max-width: 900px) {
    .pl-app { height: auto; min-height: 0; overflow: visible; }
    .pl-stage { height: 62vh; min-height: 420px; }
    .pl-controls {
        position: static; width: 100%; max-height: none;
        margin: .6rem; order: 2; overflow: visible;
        box-shadow: none;
    }
    .pl-bar-sub { display: none; }
    .pl-toolbar { position: static; transform: none; margin: .6rem; max-width: none; }
    .pl-toolbar:hover { transform: none; }
    .pl-panel-toggle { display: none; }
    .pl-panel-hidden .pl-controls { opacity: 1; transform: none; pointer-events: auto; }
}

/* ---------- 动效偏好兜底 (风格包硬性要求) ---------- */
@media (prefers-reduced-motion: reduce) {
    .pl-mx-cell, .pl-toolbar, .pl-controls, .pl-panel-toggle { transition: none; }
    .pl-mx-cell:hover { transform: none; }
}