/* Сцена фотоэффекта (фотоэлемент): общая для страницы симулятора и героя главной. Рисует static/labs/photoelectric_effect/script.js */
#sim-container {
    position: relative; height: 440px; border-radius: 12px; overflow: hidden;
    background: #0b1226; border: 1px solid #22304a;
}
#sim-container canvas { display: block; }
.pe-hud {
    position: absolute; left: 10px; right: 10px; top: 6px; display: flex;
    flex-direction: row-reverse; justify-content: space-between; align-items: flex-start;
    flex-wrap: nowrap; gap: 6px; pointer-events: none; z-index: 2;
}
#peReadout {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; font-size: 0.8rem; color: #c9d6ea;
    background: rgba(10, 18, 34, 0.8); border: 1px solid #2c3d5e; border-radius: 8px;
    padding: 5px 10px; font-variant-numeric: tabular-nums; min-width: 190px;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#peReadout .r { display: flex; justify-content: space-between; gap: 12px; }
#peReadout small { color: #8ea3c2; font-size: 0.72rem; }
#peReadout b { color: #fff; font-size: 0.86rem; }
#peReadout .k-h span, #peReadout .k-h b { color: #ffd6a5; }
#peReadout .k-e span, #peReadout .k-e b { color: #ffc078; }
#peReadout .k-v span, #peReadout .k-v b { color: #74c0fc; }
#peReadout .k-i span, #peReadout .k-i b { color: #8ce99a; }
#peReadout .k-u span, #peReadout .k-u b { color: #ff9a9a; }
#peStatus {
    flex: 0 1 auto; min-width: 0; margin-right: auto; font-size: 0.82rem; font-weight: 600;
    color: #e6edf7; background: rgba(10, 18, 34, 0.8); border: 1px solid #2c3d5e;
    border-left: 4px solid #8ea3c2; border-radius: 8px; padding: 4px 10px; max-width: 52%;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#peStatus:empty { display: none; }
#peStatus[data-k="ok"] { border-left-color: #69db7c; }
#peStatus[data-k="no"] { border-left-color: #ffa94d; }
#peStatus[data-k="part"] { border-left-color: #74c0fc; }
#peStatus[data-k="done"] { border-left-color: #ffd166; }
#peStatus[data-k="lab"], #peStatus[data-k="run"] { border-left-color: #b197fc; }
@media (max-width: 575.98px) {
    #sim-container { height: 520px; }
    .pe-hud { flex-wrap: wrap; left: 6px; right: 6px; top: 6px; gap: 4px; }
    #peReadout { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; gap: 0 10px; padding: 3px 8px; min-width: 0; }
    #peReadout .r { gap: 4px; }
    #peReadout small { display: none; }
    #peReadout b { font-size: 0.78rem; }
    #peStatus { max-width: 100%; font-size: 0.74rem; padding: 3px 8px; }
}
#peFormula {
    position: absolute; left: 10px; bottom: 8px; z-index: 2; pointer-events: none;
    max-width: calc(100% - 20px); width: max-content; text-align: left;
    font-size: 0.86rem; line-height: 1.5; color: #dfe8f6; background: rgba(10, 18, 34, 0.84);
    border: 1px solid #2c3d5e; border-radius: 8px; padding: 3px 12px; font-variant-numeric: tabular-nums;
}
#peFormula:empty { display: none; }
@media (max-width: 575.98px) { #peFormula { font-size: 0.7rem; padding: 2px 8px; } }
@media (max-width: 575.98px) {
    .cl-law-row { gap: 4px; }
    .cl-law-cell { flex: 1 1 80px; min-width: 80px; padding: 4px 6px; }
    .cl-law-row .op { font-size: 1rem; }
}
#peToast {
    position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(0.7);
    font-size: clamp(1.2rem, 3.2vw, 2rem); font-weight: 800; color: #fff; text-align: center;
    letter-spacing: 0.02em; line-height: 1.15; max-width: 86%;
    opacity: 0; pointer-events: none; z-index: 3;
}
#peToast.go { animation: peToast 2s ease-out; }
@keyframes peToast {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    10% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -56%) scale(1); }
}