/* Life-stage chain: stage - arrow with duration - stage ... */
.lifebox{margin:16px 0;border:5px solid var(--o);border-radius:calc(var(--radius) + 6px);overflow:hidden;background:var(--panel)}
.lifebox .oh{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--accent);color:var(--accent-ink);padding:8px 14px}
.lifebox .lf-row{display:flex;align-items:stretch;justify-content:flex-start;gap:0;padding:16px 10px 12px;overflow-x:auto}
.lifebox .lf-row>:first-child{margin-left:auto}
.lifebox .lf-row>:last-child{margin-right:auto}
.lifebox .of{padding:8px 14px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);background:var(--soft)}

.lf-stage{flex:1 1 150px;min-width:130px;max-width:210px;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);text-align:center;font-size:.85rem}
.lf-stage.here{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}
.lf-stage img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.lf-stage .ph{aspect-ratio:4/3;background:var(--soft);display:grid;place-items:center;color:var(--muted);font-size:.8rem;padding:0 8px}
.lf-stage .bd{padding:8px 8px 10px;display:flex;flex-direction:column;gap:2px}
.lf-stage .nm{font-weight:700;font-size:.95rem}
.lf-stage small{color:var(--muted)}
.lf-stage .you{align-self:center;margin-top:4px;padding:1px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:.7rem;font-weight:700}
.lf-stage .cr2{font-size:.68rem;color:var(--muted);margin-top:4px}
.lf-stage .cr2 a{color:var(--muted)}

.lf-arrow{flex:0 0 118px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0 6px;text-align:center;font-size:.8rem;color:var(--ink)}
.lf-arrow .lbl{font-weight:600;line-height:1.25}
.lf-arrow .lbl small{display:block;font-weight:400;color:var(--muted)}
.lf-arrow .ar{width:100%;height:26px;position:relative}
.lf-arrow .ar::before{content:"";position:absolute;left:4px;right:12px;top:50%;border-top:3px solid var(--o);transform:translateY(-50%)}
.lf-arrow .ar::after{content:"";position:absolute;right:2px;top:50%;border:7px solid transparent;border-left:11px solid var(--o);border-right:0;transform:translateY(-50%)}

@media(max-width:620px){
  /* stays left to right: swipe sideways to see every stage */
  .lifebox .lf-row{padding-bottom:16px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .lf-stage{flex:0 0 150px;min-width:150px;scroll-snap-align:center}
  .lf-arrow{flex:0 0 92px}
}
.lf-stage img.contain{object-fit:contain;background:var(--soft)}

.lf-stage .nm .cm{font-weight:400;font-size:.8em;color:var(--muted)}