/* ══════════════════════════════════════════════════════════════════
Лента — доводка облика: бумага, глубина, движение
Накладывается поверх основных стилей приложения.
══════════════════════════════════════════════════════════════════ */
:root{
--paper-warm:#f7f3ea; --paper-warm-2:#efe9dc;
--brass:#b08243; --brass-soft:rgba(176,130,67,.14);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-spring:linear(0,.2 6%,.62 13%,.9 20%,1.03 27%,1.06 35%,1.02 47%,1 62%,1);
}
:root[data-theme="light"], :root:not([data-theme="dark"]){
--surface:#fcf9f2; --plane:#f0e9da;
--ribbon:#e3d9c1; --ribbon-edge:#b09c72; --ribbon-in:#fffdf8;
--ink-1:#141110; --ink-2:#443c32; --ink-3:#726858;
--jew:#21508f; --world:#ab4414;
--grid:#d9ccb3; --axis:#a2916f;
--band-a:rgba(176,130,67,.075); --band-b:rgba(176,130,67,.145);
}
:root[data-theme="dark"]{
--surface:#191710; --plane:#0c0b07;
--ribbon:#37301f; --ribbon-edge:#6b5a35; --ribbon-in:#1e1a12;
--ink-1:#faf5e9; --ink-2:#cdc2ad; --ink-3:#9b8f7b;
--jew:#93bcf2; --world:#f4915c;
--grid:#39321f; --axis:#6a5c3c;
--band-a:rgba(208,164,100,.08); --band-b:rgba(208,164,100,.16);
}
/* ── бумага: живая крупица поверх всего ── */
#stage::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:3;opacity:.035;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
}
:root[data-theme="dark"] #stage::after{mix-blend-mode:screen;opacity:.045}
#stage{background:
radial-gradient(120% 90% at 50% 40%, var(--surface) 0%, var(--plane) 100%)}
/* ══════════════ СВЕТ В ГЛУБИНЕ («северное сияние») ══════════════
Три размытых пятна, которые очень медленно плывут. Ни картинок,
ни шейдеров — три градиента и три анимации. */
#aurora{position:absolute;inset:-28%;z-index:0;pointer-events:none;
opacity:.42;filter:blur(72px);mix-blend-mode:multiply;overflow:hidden}
#aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
#aurora .a1{width:54%;height:64%;left:1%;top:4%;
background:radial-gradient(circle at 50% 50%, rgba(176,130,67,.40), transparent 68%);
animation:au1 71s ease-in-out infinite}
#aurora .a2{width:48%;height:60%;left:36%;top:18%;
background:radial-gradient(circle at 50% 50%, rgba(47,93,158,.26), transparent 68%);
animation:au2 89s ease-in-out infinite}
#aurora .a3{width:42%;height:52%;left:64%;top:2%;
background:radial-gradient(circle at 50% 50%, rgba(194,90,44,.22), transparent 68%);
animation:au3 103s ease-in-out infinite}
:root[data-theme="dark"] #aurora{mix-blend-mode:screen;opacity:.34;filter:blur(80px)}
@keyframes au1{0%,100%{transform:none}
34%{transform:translate3d(16%,8%,0) scale(1.16)} 67%{transform:translate3d(-8%,-5%,0) scale(.92)}}
@keyframes au2{0%,100%{transform:none}
30%{transform:translate3d(-14%,-9%,0) scale(1.1)} 65%{transform:translate3d(11%,6%,0) scale(.88)}}
@keyframes au3{0%,100%{transform:none}
40%{transform:translate3d(-18%,10%,0) scale(1.22)} 72%{transform:translate3d(7%,-7%,0) scale(.95)}}
/* ── пятно света под рукой («spotlight») ── */
#stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:radial-gradient(270px 200px at var(--mx,50%) var(--my,50%),
rgba(176,130,67,.14), rgba(176,130,67,.05) 46%, transparent 72%);
opacity:0;transition:opacity .5s var(--ease-out)}
#stage.lit::before{opacity:1}
:root[data-theme="dark"] #stage::before{
background:radial-gradient(270px 200px at var(--mx,50%) var(--my,50%),
rgba(240,212,152,.11), rgba(240,212,152,.04) 46%, transparent 72%)}
/* ── лента: объём вместо плоской полосы ── */
#ribbon .rb-out{stroke:var(--ribbon-edge);filter:drop-shadow(0 3px 7px rgba(60,44,20,.14))}
#ribbon .rb-in{stroke:var(--ribbon)}
#ribbon .rb-mid{stroke:var(--brass);opacity:.5;stroke-dasharray:1 7;stroke-width:1.2}
#ribbon .chain-line{stroke-width:2.4;filter:drop-shadow(0 0 5px rgba(27,127,94,.35))}
/* по цепи передачи бежит огонёк: длина пути приведена к 100,
поэтому один и тот же отрезок работает на любом масштабе */
#ribbon .chain-spark{fill:none;stroke:var(--chain);stroke-width:3.4;stroke-linecap:round;
stroke-dasharray:4 96;opacity:.95;filter:drop-shadow(0 0 6px var(--chain));
animation:spark 12s linear infinite}
@keyframes spark{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* ── эпохи: мягкие вертикальные градиенты, а не заливки ── */
.eband{background-image:linear-gradient(to bottom, transparent 0%, currentColor 42%, transparent 100%)!important;
color:var(--band-a);background-color:transparent!important;opacity:.9}
.eband:nth-child(even){color:var(--band-b)}
.eband u{font-size:10px;letter-spacing:.11em;color:var(--brass);opacity:.95;font-weight:650}
/* ── сетка тоньше и спокойнее ── */
.gline{background:linear-gradient(to bottom, transparent, var(--grid) 18%, var(--grid) 82%, transparent)}
.gline.major{background:linear-gradient(to bottom, transparent, var(--axis) 12%, var(--axis) 88%, transparent)}
.gtick{letter-spacing:.02em}
.gtick b{color:var(--brass)}
/* ── точки: живые, с ореолом, и слегка тянутся к курсору ──
--px/--py ставит рука: смещение к указателю. Приём «магнитная кнопка»,
только без чужой библиотеки — две переменные и один слушатель. */
.ev{padding:5px}
.ev .d{
box-shadow:0 0 0 2.5px var(--ribbon-in), 0 1px 2px rgba(40,28,10,.25);
transform:translate(var(--px,0px), var(--py,0px));
transition:transform .2s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ev:hover .d{transform:translate(var(--px,0px), var(--py,0px)) scale(1.55);
box-shadow:0 0 0 2.5px var(--ribbon-in), 0 0 0 6px color-mix(in srgb, currentColor 22%, transparent),
0 2px 8px rgba(40,28,10,.3)}
.ev.active .d{transform:translate(var(--px,0px), var(--py,0px)) scale(1.7);
box-shadow:0 0 0 2.5px var(--ribbon-in), 0 0 0 5px currentColor,
0 0 16px color-mix(in srgb, currentColor 55%, transparent)}
.ev.disputed .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg)}
.ev.disputed:hover .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg) scale(1.45)}
.ev.disputed.active .d{transform:translate(var(--px,0px), var(--py,0px)) rotate(45deg) scale(1.6)}
.clu{box-shadow:0 0 0 2.5px var(--ribbon-in), 0 2px 6px rgba(40,28,10,.28);
transition:transform .34s var(--ease-spring), box-shadow .25s}
.clu:hover{transform:translate(-50%,-50%) scale(1.18)}
.mapring{border-color:var(--brass);opacity:.9;box-shadow:0 0 6px var(--brass-soft)}
/* ── подписи: перетекают уровнями, а не появляются пачкой ──
--la ставит отрисовка: насколько эта ступень важности уже проступила.
--lf ведёт анимация появления. Итоговая прозрачность — их произведение,
поэтому одно не затирает другое. */
@property --lf{syntax:"";initial-value:1;inherits:false}
.lbl{--la:1;opacity:calc(var(--la) * var(--lf, 1));
animation:lblIn .42s var(--ease-out) both;
transition:background .18s, color .18s, transform .22s var(--ease-out)}
@keyframes lblIn{from{--lf:0;transform:translateY(4px)}to{--lf:1;transform:none}}
/* на ходу подписи пересоздаются каждый кадр — анимацию появления гасим */
body.moving .lbl{animation:none}
.lbl:hover{transform:translateY(-1px);background:var(--brass-soft)}
.lbl.i3{letter-spacing:-.005em}
.lbl em{color:var(--brass);opacity:.85}
.leader{background:linear-gradient(to bottom, transparent, var(--axis));opacity:.6}
/* ── линии жизни ── */
.life{background:linear-gradient(90deg,
color-mix(in srgb, var(--life) 55%, transparent), var(--life));
box-shadow:0 1px 3px rgba(40,28,10,.18);transition:opacity .25s var(--ease-out), transform .25s}
.life:hover{transform:scaleY(1.25)}
.life.ch{background:linear-gradient(90deg,
color-mix(in srgb, var(--chain) 55%, transparent), var(--chain))}
/* ── карточка: стекло и пружина ── */
#popup{
background:color-mix(in srgb, var(--raised) 88%, transparent);
backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
border-color:color-mix(in srgb, var(--brass) 26%, transparent);
box-shadow:0 2px 6px rgba(40,28,10,.10), 0 18px 50px rgba(40,28,10,.20),
inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="dark"] #popup{box-shadow:0 2px 6px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.06)}
#popup.open{animation:popSpring .52s var(--ease-spring)}
@keyframes popSpring{
from{opacity:0;transform:scale(.88) translateY(10px)}
to{opacity:1;transform:none}}
#popup .arrow{background:color-mix(in srgb, var(--raised) 88%, transparent);
border-color:color-mix(in srgb, var(--brass) 26%, transparent)}
#pop-head h3{font-family:var(--font-read);font-size:18px;letter-spacing:-.015em;font-weight:600}
#pop-head{border-bottom-color:var(--brass-soft)}
#pop-foot{background:linear-gradient(to bottom, transparent, var(--brass-soft));border-top-color:var(--brass-soft)}
.tag.year{background:var(--brass);box-shadow:0 1px 3px rgba(120,88,34,.35)}
.tag.year.w{background:var(--world)}
/* ── панель ── */
#panel{box-shadow:-2px 0 10px rgba(40,28,10,.08), -24px 0 70px rgba(40,28,10,.16)}
#panel.open{transition:transform .58s var(--ease-out)}
#tabs button[aria-selected="true"]::after{background:var(--brass)}
.article h1{font-family:var(--font-read)}
/* ── кнопки: отдача при нажатии ── */
.btn,.iconbtn,#zoomc button{transition:background .16s, border-color .16s,
transform .28s var(--ease-spring), box-shadow .2s}
.btn:active,#zoomc button:active{transform:scale(.94)}
.btn.primary{background:var(--jew);box-shadow:0 2px 8px color-mix(in srgb, var(--jew) 35%, transparent);
position:relative;overflow:hidden;isolation:isolate}
/* блик пробегает по главной кнопке при наведении */
.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.34) 50%,transparent 60%);
transform:translateX(-140%)}
.btn.primary:hover::after{animation:sheen .95s var(--ease-out)}
@keyframes sheen{from{transform:translateX(-140%)}to{transform:translateX(140%)}}
.seg .thumb{background:var(--brass);transition:transform .52s var(--ease-spring), width .52s var(--ease-spring)}
/* ── мини-карта ── */
#mini{background:linear-gradient(to bottom, var(--plane), var(--surface))}
#miniWin{background:color-mix(in srgb, var(--brass) 13%, transparent);
border-color:var(--brass);border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;
transition:left .1s linear, width .1s linear}
.mk{border-radius:2px}
/* ══════════════════════ ВАЛИК ПРИБЛИЖЕНИЯ ══════════════════════
Латунный цилиндр, утопленный в панель торцом к нам. Объём делают
три слоя: рифление, цилиндрическая тень по краям и блик сверху. */
#gearwrap{position:absolute;inset-inline-end:14px;bottom:14px;z-index:26;
width:118px;user-select:none;touch-action:none}
#wheel{position:relative;height:30px;border-radius:9px;overflow:hidden;cursor:ew-resize;
background:linear-gradient(180deg,#5a4119,#33240e);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),
inset 0 2px 5px rgba(0,0,0,.55),
0 1px 0 rgba(255,255,255,.5), 0 6px 16px rgba(60,40,10,.28)}
#wheelKnurl{position:absolute;inset:2px 0;
background-image:repeating-linear-gradient(90deg,
#d9c194 0px, #b8975c 2.2px, #7e5f2b 4.4px, #55401b 6.6px, #7e5f2b 8.8px, #b8975c 11px);
background-size:11px 100%;
will-change:background-position}
#wheelShade{position:absolute;inset:2px 0;pointer-events:none;
background:linear-gradient(90deg,
rgba(20,12,2,.92) 0%, rgba(20,12,2,.45) 9%, rgba(255,244,214,.30) 34%,
rgba(255,248,226,.42) 50%, rgba(255,244,214,.30) 66%,
rgba(20,12,2,.45) 91%, rgba(20,12,2,.92) 100%)}
#wheelGloss{position:absolute;inset:2px 0 auto;height:9px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0));
border-radius:6px 6px 0 0}
#gearwrap.spin #wheel{box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),
inset 0 2px 7px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(60,40,10,.34)}
#wheelCap{display:flex;align-items:center;justify-content:space-between;gap:6px;
margin-top:4px;padding:0 2px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;pointer-events:none}
#wheelCap s{text-decoration:none;font-size:13px;color:var(--brass);letter-spacing:0}
#wheelCap i{font-style:normal;opacity:.7}
#gearLabel{position:absolute;inset-inline-end:130px;bottom:16px;
background:var(--raised);border:1px solid var(--brass-soft);border-radius:8px;padding:5px 10px;
font-size:11.5px;color:var(--ink-2);white-space:nowrap;box-shadow:var(--sh-2);
opacity:0;pointer-events:none;transform:translateX(6px);
transition:opacity .25s, transform .35s var(--ease-out);font-variant-numeric:tabular-nums}
#gearLabel.on{opacity:1;transform:none}
@media(max-width:900px){ #gearwrap{width:96px;inset-inline-end:10px}
#wheel{height:28px} #wheelCap i{display:none} #gearLabel{inset-inline-end:106px;bottom:14px} }
/* звук */
#sndBtn{font-size:14px}
/* ── дыхание при загрузке ── */
body.feel #ribbon{animation:ribbonIn .9s var(--ease-out) both}
@keyframes ribbonIn{from{opacity:0;transform:scaleY(.55)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
.lbl,#popup.open,body.feel #ribbon,#aurora i,#ribbon .chain-spark,.btn.primary:hover::after{animation:none!important}
#stage::before{display:none}
*{transition-duration:.01ms!important}
}
/* скрытые элементы обязаны быть скрыты, даже если у класса есть display */
[hidden]{display:none!important}
/* ══════════ мини-карта: понятная полоса, а не штрихкод ══════════ */
#mini{cursor:pointer}
.mename{position:absolute;top:1px;height:12px;overflow:hidden;pointer-events:none;
border-inline-start:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}
.mename span{display:block;padding-inline-start:5px;font-size:8.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--brass);opacity:.72;font-weight:700;white-space:nowrap;
text-overflow:ellipsis;overflow:hidden}
.mnow{position:absolute;top:0;bottom:0;width:2px;background:var(--brass);z-index:3;
pointer-events:none;box-shadow:0 0 6px color-mix(in srgb,var(--brass) 70%,transparent)}
.mnow b{position:absolute;bottom:1px;inset-inline-end:5px;font-size:8.5px;font-weight:700;
color:var(--brass);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
#miniWin{cursor:grab}
#miniWin::before,#miniWin::after{content:"";position:absolute;top:50%;width:3px;height:16px;
margin-top:-8px;border-radius:2px;background:var(--brass);opacity:.85}
#miniWin::before{inset-inline-start:-2px} #miniWin::after{inset-inline-end:-2px}
/* ══════════ шестерёнка больше ничего не закрывает ══════════
Колесо и есть приближение, поэтому кнопки + и − при нём лишние. */
body.feel #zoomc{bottom:88px}
body.feel #zIn, body.feel #zOut{display:none}
@media(max-width:900px){ body.feel #zoomc{bottom:76px} }
/* ══════════ КРАЯ СЧЁТА: за ними темнота ══════════
До года 1 времени ещё нет, после 6000 счёт завершён.
Полоса именно начинается и именно кончается — это видно глазом. */
.void{position:absolute;top:0;bottom:0;z-index:5;pointer-events:none;
display:flex;align-items:center;overflow:hidden}
.void.before{left:0;justify-content:flex-end;
background:linear-gradient(to left, rgba(9,7,4,0) 0, rgba(9,7,4,.62) 16px,
rgba(9,7,4,.95) 54px, #070502 92px)}
.void.after{justify-content:flex-start;
background:linear-gradient(to right, rgba(9,7,4,0) 0, rgba(9,7,4,.62) 16px,
rgba(9,7,4,.95) 54px, #070502 92px)}
/* надпись идёт вдоль края, как на обрезе книги: так она влезает
при любой ширине тёмного поля и не выглядит обрубленной */
.void span{display:flex;gap:8px;align-items:center;justify-content:center;
writing-mode:vertical-rl;text-orientation:mixed;height:100%;opacity:.92;padding:0 6px}
.void.before span{transform:rotate(180deg)}
[data-theme="dark"] .ebtn{color:var(--brass)}
.void b{font-size:10px;letter-spacing:.16em;text-transform:uppercase;
color:#d3ab68;font-weight:700;white-space:nowrap}
.void i{font-style:normal;font-size:9.5px;color:#8d8071;white-space:nowrap;letter-spacing:.04em}
#ribbon .rb-end{stroke:var(--brass);stroke-width:2;opacity:.75;stroke-linecap:round}
/* ══════════ ЛИНЕЙКА СВЕРХУ И КЛИКАБЕЛЬНЫЕ ЭПОХИ ══════════ */
.eband u, .ebtn{position:absolute;top:5px;inset-inline-start:10px}
.ebtn{border:0;background:none;padding:2px 7px;border-radius:7px;cursor:pointer;
font:inherit;font-size:10px;letter-spacing:.11em;text-transform:uppercase;font-weight:700;
color:#8a5f1f;opacity:1;pointer-events:auto;white-space:nowrap;max-width:calc(100% - 14px);
overflow:hidden;text-overflow:ellipsis;
transition:background .2s, opacity .2s, transform .25s var(--ease-out)}
.ebtn:hover{opacity:1;background:var(--brass-soft);transform:translateY(-1px)}
.ebtn:active{transform:scale(.96)}
.gtick.top{top:28px;bottom:auto}
.gline{top:46px}
/* ── цепь передачи: ровное плетение на своей дорожке ── */
#ribbon .chain-line{stroke-width:2.6;opacity:.95;
filter:drop-shadow(0 0 6px color-mix(in srgb, var(--chain) 55%, transparent))}
#ribbon .chain-node{fill:var(--chain);stroke:var(--surface);stroke-width:1.6}
#ribbon .chain-stem{stroke:var(--chain);stroke-width:1;opacity:.34;stroke-dasharray:2 3}
/* ── григорианский год под годом от Сотворения ── */
.gtick s{display:block;text-decoration:none;font-size:9.5px;color:var(--ink-3);
opacity:.9;margin-top:1px;letter-spacing:.01em;white-space:nowrap}
.gtick.top s{display:none}
.gtick{bottom:3px}
/* ── боковая панель: выход всегда на виду ── */
#panel header{gap:6px}
#panel header .btn.close{margin-inline-start:8px;font-weight:650;font-size:12.5px;
background:var(--brass);color:#fff;border-color:transparent;padding:0 12px;
box-shadow:0 1px 4px rgba(120,88,34,.3)}
#panel header .btn.close:hover{filter:brightness(1.08)}
#panel header .btn.ghost{opacity:.72}
#panel header .btn.ghost:hover{opacity:1}
/* ── срез времени: пока не закреплён, идёт за рукой ── */
#slice .hd{display:inline-flex;align-items:center;gap:6px;cursor:pointer;pointer-events:auto}
#slice .hd i{font-style:normal;opacity:.85}
#slice.follow .ln{border-inline-start-style:dashed;opacity:.9}
#slice .ln{pointer-events:auto;cursor:pointer;width:11px;margin-inline-start:-5px}
#slicePanel .pin{display:block;width:100%;margin:0 0 10px;border:1px solid var(--line);
background:var(--chip);border-radius:9px;padding:6px 9px;font:inherit;font-size:11.5px;
color:var(--ink-2);cursor:pointer;text-align:start;
transition:background .2s, border-color .2s}
#slicePanel .pin.on{background:color-mix(in srgb, var(--jew) 13%, transparent);
border-color:color-mix(in srgb, var(--jew) 34%, transparent);color:var(--jew);font-weight:600}
#slicePanel .pin:hover{border-color:var(--brass)}
#slicePanel .x{inset-inline-end:8px;top:8px}
/* ── расхождение хронологий: вторая рельса и парные точки ── */
.acrail{position:absolute;left:0;right:0;height:0;z-index:2;pointer-events:none;
border-top:1px dashed color-mix(in srgb, var(--ink-3) 55%, transparent)}
.acrail u{position:absolute;inset-inline-start:10px;top:-15px;font-size:9px;letter-spacing:.13em;
text-transform:uppercase;color:var(--ink-3);text-decoration:none;font-weight:700;
background:var(--surface);padding-inline-end:8px}
.dvlink{position:absolute;height:1px;transform-origin:0 50%;z-index:3;pointer-events:none;
background:linear-gradient(90deg,
color-mix(in srgb, var(--world) 70%, transparent),
color-mix(in srgb, var(--ink-3) 45%, transparent));opacity:.75}
.ghost{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
border:2px solid var(--ink-3);background:var(--surface);z-index:4;box-sizing:border-box}
.divlbl{position:absolute;z-index:5;font-size:10px;color:var(--ink-3);white-space:nowrap;
font-variant-numeric:tabular-nums;background:var(--surface);padding:0 4px;border-radius:4px}
.divlbl s{text-decoration:none;color:var(--world);font-weight:700}
/* ══════════ ПОЧИНКА ПОСЛЕ ПРОВЕРКИ ══════════
Полоса эпохи не ловит указатель (pointer-events:none), поэтому
кнопке нужно вернуть его явно — иначе название не нажимается. */
.eband{pointer-events:none}
.eband > .ebtn{pointer-events:auto !important;z-index:9}
/* воздух между названием эпохи, строкой годов и сеткой */
.ebtn{top:6px !important;padding:3px 9px !important;line-height:1.2}
.gtick.top{top:32px !important}
.gline{top:52px !important}
/* Причина найдена: слой событий #fg лежит поверх фона сплошным полотном
и перехватывал клики, адресованные названиям эпох. Полотно делаем
прозрачным для указателя, а ловят его только сами элементы. */
#fg{pointer-events:none}
#fg > .ev, #fg > .lbl, #fg > .clu, #fg > .life, #fg > .lifelbl,
#fg > .ghost, #fg > .divlbl{pointer-events:auto}